Box shadow с одной стороны. Внутренние тени в CSS. D текст от Mark Dotto

Свойство box-shadow добавляет элементу одну или более теней. Тень представляет собой копию элемента, смещенную на указанное расстояние. Тени бывают внешние или внутренние, размытые или плоские, они могут следовать контурам блоков со скругленными углами. С помощью ключевого слова inset создаются тени внутри элемента, делая элемент визуально объёмным или вдавленным.

Как сделать тень блока с помощью свойства box-shadow

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

IE: 9.0
Edge: 12.0
Firefox: 4.0, 3.5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 11.5
iOS Safari: 5.1, 3.1 -webkit-
Android Browser: 4.0, 2.1 -webkit-

1. Синтаксис свойства box-shadow

Свойство box-shadow прикрепляет одну или несколько теней к блоку. Свойство принимает либо значение none , которое указывает на отсутствие теней, либо список теней через запятую, упорядоченный от начала к концу.

Каждая тень является отдельной тенью, представленной от 2 до 4-х значений длины, необязательным цветом и необязательным ключевым словом inset . Допустимые длины 0 ; опущенные цвета по умолчанию равны значению свойства color .

Свойство не наследуется.

Рис. 1. Синтаксис свойства box-shadow


Значения:
x-offset	Задает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от текста, отрицательная длина - влево.
y-offset	Задает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное - вверх.
blur	Задает радиус размытия. Отрицательные значения не допускаются. Если значение размытия равно нулю, то край тени четкий. В противном случае, чем больше значение, тем больше размыт край тени.
растяжение	Задает расстояние, на которое тень увеличивается. Положительные значения заставляют тень расширяться во всех направлениях на указанный радиус. Отрицательные значения заставляют тень сжиматься. Для внутренних теней расширение тени означает сжатие формы периметра тени.
цвет	Задает тени. Если цвет отсутствует, используемый цвет берется из свойства color. Для Safari цвет тени указывать обязательно.
inset	Изменяет отбрасываемую тень блока с внешней тени на внутреннюю.
none	Значение по умолчанию, означает отсутствие тени.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Эффекты тени применяются следующим образом: первая тень находится сверху, а остальные — сзади. Тени не влияют на компоновку и могут перекрывать другие элементы или их тени. С точки зрения контекстов укладки и порядка рисования внешние тени элемента рисуются непосредственно под фоном этого элемента, а внутренние тени элемента рисуются непосредственно над фоном этого элемента (ниже border и border-image , если таковые имеются).

Если элемент имеет несколько ящиков, все они получают тени, но тени рисуются только там, где также будут нарисованы границы; см. box-decoration-break.

Тени не вызывают прокрутку или не увеличивают размер прокручиваемой области.

2. Примеры тени для блока

2.1. Внутренняя тень

.example-shadow-1 { background: #e6e3df; text-align: center; } .example-shadow-1 span { margin: 50px; height: 100px; width: 200px; display: inline-block; box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1); }

2.2. Плоская тень с одной стороны

flat

.example-shadow-2 { background: beige; text-align: center; } .example-shadow-2 a { display: inline-block; border-radius: 5px; padding: 15px 35px; font-size: 22px; text-decoration: none; margin: 20px; color: white; background: #55acee; box-shadow: 0 5px 0 #3C93D5; transition: .3s; } .example-shadow-2 a:hover { background: #6FC6FF; }

2.3. Тень в стиле «материальный дизайн»

.example-shadow-3 { background: #e8e8e8; text-align: center; } .example-shadow-3 span { background: white; display: inline-block; width: 200px; height: 100px; margin: 50px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); }

Вы можете добавлять к элементам тень и изменять ее внешний вид с помощью CSS-свойства box-shadow. Этот стиль позволяет воплотить в жизнь интересные эффекты, например, объемность и трехмерность блока. Свойство поддерживается всеми современными браузерами. Исключение составляют IE8 и Opera Mini.

Свойство box-shadow: синтаксис

Данный стиль записывается следующим образом:

Box-shadow: inset 4px 4px 8px 5px #333333;

Рассмотрим по порядку, за что отвечает каждый параметр (слева направо):

Ключевое слово inset: параметр, который необязательно указывать; рисует тень внутри элемента.
Сдвиг по оси X : указывает степень смещения тени по горизонтали относительно элемента. Положительное значение означает сдвиг вправо, отрицательное - влево. Значение 0 означает, что тень без сдвига.
Сдвиг по оси Y : указывает степень смещения тени по вертикали. Положительное значение означает сдвиг вниз, отрицательное - вверх. Значение 0 - это тень без сдвига.
Радиус размытия : это степень размытия тени. Чем больше значение, тем более размыта тень. Если параметр не указан, используется значение по умолчанию - 0 . В таком случае тень будет идеально четкой.
Расширение : необязательный параметр, отвечающий за растяжение тени по обеим осям; чем больше значение, тем больше растяжение. Расширение работает только при наличии предыдущего параметра. Значение по умолчанию - 0 .
Цвет тени : с этим параметром всё понятно - он задает цвет тени элемента. Цвет по умолчанию - черный.

Примечание. Браузерам Android и более старым версиям iPhone Safari требуется префикс -webkit- для корректной работы CSS свойства box-shadow.

Данное свойство может принимать несколько групп значений (делать несколько теней одновременно). Для этого понадобится перечислить эти группы параметров через запятую. Например:

Box-shadow: 15px 15px 20px #8b0163, inset 15px 15px 20px #630046;

Примеры box-shadow

Чтобы вы лучше поняли всю силу и прелесть свойства CSS box-shadow, мы покажем несколько примеров, которые можно смело применять на практике. Данное свойство способно сильно преобразить обычный блок!

Легкая тень

Box-shadow: 0 2px 4px rgba(0, 0, 0, .25);

Эффект бумаги

Box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, .6), inset 0 0 40px rgba(0, 0, 0, .1);

Несколько слоев

Box-shadow: 6px 6px #ccc, 12px 12px #a3a3a3;

Тройная рамка

Box-shadow: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0.6), 0 0 0 21px rgba(118, 46, 177, 0.4);

Уголки

Box-shadow: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

Как видите, свойство box-shadow предоставляет огромное поле для фантазии. Вы можете преображать блоки как угодно - главное, иметь чувство меры! 😉

В следующей главе вас ждет изучение свойств width и height , определяющих размеры элементов.

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

Синтаксис CSS box-shadow

... box-shadow : X Y R1 R2 color ; ...

X - смещение по оси Х (горизонтали)
Y - смещение по оси У (вертикали)
R1 - размытие (чем больше значение, тем плавне переход)
R2 - радиус растяжения (если положительный, то растягивает, отрицательный - сжимает)
color - цвет (можно задавать в любом формате: #RGB, название цвета)
inset - при наличии этого значения тень будет располагаться внутри блока (элемента)

Пример 1. HTML рамка с тенью box-shadow без смещения

Ниже представлен самый простой вариант использования тени свойством CSS box-shadow на странице html, когда она равномерно обтекает всю рамку без смещений.

Пример №1. Рамка с тенью

Пример №1. Рамка с тенью

Пример 2. HTML рамка со смещенной тенью box-shadow

Практически тот же пример, что и первый, но только со смещением рамки.

Пример №2. Рамка со смещенной тенью

На странице преобразуется в следующее

Пример №2. Рамка со смещенной тенью

Пример №3. Свечение рамки html

Реализация тени в виде свечения

Пример №3. Свечение

На странице преобразуется в следующее

Пример №3. Свечение

Пример 4. Внутреннее свечение границы html

Свечение, которое направлено внутрь блока и никак не выходит за его пределы. Эффект создается за счет атрибута inset .

Пример №4. Внутреннее свечение

На странице преобразуется в следующее

Пример №4. Внутреннее свечение

Пример 5. Совмещение теней в html

Эффект тени можно совмещать через запятую. В таком случае образуется очень интересные результаты. Например, можно сделать разноцветную рамку в стиле 3D.

Пример №5. Совмещение теней

На странице преобразуется в следующее

Пример №5. Совмещение теней

Примечание: старые браузеры

IE младше 9 версии не поддерживают box-shadow. Префиксы браузеров для box-shadow

-webkit-box-shadow - для Chrome до 10, Safari до 5.1, Android до 4 и iOS до 5
-moz-box-shadow - для Firefox до версии 4.0

Здравствуйте, дорогие читатели . Сегодня мы с Вами будем делать красивую тень для блоков при помощи CSS . Я думаю, что это очень сильно пригодится Вам, тем более если Вы делаете шаблоны. А блоки с тенью смотрятся очень привлекательно и современно.

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

В основном все современные браузеры поддерживают эффекты тени:

Internet Explorer 9.0 и выше;
Firefox 3.5 и выше;
Chrome 1 и выше;
Safari 3 и выше;
Opera 10.5 и выше.

Ещё хотелось бы упомянуть один не маловажный момент: для некоторых браузеров мы будем использовать некие префиксы. Для Firefox используется -moz- , для Chrome и Safari нужно использовать префикс -webkit.

Ну а сейчас переходим к самой интересной части. Давайте рассмотрим все тени по отдельности, эффектов будет 8.

Эффект тени 1

В данном примере тень от блока находится снизу.

HTML

Эффект 1

CSS

text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 1 * ===============================================*/ .effect1{ -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; }

Эффект тени 2

В этом примере тень от блока идёт слева и справа, а по середине её нет. Получается очень интересный эффект.

HTML

Эффект 2

CSS

.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 2 * ===============================================*/ .effect2 { position: relative; } .effect2:before, .effect2:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .effect2:after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; }

Эффект тени 3

Здесь тень от блока только слева.

HTML

Эффект 3

CSS

Эффект тени 4

Тень справа.

HTML

Эффект 4

CSS

Эффект тени 5

В данном случае тень с двух сторон сильнее сдвинулась вниз.

HTML

Эффект 5

CSS

.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 5 * ===============================================*/ .effect5 { position: relative; } .effect5:before, .effect5:after { z-index: -1; position: absolute; content: ""; bottom: 25px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -ms-transform: rotate(-8deg); transform: rotate(-8deg); } .effect5:after { -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg); right: 10px; left: auto; }

Эффект тени 6

Здесь эффект изогнутых теней на дне блока.

HTML

Эффект 6

CSS

.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 6 * ===============================================*/ .effect6 { position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect6:before, .effect6:after { content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } .effect6:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); }

Эффект тени 7

Такой же эффект только тень снизу и сверху блока.

HTML

Эффект 7

CSS

.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 7 * ===============================================*/ .effect7 { position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect7:before, .effect7:after { content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:0; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } .effect7:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); }

Эффект тени 8

Эффект изогнутых теней по бокам блока.

HTML

Эффект 8

CSS

.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 8 * ===============================================*/ .effect8 { position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect8:before, .effect8:after { content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:10px; bottom:10px; left:0; right:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } .effect8:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); }

Вот и всё дорогие друзья. Если Вам что либо будет не понятно, обязательно спрашивайте в комментариях. До скорой встречи.

Обычные тени легко реализовать с помощью 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 { box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); }

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

Существует несколько способов решить эту проблему, каждый из которых имеет свои плюсы и минусы. Рассмотрим два из них. Первый - это обернуть картинку в обычный 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 { 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; }

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