Здравствуйте, уважаемые читатели!
Используя CSS3, у разработчиков сайтов появилась возможность реализовывать тени для изображений или других элементов без использования дополнительных картинок. Разнообразные тени повсеместно используются в дизайне, потому что они подчёркивают реалистичность изображения. Раньше для этого в основном применялись соответсвующие картинки.
На самом деле реализовать тени средствами CSS достаточно легко и просто, определив необходимые правила соответсвующему «div». Дополнительная разметка теперь не требуется, достаточно создать дополнительные псевдоэлементы, помещённые за основным объектом. Сделать это можно с помощью замечательного свойства «box-shadow».
box-shadow: inset || [ <length> <length> <length>? <length>? || <color> ]
Ниже представлены типовые примеры для этого свойства. С помощью таких псевдоэлементов, как «::before» и «::after» мы реализуем отбрасывание внутренней и внешней теней для блока:
Создание внешней тени
Вот как будет выглядеть результат:
Создание внутренней тени
И вот результат:
