текстовые эффекты с помощью css

Ну вот, добрались и до типографий. Небольшой пост о том, как сделать эффект вдавленного текста с помощью CSS. Реализуется очень просто, всего одной строкой.

“Вдавленность” делается с помощью одного css-свойства: text-shadow. То есть мы просто добавим подходящую по цвету тень и подвинем её так как нам нужно.

Получается вот так:

[sourcecode language=”css”]

.text {

text-shadow: 0px 1px 0px #e5e5ee; /* цвет должен быть темнее фона, 1px или -1px, в зависимости от цвета фона(светлый или темный) */

}

[/sourcecode]

Для того чтобы и в IE7 все отображалось правильно, добавим еще одну строку:

[sourcecode language=”css”]

.text {

text-shadow: 0px 1px 0px #e5e5ee;

filter: dropshadow(color=#e5e5ee,offX=0,offY=1);

}[/sourcecode]

Напоследок живой пример:

ArtsLab

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Опубликовано
Подробнее

ArtsLab

Блог для тех, кто интересуется разработкой сайтов, веб-дизайном и новыми событиями в интернете. В моем блоге Вы найдете записи на различные околокомпьютерные темы, обзоры сервисов и новинок, статьи по кодингу, советы, скрипты, темы и хаки для wordpress, уроки phostohop и многое другое.

4gray artslab artslabinfo