Что CSS грядущий нам готовит? Часть четвёртая: text-shadow

Не прошло и дня, как вышла новая статья из серии о новых возможностях CSS3.
Сегодня мы будем говорить о text-shadow.
Это свойство нельзя назвать новым – оно было включено ещё в спецификацию CSS 2.0, а в версии 3.0 было переработано и улучшено.

Надо заметить, это одно из немногих свойств в CSS 3, которое объявляется одинаково во всех браузерах (без приставок –moz и –webkit).

Сейчас text-shadow поддерживают следующие браузеры:

• Firefox (начиная с версии 3.1)
• Opera (с версии 9.5)
• Safari (с версии 1.0, поддержка multiple shadows с версии 4.0)
• Сhrome (c версии 2.0).

IE, как всегда, позади всех. У него есть лишь filter.Shadow – крайне некрасивая реализация того, что должно называться тенью.

Параметры

text-shadow объявляется следующим образом:

.block {
    text-shadow: horizontal vertical (blur) (color);
}

где horizontal и vertical – смещение по горизонтали и вертикали соответственно (в любых единицах, может быть отрицательным), blur - необязательный параметр, который передает размытие тени, color – также необязательный параметр, обозначающий цвет тени (по умолчанию равен цвету текста).

Примеры

.block {
	color:#9BD325;
	text-shadow: 1px 1px #191919;
}

.block {
	color:#fff;
	text-shadow:-1px -1px #888888;
	background-color:#D8D8D8;
}

.block {
	color:#E5E5E5;
	text-shadow: 0 1px #191919;
}

.block {
	color:#fff;
	text-shadow: 1px 1px 5px #191919;
}

.block {
	color:#EC3737;
	text-shadow:1px 1px #191919, 10px 10px 10px #CC1111;
}

Итог

Поскольку свойство text-shadow поддерживают практически все браузеры, его вполне можно использовать уже сейчас, отказавшись от поддержки IE.
К тому же тень часто незаметна - многие пользователи могут вообще её не увидеть :)
Дерзайте.

---

Категории

• CMS
• CSS
• jQuery
• MySQL
• PHP
• Вёрстка

Контакты