Внутренние тени в CSS. Внутренние тени в CSS Красивая тень css

13.12.2023

То же, что и обновление 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 , а второе - произвольное смещение, которое вы хотели бы сделать следующим образом.

Обычные тени легко реализовать с помощью 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; }

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

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

Основы использования теней

Свойство text-shadow очень просто использовать. Оно поддерживается всеми современными браузерами и даже без использования префиксов. Но поддержка в IE (даже в IE9) отсутствует. Можно использовать инструменты, например, Modernizr , которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.

Синтаксис

Для создания тени текста используется синтаксис свойства text-shadow , который приводится ниже. Нужно определить четыре параметра: первые два задают положение тени, третий устанавливает уровень размытия, а четвертый определяет цвет тени.

Text-shadow: смещение_по_горизонтали смещение_по_ вертикали размытие цвет;

Ниже приводится пример тени текста, которая смещена на два пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и имеет черный цвет с уровнем непрозрачности 30%.

Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

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

Почему используется rgba?

Вам не обязательно использовать rgba для задания цвета тени при определении свойства. Однако, rgba добавляет еще одну размерность при определении тени - уровень прозрачности.

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

С помощью свойства text-shadow можно создавать различные эффекты для текста, не ограничиваясь простыми падающими тенями. Например, здесь приводится код для формирования иллюзии вдавленного текста.

Сначала нужно установить цвет текста немного темнее, чем цвет фона. А затем надо использовать свойство text-shadow с белым цветом и увеличенной прозрачностью.

Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%. Белая тень позиционируется немного вниз и вправо с уровнем непрозрачности 10%.

Body { background: #222; } #text h1 { color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); }

Совсем необязательно размывать тень. Четкая тень может отлично сочетаться с дизайном сайта.

Text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

Настоящее веселье начинается, когда вы отринете прочь ограничение наличия только одной тени. Используя запятую для разделения определений вы можете использовать столько теней, сколько нужно!

Text-shadow: shadow1, shadow2, shadow3;

Вот пример использования двух теней. Первая имеет тот же цвет, что и фон.

Text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Смещение вниз на большое расстояние

Как только вы освоите использование нескольких теней, результат будет все более и более выразительным. Очень просто создать 3D эффект для текста.

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

Text-shadow: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1);

Смещение вниз на небольшое расстояние и сильное размытие

Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.

Text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

3D текст от Mark Dotto

Эффект используется на сайте MarkDotto.com . В нем используется 12 различных теней для создания отличного эффекта 3D.

Text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Вдавленный текст от Gordon Hall

Notice in the example above I called my technique the “quick and dirty” letterpress effect. That’s because there’s a much more involved way to create some seriously inset text that’s much more believable.

Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well. Check out his blog post for a full explanation of the technique.

Background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

Свечение

Text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

Text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Множественные источники света

Text-shadow: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

Color: rgba(0,0,0,0.6); text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

Заключение

Как и большинство эффектов CSS, тени очень легко реализовать. Но сочетание простых действий могут в результате привести к поразительным эффектам.

Здравствуйте, дорогие читатели . Сегодня мы с Вами будем делать красивую тень для блоков при помощи 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); }

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

просмотров

Сохранить ВКонтакте

ОБНОВЛЕНИЕ 3

ОБНОВЛЕНИЕ 2

UPDATE

Оригинальный ответ

Синтаксис

box-shadow

text-shadow

Inset в box-shadow

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

Inset в text-shadow

Основы использования теней

Синтаксис

Почему используется rgba?

Смещение вниз на большое расстояние

Смещение вниз на небольшое расстояние и сильное размытие

3D текст от Mark Dotto

Вдавленный текст от Gordon Hall

Свечение

Множественные источники света

Заключение

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

Эффект тени 1

HTML

Эффект 1

CSS

Эффект тени 2

HTML

Эффект 2

CSS

Эффект тени 3

HTML

Эффект 3

CSS

Эффект тени 4

HTML

Эффект 4

CSS

Эффект тени 5

HTML

Эффект 5

CSS

Эффект тени 6

HTML

Эффект 6

CSS

Эффект тени 7

HTML

Эффект 7

CSS

Эффект тени 8

HTML

Эффект 8

CSS

Вам также может понравиться