Тінь елемента

В CSS можна додати тінь до елемента, використовуючи властивості box-shadow. Тіні можуть бути використані для надання візуального ефекту глибини та тривимірності елементам на сторінці.

box-shadow: offset-x offset-y blur-radius spread color;

offset-x та offset-y: Зміщення тіні по горизонталі та вертикалі відносно елемента. (обовʼязкові значення)

blur-radius: Радіус розмиття тіні. Чим більше значення, тим більш розмита тінь. (необовʼязкове значення)

spread: радіус поширення. Додатне значення збільшує тінь, від'ємне - зменшує. (необовʼязкове значення)

color: Колір тіні. (необовʼязкове значення)

Тінь з однієї сторони

Якщо значення радіуса поширення (spread) задати відʼємним числом, то стиснеться тінь блоку. А ефект тіні з однієї сторони вийде, якщо зробити spread меншим за розмір елемента, а зміщення тільки з однієї сторони.

 box-shadow: 0 15px 10px -5px #888888;

Внутрішня тінь

Внутрішня тінь (inner shadow) - це тінь, яка відображається всередині контуру елемента, навіть якщо цей елемент прозорий. Синтаксис повністю збігається із зовнішньою тінню, тільки на початку потрібно додати ключове слово inset.

box-shadow: inset offset-x offset-y blur-radius spread-radius color;

inset: Це ключове слово, яке вказує, що тінь повинна бути внутрішньою.

.inner-shadow-element {
  box-shadow: inset 3px 3px 10px 2px #000000;
}

Багатошарова тінь

Багатошарова тінь дозволяє встановити більше одного ефекту тіні для елемента. Можна вказати кілька шарів тіней, розділяючи їх комами. Кожен шар тіні може мати різні параметри, такі як зміщення, радіус розмиття, розширення та кольори. Можна задавати одразу як зовнішню, так і внутрішню тінь.

Перша тінь у списку розміщується найвище, остання - найнижче.

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color, 
            [inset] offset-x offset-y blur-radius spread-radius color,
            [inset] offset-x offset-y blur-radius spread-radius color,
            ...;

Експериментуючи із властивостями тіні можна створити цікаві декоративні ефекти.

Покликання:

Генератор тіні