Тени с помощью CSS3

Как создавать тени с помощью CSS3

Тень в лесу

Здравствуйте, уважаемые читатели!

Используя CSS3, у разработчиков сайтов появилась возможность реализовывать тени для изображений или других элементов без использования дополнительных картинок. Разнообразные тени повсеместно используются в дизайне, потому что они подчёркивают реалистичность изображения. Раньше для этого в основном применялись соответсвующие картинки.

На самом деле реализовать тени средствами CSS достаточно легко и просто, определив необходимые правила соответсвующему «div». Дополнительная разметка теперь не требуется, достаточно создать дополнительные псевдоэлементы, помещённые за основным объектом. Сделать это можно с помощью замечательного свойства «box-shadow».

Синтаксис box-shadow реализуется следующим образом:

box-shadow: inset || [ <length> <length> <length>? <length>? || <color> ]

Ниже представлены типовые примеры для этого свойства. С помощью таких псевдоэлементов, как «::before» и «::after» мы реализуем отбрасывание внутренней и внешней теней для блока:

Создание внешней тени

Коды внешних теней

Второй скриншот внешки

Вот как будет выглядеть результат:

Готовые примеры внешних

Создание внутренней тени

Код внутренних теней

Вторая часть кодов

И вот результат:

Результат внутренних

Дискуссия по теме