Как добавить тень тексту с помощью CSS?

Опубликовано
Комментарии Нет

Хотелось бы сразу предупредить, что браузер от Microsoft, Inernet Explorer ни в какой версии не понимает этот параметр, поэтому в этом брузере у Вас просто будет обычный текст без тени. Думаю, не сильно большая проблема. Остальные браузеры понимают этот параметр и с ними проблем вообще не должно быть.

Вот примеры работы этого параметра:

Пример №раз: text-shadow: black 1px 1px 2px, white 0 0 0.7em;

Пример №два: text-shadow: black 1px 1px 2px, red 0 0 0.7em;

Пример №три: text-shadow: red 1px 1px 2px, red 0 0 7px;

Если разобрать эту команду по частям (к примеру, последнюю), то опустив название параметра, оказывается она состоит из 2 частей:
  • red 1px 1px 2px,
  • red 0 0 7px,

где первая часть – это первый, так называемый ареал, тени, а вторая это второй, более широкий. Вроде все закономерно. Синтаксис команды позволяет обойтись только одним слоем тени. Поэтому такое написание будет верным:

text-shadow: red 1px 1px 2px;

В любом случае свойство CSS: text-shadow может придать некоторый объем (как лак волосам) вашему web-сайту и сделать его дизайн более современным.

P.S. Кстати, стоит осторожнее относится к частоте использования этого свойства. Из-за него могут возникнуть небольшие тормоза в работе браузера. Проблемы были замечены в браузере Opera, в котором, как оказывается, помимо частого использования этого свойства, возникают проблемы если тень имеет радиус более 100px. После этого браузер начинает ощутимо медленнее отрисовывать тень, затормаживая загрузку сайта. Короче, просто не стоит весь текст web-страницы загонять в тень. Будет красиво, но медленно.

Автор

Комментарии

Нет комментариев к данной статье.

Комментарии

Поля обозначенные как * требуются обязательно. Перед постингом всегда делайте просмотр своего комментария.





← Старые Новые →