» » >

Эффект тени - text-shadow

18.09.2013, 15:34

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

Поддерживается следующими браузерами:

Mozilla Firefox ( 3.1 и выше ) - поддерживает
Google Chrome ( 2 и выше ) – поддерживает
Opera ( 9.5 и выше ) - поддерживает
Apple Safari ( 3.0 и выше ) - поддерживает, без размытия

а вот Internet Explorer впереди планеты всей, он не поддерживает данный эффект тени.

Описание свойства:

Давайте рассмотрим небольшой пример

CSS-Code

h1 {text-shadow: 0px 0px 4px #69c2db; }

Первое значение ( 0px ) - обозначает смещение тени по горизонтали. При положительном значении смещает тень вправо, при отрицательном – влево;
Второе значение ( 0px ) - обозначает смещение тени по вертикали. При положительное значении смещает тень вниз, при отрицательном – вверх.
Третье значение ( 4px ) - обозначает размытие тени.
Четвертое значение (#69c2db) - обозначает цвет тени.

Также стоит не забывать что свойство text-shadow позволяет создавать множественные тени. Для этого нужно через запятую указать дополнительный ряд значений, например:

CSS-Code

h1 {h1 {text-shadow: 0 0 24px #df8585, 0 0 4px #df8585, 1px 1px 2px #df8585; }

Лично моё мнение, что данный эффект, подходит для заголовков того или иного контента, так как при меньшем размере шрифта любая тень на мой взгляд будет немного мешать основному тексту.


Категория: HTML-CSS | Добавил: tashkent97
Просмотров: 469 | Загрузок: 70 | Источник: http://www.center-dm.ru/ | Рейтинг: 5.0/1
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<