text css shadow

Эффект тени для текста на CSS

Чтобы создать эффект тени для текста в CSS3 ввели новое свойство text-shadow. К сожалению, это свойство не является частью спецификации и, соответственно, не поддерживается всеми браузерами, но с его помощью можно делать невероятные спецэффекты с текстом.

Тогда рассмотрим варианты создания тени, используя правила CSS 2.1. Первый — с дублированием контента, второй — используя псевдо-элемент :before.

Тень текста с дублированием контента

HTML структура:

В этом случае, оригинальный текст заключается в элемент span и позиционируется абсолютно относительно своего родительского элемента ( в нашем случае h1), располагаясь под ним с небольшим сдвигом, чтобы сымитировать тень.
Правила CSS:

Примечание: Смещение элемента span на несколько пикселей в ту или иную сторону позволяет располагать тень, как вам удобно. Также можно играть и увеличением смещения.
Результат:

Решение совместимо со всеми основными браузерами, включая и IE6.

Что делать, если вы не хотите дублировать текст?

Используя псевдо-элемент :before, вы можете динамически добавлять контент перед контентом элемента h1.

HTML для элемента h1.

Правила CSS:

Примечание: значения margin-bottom and margin-left могут быть изменены.
Результат:

Проблема с браузером Internet Explorer

Проблема в использовании псевдо-элемента :before, потому как Internet Explorer не поддерживает данный селектор (т.е. тень отображаться не будет).

Только для Internet Explorer, вы можете использовать фильтр dropshadow:

Результат (для пользователей IE):

Примечание: Использование фильтра Microsoft не проходит валидацию по w3c. Если вы хотите его использовать, то наилучшим путем будет добавить его в дополнительный файл стилей.


Оставить комментарий