Описание

Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius , то тень также получится с закругленными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

Синтаксис

box-shadow: none | <тень> [,<тень>]*
где <тень>:
inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Значения

Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке - в самом низу.

HTML5 CSS3 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 1. Вид тени в браузере Safari

Браузеры

Safari до версии 5.1, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 поддерживают свойство -webkit-box-shadow .

Firefox до версии 4.0 поддерживает свойство -moz-box-shadow .

Internet Explorer до версии 9.0 не поддерживает свойство box-shadow , взамен можно использовать нестандартное свойство filter :

Filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

Здесь: offX — смещение тени по горизонтали; offY — смещение тени по вертикали; color — цвет тени.

Применение фильтра dropshadow дает четкую резкую тень, поэтому для эффекта размытия можно использовать фильтр shadow .

Filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);

Здесь: direction — угол направления тени от 0 до 360°; color — цвет тени; strength — смещение тени в пикселах.

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

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

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

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

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

box-shadow

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

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

text-shadow

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

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

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

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

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

Img {
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}
К сожалению, это приведет нас к следующему результату. Изображение будет работать, но тень будет невидимой!

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

img {
height: 200px;
width: 400px;
position: relative;
z-index: -2;
}

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

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

H1 {
background-color: #565656;
color: transparent;
}
И вот, мы уже попали в странную ситуацию. Мы выставили темный цвет фона, белую тень текста и прозрачный цвет заливки. Если вам это кажется странным, посмотрите на результат:

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 мы можем эффективно выразить все то, что происходит на фоне (изображения, градации, цвета и так далее), по контуру текста. Когда мы это делаем посредством кода, которые уже создали, результат получается следующим:

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

Заключение

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

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

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

CSS синтаксис:

JavaScript синтаксис:

Object.style.boxShadow = "10px 5px 5px red"

Значения свойства

Версия CSS

Наследуется

Анимируемое

Пример использования

С появлением стандарта CSS 3 введено свойство box-shadow , которое получило широкое применение среди веб-разработчиков, так как оно позволяет с легкостью добавить одну или несколько теней к блоку элемента для придания желаемого визуального эффекта.

В предыдущий статье мы с Вами рассматривали свойство border-radius , используя его, вы можете получить тень с закругленными углами. По аналогии с текстовой тенью (text-shadow), вы сможете создавать множественные тени, они наносятся по z-оси спереди назад (с первой заданной тенью сверху).

Давайте детально рассмотрим синтаксис этого современного свойства:

Рассмотрим по порядку возможные значения этого свойства:

Основные моменты, которые вам необходимо понять, чтобы создавать тени для элементов:

Хочу обратить Ваше внимание на то, что свойство box-shadow в настоящее время поддерживается всеми современными браузерами:

Если Вы хотите расширить поддержку некоторых браузеров, включая мобильныx IOS 3.2 - 4.3 и Android 2.1 - 3 , то рекомендуется использовать префиксы производителей и использовать следующий синтаксис (в примерах статьи будет использован синтаксис только для современных браузеров):

Перейдем к практике и начнем с простого примера, в котором добавим по одной тени к элементам:

Реэультат нашего примера:

Использование множественных теней

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

• Два блока фиксированной ширины и высоты (15em и 10em ), добавили внешние отступы для всех сторон (2em ) и установили, что блоки являются блочно-строчными для возможности выстроить их в линейку.
• Для первого блока с классом .test мы указали четыре тени с различными значениями горизонтальной и вертикальной тени для того, чтобы различные тени элемента были со всех сторон. Радиус размытия для всех теней установили один. Цвет каждой тени различен и задан с использованием предопределенных цветов .
• Для второго блока с классом .test2 мы указали четыре тени с различными значениями горизонтальной и вертикальной тени. Радиус размытия для всех теней установили один, при этом растяжение тени указали отрицательным, что привело к уменьшению самой тени. Цвет каждой тени различен и указан с использованием системы RGBA.

Реэультат нашего примера:

Использование теней для изображений

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

Работу с фоновыми изображениями мы подробно рассмотрим в статье учебника " ", а сейчас, чтобы поставить точку в изучении использования теней, поверхностно её затронем, и используем изображение в качестве фона к элементу в следующем примере:

• Два блока фиксированной ширины и высоты (237px и 232px ), добавили внешние отступы для всех сторон (2em ) и установили, что блоки являются блочно-строчными для возможности выстроить их в линейку. Размер блока 237px на 232px мы установили под размер изображения, чтобы на данном этапе обучения не приходилось масштабировать изображение под элемент и затрагивать те свойства CSS, которые планируются к изучению на более позднем этапе (в статье учебника " ").
• Для первого блока с классом .test мы указали нулевое значение горизонтальной и вертикальной тени, но при этом радиус размытия мы указали 50px и расширили ее, задав радиус растяжения 10px . Цвет тени указали предопределенным цветом (violet ). Кроме того мы указали в объявлении ключевое слово inset , благодаря чему тень падает внутрь элемента. Другими словами мы создали внутреннюю тень элемента.
• Для второго блока с классом .test2 мы указали нулевое значение горизонтальной и вертикальной тени, но при этом радиус размытия мы указали 50px и расширили ее, задав радиус растяжения 10px . Цвет тени указан в режиме RGBA.

Реэультат нашего примера:

Рис. 98 Пример использования теней для изображений в CSS (свойство box-shadow)

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

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

2016-2019 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу сайт@gmail.com

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

Синтаксис

box-shadow

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

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

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

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

text-shadow

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

Inset в box-shadow

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

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

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

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

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

Для решения, сначала применим к заголовку 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; }

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