—»     —»   Внутренние тени в CSS: изображения, тексты и прочее
  Раздел: CSS/Style Sheets   Комментариев: 7  

Внутренние тени в CSS: изображения, тексты и прочее



Тени в 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. Это очень интересная область, которую следует изучить. Все подходы вряд ли интуитивно будут понятными, и потребуется некоторое время на то, чтобы овладеть ими. Расскажите, что вы думаете по поводу предложенных решений, и какое из них используете вы?
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 23499   |   Оставлено комментариев: 7
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 5 октября 2012 @ 15:47
Написал: Rewis — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Забыли упомянуть про чередование через запятую.
Например:
box-shadow: inset 0px 0px 10px rgba(0,0,0,.9), 0px 0px 10px rgba(0,0,0,.9);
Комментарий #2: 5 октября 2012 @ 17:41
Написал: mixermf — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Отлично! Была задача, добавить внутреннюю тень для текста, теперь знаю как)
Комментарий #3: 7 октября 2012 @ 13:28
Написал: Игорь — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
CMS WordPress
Theme Twenty Eleven (Default)

Перевставлял данную строку
box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.6);

во все блоки (селекторы) связанные с img {}

никаких результатов((

Кто знаком, подскажите пожалуйста!
Сайт яигорь точка ру
Комментарий #4: 7 октября 2012 @ 21:12
Написал: Rewis — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Игорь, необходимо не к изображению применять правило, а к блоку, в котором находится изображение и отодвигать изображение на задний план. Пример есть в этой статье, ищи следующее
Первое решение заключается в том, чтобы обернуть изображение в div, который будет иметь такой же размер, как и изображение, а затем выставить тень этому самому div-элементу, также применив относительное позиционирование и z-index к изображению.
Комментарий #5: 8 октября 2012 @ 11:32
Написал: Игорь — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
спасибо за ответ!
но к сожалению у WordPress там все на PHP... а это уже не для любителя)
Комментарий #6: 4 октября 2014 @ 15:42
Написал: Алексей — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
внутренняя тень текста не работает, нет такого параметра в природе, не пиздите людям, не вводите в заблуждение!
Комментарий #7: 24 сентября 2015 @ 16:51
Написал: warr — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Прикольные тени
спасибо!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31