Как сделать текст с тенью на CSS

CSS тень текстаМногие веб-дизайнеры при создании макета сайта, любят задавать для текста различные эффекты, такие как текстовая тень. Потому что это очень сильно улучшает внешний вид сайта. Верстальщикам же, для реализации текста с тень, раньше приходилось этот текст растрировать и использовать на сайте в виде обычного изображения.

Но с приходом CSS3 все кардинально изменилось. Теперь появилось новое свойство text-shadow, с помощью которого можно задавать тень для текста.

Данное свойство записывается так:

text-shadow: 4px 4px 0 #ccc;
  • Первое значение, задает сдвиг тени по оси x.
  • Второе значение, задает сдвиг по оси y.
  • Третье значение, задает радиус размытия тени.
  • Четвертое значение, устанавливает цвет тени.

Более подробно об этом свойстве, я рассказываю в данном видеоуроке.

Смотреть видеоурок

К сожалению, на данный момент, text-shadow не является кроссбраузерным. К примеру, IE9 и более младшие версии не поддерживают его.

Вместо text-shadow, в данных браузерах используют:

filter: Shadow(Color=#ccc, Direction=45, Strength=4);

Указанный вверху код, задает тень цвета (#ccc), направление тени (45 градусов от вертикали) и размер смещения (4px).

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

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

Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

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

« Вернуться назад