~~1 061~~ 0 11-02-2020, 11:51

box-shadow - тень в css

Свойство box-shadow позволяет вам задать тень для почти любого элемента. Если элементу задано свойство border-radius, то тень также будет с закруглёнными углами. Расположение теней по оси z будет такое же, как и при применении свойства text-shadow (первая тень будет впереди остальных).

Синтаксис

box-shadow: none | <тень> [,<тень>]*
где <тень>:
inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Значения

none: Отменяет добавление тени.
inset: Тень выводится внутри элемента. Необязательный параметр.
сдвиг по x: Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
сдвиг по y: Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
размытие: Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
растяжение: Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
цвет: Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.

Самая основная проблемка с тенью (CSS3 Box Shadow) - это как ее разместить только сверху/снизу/слева/справа?

.top {box-shadow: 0 -5px 5px -5px #333;}
.right {box-shadow: 5px 0 5px -5px #333;}
.bottom {box-shadow: 0 5px 5px -5px #333;}
.left {box-shadow: -5px 0 5px -5px #333;}

Синтаксис написания тени:

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

Ресурсы:
1. на mozilla.org

2. Генератор тени

3. тени для текста