Автор

Внутренние тени в 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

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

Полноразмерный, адаптивный и простой в настройке слайдер.


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

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


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

Простой, отзывчивый слайдер с радиальным эффектом перехода на основе SVG clipPath и элементов маски.


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

В передыдущем уроке «Интересные кнопки поделиться в соцсетях на CSS3» я уже писал как можно сделать красивые кнопки для соцсетей. Продолжая эту тему хочу поделиться еще одним примером как можно оформить свой сайт! В данном примере используется только CSS и не каких скриптов!


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close