3 значение — или размытие. Данное значение вводить не обязательно, без его указания тени всё равно будут работать.

Заданное значение определяет радиус, по которому будет размываться тень. Отрицательные значения не указываются.

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

Предпоследнее значение, которое отвечает за растяжение тени. Оно также является необязательным, но может повысить красочность вашей тени.

Расширение происходит за счет растяжения центральной сплошной части тени, которая находится между размытыми краями.

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

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

Для изменения цвета подойдет любая цветовая система — , а также стандартные цвета.

Внимание! Если вы хотите чтобы свойство работало в Safari, то этот параметр должен быть указан, даже если вы используете стандартный черный цвет.

Внутренняя тень — CSS

Итак, давайте рассмотрим первый пример применения теней. Здесь мы будем рассматривать создание внутренней тени для блока body.

Для начала откройте наш HTML документ и заполните его. Можете не указывать никакие теги, не заполнять контент, главное создайте тег .

Открываем наш CSS документ, записываем тег , он будет нашим основным селектором.

Далее открываем фигурные скобки и записываем свойство . Задаем расположение, размытие, растяжение. Как задавать эти значения вы уже знаете. После этого задаем цвет тени, мы сделали белый, но вы можете задать по своему вкусу.

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

В итоге, у нас получился вот такой блок:

HTML/CSS — тень текста

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

1. Сдвиг по горизонтали.
2. Сдвиг по вертикали.
3. Радиус размытия. Необязательно.
4. Цвет.

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

Очень удобно накладывать тени друг на друга. Для этого нужно перечислить несколько групп параметров

Первая тень будет располагаться ближе к тексту, а вторая выше её. Напоминает работу со свойствами outline и border, но здесь можно создавать и 2, 3 и больше теней.

Тени при наведении — CSS

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

Для того, чтобы создать тень для кнопки, её для начала нужно разместить. Открываем тег a, записываем для него класс button и любое текстовое значение, для лучшего отображения.

Сначала зададим размещение, с помощью свойства margin и увеличим кнопку до определенных размеров. Для увеличения можно использовать свойства width и height, либо же воспользоваться свойством padding.

Теперь задаем цвет фона, текста и рамку. Наша кнопка готова, приступаем к созданию тени.

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

Сделаем самый простой эффект — увеличим тень. Можете сделать её размытой или изменить растяжение — по вкусу.

Для лучшего эффекта зададим свойство transition для обычной ссылки, поставим время в 0.5s.

Теперь у нас есть отличная кнопка с красивой тенью, которая при наведении будет плавно расширяться.

Заключение

В этой статье мы ознакомились со всеми основными способами создания теней. Мы разобрали все свойства и параметры теней.

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

Тень под блочным элементом на странице обычно применяется для создания эффекта трёхмерности, привлечения внимания к элементу или как часть дизайна. Небольшая тень под элементами придаёт также странице объём и глубину.

Для добавления тени используется свойство box-shadow , у которого имеется шесть значений, из них только два являются обязательными. На рис. 1 показано свойство box-shadow со всеми возможными значениями, они пронумерованы для их идентификации.

Рис. 1. Значения свойства box-shadow

1. ключевое слово inset устанавливает тень внутри элемента;
2. сдвиг тени по горизонтали (5px - вправо, -5px - влево);
3. сдвиг по вертикали (5px - вниз, -5px - вверх);
4. радиус размытия тени (0 - резкая тень);
5. растяжение тени (5px - растяжение, -5px - сжатие);
6. цвет тени.

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

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

Как видно из таблицы, сдвиг тени не обязательно задавать в пикселах, хотя это и удобно. Цвет тени можно указывать в любом доступном формате, так, для получения полупрозрачной тени подойдёт формат RGBA, такая тень будет хорошо смотреться на любом фоне. В примере 1 показано, как это сделать.

Пример 1. Тень на фоновом рисунке

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 2. Тень повторяет скругление уголков блока.

Рис. 2. Вид тени на фоновом рисунке

При добавлении «широкой» тени следует учесть, что она может выйти за пределы видимого окна браузера и привести таким образом к появлению горизонтальной полосы прокрутки.

Тень также можно добавлять и к псевдоэлементам, это иногда требуется для сложной вёрстки. На рис. 3 показан блок с заголовком, к которому добавлена тень. Чтобы не было никаких линий в месте стыка приходится использовать псевдоэлемент ::after и добавлять тень к нему.

Рис. 3. Блок с тенью

В примере 2 показано создание такого блока.

Пример 2. Блок с тенью

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Тень у элемента может быть не одна, а сразу несколько, их параметры перечисляются через запятую в значении свойства box-shadow . В примере 3 показано добавление двойной тени ко всем изображениям.

Пример 2. Блок с тенью

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Рис. 4. Изображение с двойной тенью

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

Свойство 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

Тень блока – отличный эффект трехмерности, которая придает блокам сайта реалистичность и объемность. Когда я начинал изучать (примерно 5-6 лет тому назад), я не догадывался о существовании , и мне при создании сайта приходилось делать тень блоков изображением. Это было очень неудобно, да и не всегда получалось так, как хотелось. Спасибо возможностям CSS, которые упростили труд веб-дизайнеров. Сегодня я покажу возможность в CSS, как создать для блоков тень.

Для добавления тени в CSS используется свойство box-shadow .

1. сдвиг тени по горизонтали (до 100px вправо, до -100px влево);
2. сдвиг по вертикали (до 100px вниз, до -100px вверх);
3. размытие тени (0 - четкая тень, 100 - сильно размытая тень);
4. растяжение тени (до 100px - растяжение, до -100px - сжатие);
5. цвет тени;
6. inset - тень внутри элемента, без inset тень будет наружу.

Результат :

Таблица с тенями:

код	Пример:
box-shadow: 0px 13px 17px -6px #000000;
box-shadow: 10px -10px 0px -6px #000000;
box-shadow: 10px 13px 0px -6px #000000;
box-shadow: 1px 1px 32px -6px #000000;
box-shadow: -1px 23px 41px -25px #000000;
box-shadow: -1px 23px 41px -25px #4dc13c;
box-shadow: -10px -10px 40px -6px #000000 inset;
box-shadow: 7px 10px 23px -8px #92a9e7;

С помощью тени можно создать объемный блок:

Код	Пример
box-shadow: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(191,166,6), 3px 2px rgb(218,193,33), 3px 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 5px 5px rgb(188,163,3), 6px 5px rgb(215,190,30), 6px 6px rgb(187,162,2), 7px 6px rgb(214,189,29), 7px 7px rgb(186,161,1), 8px 7px rgb(213,188,28), 8px 8px rgb(185,160,0), 9px 8px rgb(212,187,27), 9px 9px rgb(184,159,0);
box-shadow: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6), -3px 2px rgb(218,193,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31), -5px 5px rgb(188,163,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1), -8px 7px rgb(213,188,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0);
box-shadow: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191,166,6), -3px -2px rgb(218,193,33), -3px -3px rgb(190,165,5), -4px -3px rgb(217,192,32), -4px -4px rgb(189,164,4), -5px -4px rgb(216,191,31), -5px -5px rgb(188,163,3), -6px -5px rgb(215,190,30), -6px -6px rgb(187,162,2), -7px -6px rgb(214,189,29), -7px -7px rgb(186,161,1), -8px -7px rgb(213,188,28), -8px -8px rgb(185,160,0), -9px -8px rgb(212,187,27), -9px -9px rgb(184,159,0);
box-shadow: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(191,166,6), 3px -2px rgb(218,193,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,191,31), 5px -5px rgb(188,163,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(186,161,1), 8px -7px rgb(213,188,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);

Blok1 { width: 70%; max-width: 550px; margin: 10px auto; padding: 1em; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset; }

Результат :

Blok1 { width: 30%; max-width: 550px; margin: 2em auto; padding: 1em; background: #DADADA; box-shadow: 6px 6px #BBBBBB, 12px 12px #919191; }

Результат :

Blok1 { width: 30%; margin: 0 auto; padding: 2em; box-shadow: 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20px 0 -10px #FFFF00, -20px 0 0 -10px #FF3399; }

Результат :

С помощью тени можно сделать красивую рамку.

Красивая рамка с помощью свойства box - shadow

Blok1
 {
width: 20%;
 max-width: 250px;
 margin: 0 auto;
 padding: 1em;
 border: 2px dashed #999;
 box-shadow: 0 0 0 1px #999,
 inset 0 0 0 1px #999;
 }
Результат

:

Blok1
 {
width: 30%;
max-width: 250px;
margin: 2em auto;
padding: 4em;
background: #dcc005;
box-shadow: 0 0 4em 4em #fff inset;
 }
Результат

:

Blok1
 {
 max-width: 250px;
 margin: 0 auto;
 padding: 1em;
 border-radius: 10px;
 background: rgb(100,100,100) radial-gradient(circle at 0 0, rgba(255,255,255,.65), rgba(255,255,255,.35));
 box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px;
 }
Результат

:


 
 
 
 
 
 
 

 

 
сайт 
 

 

Результат

:

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

А на днях я опубликую статью, как можно создавать без использования фотошопа. Так что, будьте в центре событий и подписывайтесь на обновления моего блога. Не пропустите интересную для вас тему. Ну, все, удачи!!!
С появлением стандарта CSS 3
 введено свойство box-shadow , которое получило широкое применение среди веб-разработчиков, так как оно позволяет с легкостью добавить одну или несколько теней к блоку элемента для придания желаемого визуального эффекта.
В предыдущий статье мы с Вами рассматривали свойство border-radius , используя его, вы можете получить тень с закругленными углами. По аналогии с текстовой тенью (text-shadow), вы сможете создавать множественные тени, они наносятся по z-оси
 спереди назад (с первой заданной тенью сверху).
Давайте детально рассмотрим синтаксис этого современного свойства:

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

none

Тень не отображается. Это значение по умолчанию.


inset

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

h-shadow

Обязательное значение.
 Задаёт расположение горизонтальной тени. Допускается использование отрицательных значений.

v-shadow

Обязательное значение.
 Задаёт расположение вертикальной тени. Допускается использование отрицательных значений.

blur-radius

Необязательное значение.
 Задаёт радиус размытия. Чем больше это значение, тем больше размытие, при этом тень становится больше и светлее. Если значение не задано, то значение будет равно 0 (резкие - отчетливые тени). Отрицательные значения не допускаются.

spread-radius

Необязательное значение.
 Размер тени (радиус растяжения тени). При положительных значениях тень будет расшииряться, а при отрицательных сжиматься. Если значение не задано, то значение будет равно 0 (тень соответствует размеру элемента).

color

Необязательное значение.
 Определяет цвет тени (HEX, RGB, RGBA, HSL, HSLA, "Предопределённые цвета "). Значением по умолчанию является черный.

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

Opera

IExplorer

Edge

box-shadow

10.0
4.0
 -webkit-

4.0
3.5
 -moz-

10.5
5.1
3.1
 -webkit-

9.0
12.0

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

-moz-box-shadow
: значение
; /* Firefox 3.5 - 3.6 */

box-shadow
: значение
; /* таблица выше */

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



 


 
 

box-shadow:10px 10px 0px red;
 
class =
 "test2"
>
box-shadow:10px 10px 10px #777;
 



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






 
 

 

 



Два
 блока фиксированной ширины и высоты (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-2020 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу сайт@gmail.com