Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.
Horizontal offset и vertical offset - горизонтальное и вертикальное смещение соответственно. Эти значения указывают, в какую сторону объект будет отбрасывать тень:
Blur radius и spread radius немного сложнее. В чем их разница? Взглянем на пример с двумя элементами, где значения blur radius отличаются:
Край тени просто размывается. При различном значении spread radius видим следующее:
В этом случае видим, что тень рассеивается на большую площадь. Если не указывать значения blur radius и spread radius , то они будут равны 0.
Значения аналогичные, только нет spread-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); }
Вот, что может получится при использовании внутренних теней:
Для решения, сначала применим к заголовку 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; }
Получилось почти то, что надо. Теперь просто немного затемняем текст (альфа), и итог:
Тени в 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. Это очень интересная область, которую следует изучить. Все подходы вряд ли интуитивно будут понятными, и потребуется некоторое время на то, чтобы овладеть ими. Расскажите, что вы думаете по поводу предложенных решений, и какое из них используете вы?
То же, что и обновление 3, но с современными правилами css (= less), чтобы не требовалось специального позиционирования на псевдоэлементе.
#box { background-color: #3D6AA2; width: 160px; height: 90px; position: absolute; top: calc(10% - 10px); left: calc(50% - 80px); } .box-shadow:after { content:""; position:absolute; width:100%; bottom:1px; z-index:-1; transform:scale(.9); box-shadow: 0px 0px 8px 2px #000000; }
#box { background-color: #3D6AA2; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: 50%; left: 50%; } .box-shadow:after { content: ""; width: 150px; height: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000; }
По-видимому, вы можете сделать это только с дополнительным параметром CSS-тэга box, поскольку все остальные просто указали. Здесь демо:
Webkit-box-shadow: 0 4px 4px -2px #000000; -moz-box-shadow: 0 4px 4px -2px #000000; box-shadow: 0 4px 4px -2px #000000;
Это было бы лучшим решением. Дополнительный параметр, который добавляется, описывается как:
Четвертая длина - это спрэд расстояние. Положительные значения вызывают теневая форма для расширения направления по указанному радиусу. Отрицательные значения вызывают форму тени договориться.
То, что я сделал, это создать "теневой элемент", который будет скрываться за фактическим элементом, который вы хотели бы иметь в тени. Я сделал ширину "теневого элемента" ровно менее широкой, чем фактический элемент, в 2 раза превышающей указанную тень; затем я выровнял его правильно.
#wrapper { width: 84px; position: relative; } #element { background-color: #3D668F; height: 54px; width: 100%; position: relative; z-index: 10; } #shadow { background-color: #3D668F; height: 8px; width: 80px; margin-left: -40px; position: absolute; bottom: 0px; left: 50%; z-index: 5; -webkit-box-shadow: 0px 2px 4px #000000; -moz-box-shadow: 0px 2px 4px #000000; box-shadow: 0px 2px 4px #000000; }
Да, вы можете сделать это с тем же синтаксисом, который вы предоставили. Первое значение контролирует горизонтальное позиционирование, а второе значение контролирует вертикальное позиционирование. Поэтому просто установите первое значение 0px , а второе - произвольное смещение, которое вы хотели бы сделать следующим образом.
Свойство box-shadow добавляет элементу одну или более теней. Тень представляет собой копию элемента, смещенную на указанное расстояние. Тени бывают внешние или внутренние, размытые или плоские, они могут следовать контурам блоков со скругленными углами. С помощью ключевого слова inset создаются тени внутри элемента, делая элемент визуально объёмным или вдавленным.
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-
Каждая тень принимает от одного до пяти параметров: горизонтальное смещение, вертикальное смещение, радиус размытия (необязательное значение), радиус распространения (необязательное значение) и цвет тени. Тени не влияют на компоновку и могут перекрывать соседние элементы или их тени. Свойство не наследуется.
Значения: | |
x-offset | Обязательное значение. Смещение тени по горизонтали относительно блока. Может принимать как положительные, так и отрицательные значения, положительное смещает тень вправо от блока, отрицательное – влево. |
y-offset | Обязательное значение. Смещение тени по вертикали относительно блока. Может принимать как положительные, так и отрицательные значения, положительное смещает тень вниз, отрицательное — вверх. |
blur | Необязательное значение. Определяет радиус размытия тени. Чем больше радиус, тем сильнее размыта тень. Можно использовать только положительные значения. |
растяжение | Необязательное значение, расширяет тень, утолщая ее сплошную часть между размытыми краями. Принимает как положительные, так и отрицательные значения, задаётся в единицах длины — px и т.д. |
цвет | Необязательное значение. По умолчанию тень черного цвета. Для установления значения можно использовать следующие форматы записи цвета: #RRGGBB , rgb(red, green, blue) , rgba(red, green, blue, alpha) . Для Safari цвет тени указывать обязательно. |
inset | Создаёт тень внутри блока. |
none | Значение по умолчанию, означает отсутствие тени. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
.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); }
flat
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; margin: 20px; color: white; background: #55acee; box-shadow: 0 5px 0 #3C93D5; } .example-shadow-2 a:hover { background: #6FC6FF; }Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius , то тень также получится с закруглёнными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.
Box-shadow: none | <тень> [,<тень>]*
где <тень>:
inset <сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
Группирует значения. | [ crop || cross ] | |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
none Отменяет добавление тени. inset Тень выводится внутри элемента. <сдвиг по x> Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задаёт сдвиг тени вправо, отрицательное - влево. <сдвиг по y> Смещение тени по вертикали относительно элемента. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх. <размытие> Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет чёткой, а не размытой. <растяжение> Положительное значение растягивает тень, отрицательное, наоборот, её сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент. <цвет> Цвет тени в любом доступном CSS формате, по умолчанию тень чёрная.
Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке - в самом низу.
Результат примера показан на рис. 1.
Рис. 1. Вид тени
Объект .style.boxShadow
Safari до версии 5.1, Chrome до версии 10.0, Android до версии 4.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 — смещение тени в пикселях.
Каждая спецификация проходит несколько стадий одобрения.