Как сделать тень в CSS3

Апрель 02, 2013   Александр Маврин   Комментариев нет

Тень в CSSЗдравствуйте, уважаемые читатели. Сегодня поговорим о том, как сделать тень в CSS. На сегодняшний день тень в CSS поддерживаются практически всеми популярными браузерами. Исключение является Internet Explorer, что для него неудивительно. Он не понимает свойства text-shadow (тень текста). Свойства тени для объектов на странице прописываются как box-shadow. И давайте перейдем сразу к примерам. Я создал 4 блока и применил к ним разные эффекты тени.

1
 box-shadow: 0px 0px 5px 0; /* Тень с 4 сторон и размытием 5px */
2
 box-shadow: 0px 0px 6px 1px inset; /* Внутренняя тень */
3
 box-shadow: 2px 2px 5px 1px; /* Тень смещена вниз и вправо*/
4
 box-shadow: 3px 3px 5px 0 inset; /* Внутренняя тень смещена вверх и влево*/

Значение тени в CSS

  • Первое значение смещает тень по оси Х. Применяются как положительные, так и отрицательные числа
  • Второе значение — смещает тень по оси Y
  • Третье значение — радиус размытия тени
  • Четвертое значение — размер тени
  • #222 — Цвет тени
  • inset — внутренняя тень

Для каждого браузера нужно прописывать свои значения

box-shadow: 2px 2px 5px 1px; /* Все браузеры */
-webkit-box-shadow: 2px 2px 5px 1px; /* Хром, Сафари */
-mox-box-shadow: 2px 2px 5px 1px; /* FireFox */
-o-box-shadow: 2px 2px 5px 1px; /* Опера */

Демо

Для IE нужно прописывать специальные, отдельные стили, но это тема отдельного разговора, поэтому поговорим об этом в другой раз и про эффекты тени для текста тоже. Данные примеры вы как обычно можете скачать, рассмотреть подробнее и потренироваться.

СКАЧАТЬ

Не стесняйтесь делиться записью в социальных сетях. Спасибо


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *