Смотрите! Как будто кто-то освещает факелом мою веб-страницу!
Вы можете сделать части вашей страницы “всплывающими”, применив тени как к полям, так и к тексту.
Тени от коробок
Свойство box-shadow ─ это стандартное свойство CSS для начала работы, и оно может иметь значение, состоящее из нескольких частей:
box-shadow: 5px 5px 3px 1px #999
Первое значение ─ это смещение по горизонтали ─ насколько тень сдвинута вправо (или влево, если она отрицательная).
Второе значение ─ это смещение по вертикали ─ насколько тень сдвинута вниз (или вверх, если она отрицательная).
Третье значение ─ это радиус размытия ─ чем больше значение, тем менее чёткая тень. (“0” означает абсолютно чёткую). Это необязательно ─ его исключение эквивалентно установке “0”.
Четвёртое значение ─ это расстояние распространения ─ чем больше значение, тем больше тень (“0” ─ это унаследованный размер рамки). Это также необязательно — его исключение эквивалентно установке “0”.
Пятое значение ─ это цвет. Это тоже необязательно.
Внутренние тени
Вы также можете применить тени к внутренней части коробки, добавив “inset”:
box-shadow: inset 0 0 7px 5px #ddd;
Великолепно!
Базовая падающая тень и внутренняя тень
Вы можете встретить версии box-shadow, зависящие от браузера, такие как -moz-box-shadow и -webkit-box-shadow. Игнорируйте их. Они старые и глупые. Большинство современных браузеров понимают box-shadow, включая Internet Explorer версий 9 и выше.
Текстовые тени
box-shadow предназначен только для прямоугольников. Но вы также можете наносить тени на контур текста с помощью text-shadow:
text-shadow: -2px 2px 2px #999;
Аналогично box-shadow:
Первое значение ─ это смещение по горизонтали
Второе значение ─ это смещение по вертикали
Третье значение ─ это радиус размытия (необязательно)
Четвёртое значение ─ это цвет (необязательно, хотя при его отсутствии тень будет того же цвета, что и сам текст).
Обратите внимание, что для text-shadow нет параметра расстояние распространения или вставка.
Internet Explorer 9 и ниже text-shadow не поймёт, поэтому мы рекомендуем использовать его только в некритических ситуациях.
Страницы в тему:
- Следующая страница: Универсальный, дочерний и смежные селекторы
- Предыдущая страница: Закруглённые углы
- Закруглённые углы: комбинированные тени и закруглённые углы? Насколько ужасен CSS 3
- Свойство CSS: box-shadow
Примеры CSS:
