Как сделать тень на картинку css

Как сделать тень на картинку css Как сделать тень на картинку css 77

Тени в CSS можно реализовать довольно быстро и просто, будь то тень блока или текста. Но настолько ли просто реализовать внутреннюю тень? Можете ли вы создать врезанную тень блока? И как дело обстоит с той же задачей при использовании текста? Внутренние тени в CSS: изображения, тексты и прочее
Сегодня мы хотим рассказать вам об очень простом способе реализации внутренней тени, который включает в себя всего несколько строк кода. Мы расскажем вам и про тень для блоков и для текстов, а также расскажем о том, как можно изменить их таким образом, чтобы получить врезанную тень.

Вам нравится эта статья? Не забудьте подписаться на нашу RSS-рассылку.

Синтаксис тени

Перед тем как перейти ко врезанным теням, давайте рассмотрим основной синтаксис для создания двух разных типов CSS-теней. Даже если вы уже занимались этим ранее, давайте просто освежим память.

box-shadow

Тени блоков или box-shadow – это, наверное, одни из самых популярных теней в CSS. Потенциальные способы реализации здесь сильно отличаются, и разработчики зачастую используют собственные подходы и приложения. Синтаксис тени блока в целом довольно сложный, и включает в себя 6 отдельных значений. Мы начнем с того, что рассмотрим 5 самых частых примеров реализации.

Внутренние тени в CSS: изображения, тексты и прочее
Как видно, список приведенный выше представляет собой перечень значений для горизонтального смещения, вертикального смещения, радиуса размытия, уровня распространения тени, а также цвета. Первые два значения – горизонтальное и вертикальное смещение, - очень понятны. Положительные значения сместят тень вправо и вниз соответственно, а отрицательные значения сместят тень влево и вверх. Давайте посмотрим на пример обоих значений: Внутренние тени в CSS: изображения, тексты и прочее
Два последних значения, которые отвечают за радиус размытия и радиус распространения, немного сложнее. Вероятно, у вас возникнет вопрос, в чем же разница? Для того чтобы ответить на него, давайте для начала посмотрим на один из них, с которым вы скорее всего уже знакомы: радиус размытости. Внутренние тени в CSS: изображения, тексты и прочее
Как видно, если не использовать радиус размытости, то нам удастся сделать тень с резкими краями, а большое значение дает очень размытые края. Все просто, не правда ли? Так что же насчет параметра радиуса распространения? Какое здесь отличие? Рисунок лучше тысячи слов разъяснит вам ситуацию: Внутренние тени в CSS: изображения, тексты и прочее
Как видно, радиус распространения позволяет нам увеличивать или уменьшать область тени, не влияя при этом на уровень ее размытости. Если расценивать данный параметр как размер тени, то вы, можно сказать, не ошибетесь.

Если вы не будете использовать размытость и распространение, то эти значения по умолчанию останутся на 0. Если вы проведете небольшой анализ примеров в интернете, то заметите, что в большинстве демо-файлов не используется параметр распространения. Также обратите внимание на то, что обычно добавляется версия box-shadow с префиксом –webkit, чтобы избежать проблем с различными браузерами.

text-shadow

Теперь мы точно знаем, для чего нужна тень блоков и что она представляет собой, и пришло время перейти к изучению синтаксиса другого типа CSS-тени: text-shadow. К счастью, здесь синтаксис гораздо проще, чем в случае с тенью блоков.

Внутренние тени в CSS: изображения, тексты и прочее
Как видно, большинство значений здесь те же, поэтому если вы понимаете одно, то поймете и второе. Хотя интересно то, что здесь у вас не будет возможности изменять радиус распространения тени. Было бы классно, если бы у нас была эта возможность, но ее здесь просто нет. Внутренние тени в CSS: изображения, тексты и прочее
Врезанные тени блоков

Теперь мы изучили основу, и сейчас вы понимаете синтаксис CSS-теней. Пришло время научиться делать внутренние (inner) и врезанные (inset) тени. Для того чтобы преобразовать тень во врезанную, нам всего лишь нужно будет добавить слово inset.

Внутренние тени в CSS: изображения, тексты и прочее
Именно поэтому мы начали с простого синтаксиса. В целом, отрывок кода с box-shadow может вас немного запутать, но если вы разберетесь во всем, то все покажется простым.

Здесь все значения в целом работают одним и тем же образом, только тень размещается внутри блока. На этом изображении мы можем видеть, насколько сильно радиус распространения тени может повлиять на то, как выглядит тень:

Внутренние тени в CSS: изображения, тексты и прочее
Заметьте, что на этот раз мы воспользовались цветом RGBa вместо значения HEX. Это отлично подходит для теней, так как значение прозрачности позволяет быстро и просто затемнить или осветлить тень. Внутренние тени в CSS: изображения, тексты и прочее
Изображения

Довольно просто применить box-shadow к пустому div-элементу, но что если вы хотите сделать тень от изображения? Звучит просто, но на самом деле здесь все довольно сложно. Давайте рассмотрим код и ознакомимся с результатом, к которому он приведет. Начнем с простого старого тэга img.

<img src="http://lorempixum.com/800/400/transport/2" alt="airplane">
Теперь мы укажем его в нашем CSS и добавим box-shadow. Вам, наверное, покажется, что здесь сработает нечто вроде этого: img {
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}
К сожалению, это приведет нас к следующему результату. Изображение будет работать, но тень будет невидимой! Внутренние тени в CSS: изображения, тексты и прочее
Так как же нам применить внутреннюю тень к изображению? Существует несколько способов реализации, и все они имеют свои преимущества и недостатки. Давайте рассмотрим два самых популярных подхода.

Первое решение заключается в том, чтобы обернуть изображение в div, который будет иметь такой же размер, как и изображение, а затем выставить тень этому самому div-элементу, также применив относительное позиционирование и z-index к изображению. Наш код будет выглядеть следующим образом:

<div>
<img src="http://lorempixum.com/800/400/transport/2" alt="airplane">
</div> div {
height: 200px;
width: 400px;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
}
img {
height: 200px;
width: 400px;
position: relative;
z-index: -2;
}
Внутренние тени в CSS: изображения, тексты и прочее
Этот подход работает, но требует дополнительного кода, и довольно много дополнительного CSS. В качестве альтернативы вы можете использовать HTML-изображение и вставить фоновое изображение при помощи CSS. Используя данный подход можно сделать так, что изображение не будет накрывать тень, и будет размещено под ним по умолчанию. <div>
<!-- just an empty div -->
</div> div {
height: 200px;
width: 400px;
background: url(http://lorempixum.com/400/200/transport/2);
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
}
Внутренние тени в CSS: изображения, тексты и прочее
Если мы комбинируем эти техники с довольно сильным распространением, то сможем достичь довольно сильного виньетирования изображения только при помощи CSS. Внутренние тени в CSS: изображения, тексты и прочее
Врезанная тень текста

Даже несмотря на всю сложность реализации врезанных теней блоков, их достаточно просто понять. Внесите слово inset, и ваша тень станет внутренней. Все просто.

К сожалению, с тенями текста все обстоит гораздо сложнее. Значение inset несовместимо с тенью текста, поэтому здесь ничего работать не будет:

Внутренние тени в CSS: изображения, тексты и прочее
Вместо этого нам нужно их немного комбинировать. Реализация происходит необычно, поэтому мы разделим работу на два этапа, чтобы лучше понимать, что здесь происходит. Для начала нам нужно вписать заголовок h1 и применить следующие стили: h1 {
background-color: #565656;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
}
И вот, мы уже попали в странную ситуацию. Мы выставили темный цвет фона, белую тень текста и прозрачный цвет заливки. Если вам это кажется странным, посмотрите на результат: Внутренние тени в CSS: изображения, тексты и прочее
Это совсем не то, что нам было нужно. Интересно то, что мы вернулись в самое начало. Секретный ингредиент, который заставит все работать, заключается в параметре background-clip с выставленным значением text. h1 {
background-color: #565656;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
Выставив параметр background-clip на text мы можем эффективно выразить все то, что происходит на фоне (изображения, градации, цвета и так далее), по контуру текста. Когда мы это делаем посредством кода, которые уже создали, результат получается следующим: Внутренние тени в CSS: изображения, тексты и прочее
Как видно, у нас получился довольно милый эффект. Размытые края были вырезаны и теперь создают ощущение врезанной тени. Тем временем, text-shadow дает нам возможность выставить уровень осветления фона, а также создает небольшой эффект выпуклости снаружи текста. Если мы сменим значение тени с 0.5 на 0.3, то текст станет темнее. Внутренние тени в CSS: изображения, тексты и прочее
Браузерная поддержка

Если вы хотите использовать подходы с разными странными параметрами вроде background-clip, то вам следует знать, где это сработает, а где нет. Как обычно, когда дело доходит до браузерной поддержки, мы обращаемся за помощью к CanIUse.

Внутренние тени в CSS: изображения, тексты и прочее
Исходя из данной таблицы, параметр background-clip вполне хорошо работает в большинстве браузеров. Даже IE9 поддерживает его! У вас вероятно могут возникнуть проблемы с некоторыми устаревшими браузерами.

Заключение

Теперь вы знаете, что вам следовало бы знать касательно врезанных теней в CSS. Это очень интересная область, которую следует изучить. Все подходы вряд ли интуитивно будут понятными, и потребуется некоторое время на то, чтобы овладеть ими. Расскажите, что вы думаете по поводу предложенных решений, и какое из них используете вы?

Как сделать тень на картинку css 88 Как сделать тень на картинку css Как сделать тень на картинку css 167 Как сделать тень на картинку css 151 Как сделать тень на картинку css 168 Как сделать тень на картинку css 89 Как сделать тень на картинку css 120 Как сделать тень на картинку css 179 Как сделать тень на картинку css 14 Как сделать тень на картинку css 198 Как сделать тень на картинку css 157 Как сделать тень на картинку css 160 Как сделать тень на картинку css 95 Как сделать тень на картинку css 100 Как сделать тень на картинку css 102 Как сделать тень на картинку css 36