Тень блока – отличный эффект трехмерности, которая придает блокам сайта реалистичность и объемность. Когда я начинал изучать (примерно 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-свойства box-shadow. Этот стиль позволяет воплотить в жизнь интересные эффекты, например, объемность и трехмерность блока. Свойство поддерживается всеми современными браузерами. Исключение составляют IE8 и Opera Mini.
Свойство box-shadow: синтаксис
Данный стиль записывается следующим образом:
Box-shadow: inset 4px 4px 8px 5px #333333;
Рассмотрим по порядку, за что отвечает каждый параметр (слева направо):
Ключевое слово
 inset: параметр, который необязательно указывать; рисует тень внутри
 элемента.
Сдвиг по оси X
: указывает степень смещения тени по горизонтали относительно элемента. Положительное значение означает сдвиг вправо, отрицательное - влево. Значение 0 означает, что тень без сдвига.
Сдвиг по оси Y
: указывает степень смещения тени по вертикали. Положительное значение означает сдвиг вниз, отрицательное - вверх. Значение 0 - это тень без сдвига.
Радиус размытия
: это степень размытия тени. Чем больше значение, тем более размыта тень. Если параметр не указан, используется значение по умолчанию - 0 . В таком случае тень будет идеально четкой.
Расширение
: необязательный параметр, отвечающий за растяжение тени по обеим осям; чем больше значение, тем больше растяжение. Расширение работает только при наличии предыдущего параметра. Значение по умолчанию - 0 .
Цвет тени
: с этим параметром всё понятно - он задает цвет тени элемента. Цвет по умолчанию - черный.
Примечание.
 Браузерам Android и более старым версиям iPhone Safari требуется префикс -webkit- для корректной работы CSS свойства box-shadow.
Данное свойство может принимать несколько групп значений (делать несколько теней одновременно). Для этого понадобится перечислить эти группы параметров через запятую. Например:
Box-shadow: 15px 15px 20px #8b0163,
 inset 15px 15px 20px #630046;
Примеры box-shadow
Чтобы вы лучше поняли всю силу и прелесть свойства CSS box-shadow, мы покажем несколько примеров, которые можно смело применять на практике. Данное свойство способно сильно преобразить обычный блок!

Легкая тень
Box-shadow: 0 2px 4px rgba(0, 0, 0, .25);

Эффект бумаги
Box-shadow: 0 1px 4px rgba(0, 0, 0, .3),
 -23px 0 20px -23px rgba(0, 0, 0, .6),
 23px 0 20px -23px rgba(0, 0, 0, .6),
 inset 0 0 40px rgba(0, 0, 0, .1);


Несколько слоев
Box-shadow: 6px 6px #ccc,
 12px 12px #a3a3a3;


Тройная рамка
Box-shadow: 0 0 0 7px rgb(118, 46, 177),
 0 0 0 14px rgba(118, 46, 177, 0.6),
 0 0 0 21px rgba(118, 46, 177, 0.4);


Уголки
Box-shadow: -20px 20px 0 -17px #eee,
 20px -20px 0 -17px #eee,
 20px 20px 0 -20px #592385,
 0 0 0 2px #592385;


Как видите, свойство box-shadow предоставляет огромное поле для фантазии. Вы можете преображать блоки как угодно - главное, иметь чувство меры! 😉

В следующей главе вас ждет изучение свойств width и height , определяющих размеры элементов.
Свойство box-shadow добавляет элементу одну или более теней. Тень представляет собой копию элемента, смещенную на указанное расстояние. Тени бывают внешние или внутренние, размытые или плоские, они могут следовать контурам блоков со скругленными углами. С помощью ключевого слова inset создаются тени внутри элемента, делая элемент визуально объёмным или вдавленным.
Как сделать тень блока с помощью свойства box-shadow

Поддержка браузерами
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-

1. Синтаксис свойства box-shadow
Свойство box-shadow прикрепляет одну или несколько теней к блоку. Свойство принимает либо значение none , которое указывает на отсутствие теней, либо список теней через запятую, упорядоченный от начала к концу.
Каждая тень является отдельной тенью, представленной от 2 до 4-х значений длины, необязательным цветом и необязательным ключевым словом inset . Допустимые длины 0 ; опущенные цвета по умолчанию равны значению свойства color .
Свойство не наследуется.
  Рис. 1. Синтаксис свойства box-shadow

Значения:



x-offset

Задает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от текста, отрицательная длина - влево.

y-offset

Задает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное - вверх.

blur

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

растяжение

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

цвет

Задает тени. Если цвет отсутствует, используемый цвет берется из свойства color. Для Safari цвет тени указывать обязательно.

 inset

Изменяет отбрасываемую тень блока с внешней тени на внутреннюю.

 none

Значение по умолчанию, означает отсутствие тени.

 initial

Устанавливает значение свойства в значение по умолчанию.

 inherit

Наследует значение свойства от родительского элемента.

Эффекты тени применяются следующим образом: первая тень находится сверху, а остальные — сзади. Тени не влияют на компоновку и могут перекрывать другие элементы или их тени. С точки зрения контекстов укладки и порядка рисования внешние тени элемента рисуются непосредственно под фоном этого элемента, а внутренние тени элемента рисуются непосредственно над фоном этого элемента (ниже border и border-image , если таковые имеются).
Если элемент имеет несколько ящиков, все они получают тени, но тени рисуются только там, где также будут нарисованы границы; см. box-decoration-break.
Тени не вызывают прокрутку или не увеличивают размер прокручиваемой области.
2. Примеры тени для блока
2.1. Внутренняя тень

 

 .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);
}
2.2. Плоская тень с одной стороны
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;
 text-decoration: none;
 margin: 20px;
 color: white;
 background: #55acee;
 box-shadow: 0 5px 0 #3C93D5;
 transition: .3s;
}
.example-shadow-2 a:hover {
 background: #6FC6FF;
}
2.3. Тень в стиле «материальный дизайн»

 

 .example-shadow-3 {
 background: #e8e8e8;
 text-align: center;
}
.example-shadow-3 span {
 background: white;
 display: inline-block;
 width: 200px;
 height: 100px;
 margin: 50px;
 box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

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