Тень с одной стороны css. Внутренние тени в CSS
Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство 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 — смещение тени в пикселях.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius , то тень также получится с закругленными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.
Синтаксис
box-shadow: none | <тень> [,<тень>]*
где <тень>:
inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>
Значения
none Отменяет добавление тени. inset Тень выводится внутри элемента. Необязательный параметр. сдвиг по x Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное - влево. Обязательный параметр. сдвиг по y Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр. размытие Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой. растяжение Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент. цвет Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке - в самом низу.
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 может вас немного запутать, но если вы разберетесь во всем, то все покажется простым.
Здесь все значения в целом работают одним и тем же образом, только тень размещается внутри блока. На этом изображении мы можем видеть, насколько сильно радиус распространения тени может повлиять на то, как выглядит тень:
Заметьте, что на этот раз мы воспользовались цветом RGBa вместо значения HEX. Это отлично подходит для теней, так как значение прозрачности позволяет быстро и просто затемнить или осветлить тень.
Изображения
Довольно просто применить box-shadow к пустому div-элементу, но что если вы хотите сделать тень от изображения? Звучит просто, но на самом деле здесь все довольно сложно. Давайте рассмотрим код и ознакомимся с результатом, к которому он приведет. Начнем с простого старого тэга img.
Теперь мы укажем его в нашем CSS и добавим box-shadow. Вам, наверное, покажется, что здесь сработает нечто вроде этого:
Img {
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}
К сожалению, это приведет нас к следующему результату. Изображение будет работать, но тень будет невидимой!
Так как же нам применить внутреннюю тень к изображению? Существует несколько способов реализации, и все они имеют свои преимущества и недостатки. Давайте рассмотрим два самых популярных подхода.
Первое решение заключается в том, чтобы обернуть изображение в div, который будет иметь такой же размер, как и изображение, а затем выставить тень этому самому div-элементу, также применив относительное позиционирование и z-index к изображению. Наш код будет выглядеть следующим образом:
div {
height: 200px;
width: 400px;
}
img {
height: 200px;
width: 400px;
position: relative;
z-index: -2;
}
Этот подход работает, но требует дополнительного кода, и довольно много дополнительного CSS. В качестве альтернативы вы можете использовать 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);
}
Если мы комбинируем эти техники с довольно сильным распространением, то сможем достичь довольно сильного виньетирования изображения только при помощи CSS.
Врезанная тень текста
Даже несмотря на всю сложность реализации врезанных теней блоков, их достаточно просто понять. Внесите слово inset, и ваша тень станет внутренней. Все просто.
К сожалению, с тенями текста все обстоит гораздо сложнее. Значение inset несовместимо с тенью текста, поэтому здесь ничего работать не будет:
Вместо этого нам нужно их немного комбинировать. Реализация происходит необычно, поэтому мы разделим работу на два этапа, чтобы лучше понимать, что здесь происходит. Для начала нам нужно вписать заголовок h1 и применить следующие стили:
H1 {
background-color: #565656;
color: transparent;
}
И вот, мы уже попали в странную ситуацию. Мы выставили темный цвет фона, белую тень текста и прозрачный цвет заливки. Если вам это кажется странным, посмотрите на результат:
Это совсем не то, что нам было нужно. Интересно то, что мы вернулись в самое начало. Секретный ингредиент, который заставит все работать, заключается в параметре background-clip с выставленным значением text.
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 мы можем эффективно выразить все то, что происходит на фоне (изображения, градации, цвета и так далее), по контуру текста. Когда мы это делаем посредством кода, которые уже создали, результат получается следующим:
Как видно, у нас получился довольно милый эффект. Размытые края были вырезаны и теперь создают ощущение врезанной тени. Тем временем, text-shadow дает нам возможность выставить уровень осветления фона, а также создает небольшой эффект выпуклости снаружи текста. Если мы сменим значение тени с 0.5 на 0.3, то текст станет темнее.
Браузерная поддержка
Если вы хотите использовать подходы с разными странными параметрами вроде background-clip, то вам следует знать, где это сработает, а где нет. Как обычно, когда дело доходит до браузерной поддержки, мы обращаемся за помощью к .
Исходя из данной таблицы, параметр background-clip вполне хорошо работает в большинстве браузеров. Даже IE9 поддерживает его! У вас вероятно могут возникнуть проблемы с некоторыми устаревшими браузерами.
Заключение
Теперь вы знаете, что вам следовало бы знать касательно врезанных теней в 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 { 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; }
Получилось почти то, что надо. Теперь просто немного затемняем текст (альфа), и итог:
То же, что и обновление 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; }
ОБНОВЛЕНИЕ 3
#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; }
ОБНОВЛЕНИЕ 2
По-видимому, вы можете сделать это только с дополнительным параметром 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;
Это было бы лучшим решением. Дополнительный параметр, который добавляется, описывается как:
Четвертая длина - это спрэд расстояние. Положительные значения вызывают теневая форма для расширения направления по указанному радиусу. Отрицательные значения вызывают форму тени договориться.
UPDATE
То, что я сделал, это создать "теневой элемент", который будет скрываться за фактическим элементом, который вы хотели бы иметь в тени. Я сделал ширину "теневого элемента" ровно менее широкой, чем фактический элемент, в 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 , а второе - произвольное смещение, которое вы хотели бы сделать следующим образом.
