Очередная вкусняшка в CSS3 — свойство box-shadow, благодаря которому мы можем настроить отбрасываемую и внутреннюю тень для блочных элементов, не прибегаю к гуглению и поиску “1000 и 1 способ отбросить тень”. Я не буду вдаваться в подробности кроссбраузерности данного атрибута, лишь попытаюсь показать как этим пользоваться.
Параметры box-shadow
Свойство box-shadow добавляет одну или более теней к элементу. Синтаксис свойства:
box-shadow: смещение_по_оси_x смещение_по_оси_y [радиус_размытия][распространение][цвет_тени][inset];
- смещение_по_оси_x — задает горизонтальное смещение тени относительно элемента: положительное значение для смещения вправо и отрицательное для смещения тени влево;
- смещение_по_оси_y — задает вертикальное смещение тени: положительное значения для смещения вниз и отрицательное для направления тени вверх;
- радиус_размытия (blur) — задает ширину размытие тени(не обязательный параметр);
- распространение (spread) — задает ширину распространения тени, т.е. с помощью этого параметра можно увеличить размер тени(не обязательный параметр);
- цвет_тени — цвет для отбрасываемой тени(не обязательный параметр);
- inset — ключевое слово для установки внутренней тени, если это слово опущено, то выставляется внешняя тень(не обязательный параметр).
При описании параметров числовые значения должны описываться друг за другом строго в таком порядке:
смещение_по_оси_x смещение_по_оси_y [радиус_размытия] [распространение]
Примеры использования box-shadow
Для начала простейшее использование box-shadow, примеры простой отбрасываемой и внутренней тени со смещением вниз и вправо на 10px:
Добавим скругление углов при помощи border-radius:
А теперь уменьшим смещение по осям и увеличим тень с помощью распространения (spread):
Благодаря тому, что к одному элементу можно применять более одной тени, можно немного поизвращаться и получить вот такие штуки:
А вот Вам от меня наглядный пример, что можно сделать при помощи мультитени CSS3:
PS: ярковатый пример получился =)
