Ну вот, добрались и до типографий. Небольшой пост о том, как сделать эффект вдавленного текста с помощью 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]
Напоследок живой пример:
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.