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

    3 комментария 823

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

1
 box-shadow: 0px 0px 5px 0; /* Тень с 4 сторон и размытием 5px */

Телеграм-канал serblog.ru

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 нужно прописывать специальные, отдельные стили, но это тема отдельного разговора, поэтому поговорим об этом в другой раз и про эффекты тени для текста тоже. Данные примеры вы как обычно можете скачать, рассмотреть подробнее и потренироваться.

СКАЧАТЬ

Любая сумма на развитие сайта

3 комментария
  1. Я тоже заметил, что в IE тень текста не отображается. А нет ли какого решения, чтоб это исправить?

    • Александр Маврин:

      При помощи фильтра можно:

      1
      2
      
      filter: progid:DXImageTransform.Microsoft.Shadow(Color=#333, Strength=15, Direction=90),
      progid:DXImageTransform.Microsoft.Shadow(Color=#333, Strength=15, Direction=180);
  2. Спасибо, что-то не сработало. Ну ладно, подожду отдельного разговора — не горит.

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

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