Автор

22 03.2013
Внутренние тени в CSS

Внутренние тени в CSS


 

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.

Синтаксис

Прежде всего рассмотрим два основных способа реализации теней в CSS.

box-shadow

Конструкция box-shadow содержит несколько различных значений:

 

 

Horizontal offset и vertical offset — горизонтальное и вертикальное смещение соответственно. Эти значения указывают, в какую сторону объект будет отбрасывать тень:

 

 

Blur radius и spread radius немного сложнее. В чем их разница? Взглянем на пример с двумя элементами, где значения blur radius отличаются:

 

 

Край тени просто размывается. При различном значении spread radius видим следующее:

 

 

В этом случае видим, что тень рассеивается на большую площадь. Если не указывать значения blur radius и spread radius, то они будут равны 0.

text-shadow


Синтаксис очень похож на box-shadow:

 

Значения аналогичные, только нет spread-shadow. Пример использования:

 

 

Inset в box-shadow


Чтобы «перевернуть» тень внутрь объекта, необходимо добавить inset в CSS:

 

 

Разобравшись с основным синтаксисом box-shadow, понять принципы реализации внутренних теней очень легко. Значения все те же, можно добавить цвет (RGB в hex):

 

 

Цвет в формате RGB, альфа-значение отвечает за прозрачность тени:

 

 

Изображения с тенями


Добавить внутреннюю тень к изображению немного сложнее, чем к обычному div. Для начала вот обычный код картинки:

<img src="http://lorempixum.com/800/400/transport/2" alt="airplane">

Логично предположить, что добавить тень можно так:

img { 
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}

Но тень не видно:

 

 

Существует несколько способов решить эту проблему, каждый из которых имеет свои плюсы и минусы. Рассмотрим два из них. Первый — это обернуть картинку в обычный div:

<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;
}

 

 

Все работает, но приходится добавлять немного лишней разметки HTML и CSS. Второй способ — это установить изображение фоном нужного блока:

<div>
  <!-- пустой 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);
}

 

 

Вот, что может получится при использовании внутренних теней:

 

 

Inset в text-shadow


Для реализации внутренней тени текста простое добавление в код inset не работает:

 

 

Для решения, сначала применим к заголовку h1 установим темный фон и светлую тень:

h1 {
  background-color: #565656;
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
}

Вот, что получается:

 

 

Добавляем секретный ингредиент background-clip, который обрезает все, что выходит за пределы текста (на темный фон):

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;
}

 

 

Получилось почти то, что надо. Теперь просто немного затемняем текст (альфа), и итог:

 

 

Поддержка всеми браузерами


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

19 04.2013
Внутренние тени в CSS

Ресурсов для создания сайта с каждым днем становится все больше, различные эффекты, переходы и приемы позволяют поразить взор посетителя и заинтриговать методом привлечения информации. На мультимедийных сайтах, и не только, стали весьма популярны так называемые слайдеры контента, которые содержат в себе изображения, музыку и видео, это весьма удобно, ведь позволяет освободить множество места и тем самым преподнести необходимую информацию посетителю. Но слайдеров стало слишком много, и они, по функциональности, весьма схожи.


11 05.2017
Внутренние тени в CSS

Это модальное окно позволяет пользователям входить / регистрироваться на вашем сайте. После открытия пользователь может легко переключиться с одной формы на другую или выбрать опцию сброса пароля.


26 04.2013
Внутренние тени в CSS

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


13 06.2014
Внутренние тени в CSS

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close