Часто дизайнеры в макетах для украшения заголовков или каких-то надписей применяют к тексту в Фотошопе эффекты свечения (англ. "glow") или размытия (англ. "blur"). CSS3 предоставляет верстальщикам свойство, с помощью которого можно реализовать такие эффекты. Это свойство называется text-shadow. Впервые оно было включено ещё в CSS2, но потом исключено из-за отсутствия поддержки в браузерах (CSS2.1), а затем снова включено уже в CSS3. Помимо классических значений none, inherit и initial оно принимает также значения в формате text-shadow: h-shadow v-shadow blur-radius color, соответственно смещение тени по горизонтали, смещение по вертикали, степень размытия тени и цвет.
Накладывая последовательно эффекты теней и используя красивые шрифты, можно создавать достаточно интересные вещи. При этом тени никогда не перекрывают сам текст, не влияют на соседние элементы и не вызывают скроллинг. Согласно порталу caniuse.com cвойство text-shadow поддерживается полностью или частично в браузерах у 95% пользователей. IE поддерживает его, начиная с 10-й версии, а для более ранних версий есть вариант с использованием фильтров: filter: Shadow(Color=#333333, Direction=30, Strength=5).
Комментариев нет:
Отправить комментарий