Вот так благодаря свойству CSS 3.0 text-shadow можно сделать.
Хотя последний блок сделан с добавочным кодом border-radius и box-shadow, но обо всем по порядку.

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

text-shadow: x y radius color;

X и Y это координаты, radius это радиус тени, ну и color - собственно цвет.

Как добиться эффекта как на картинке? Очень просто, смотрите код. Сложного ничего нет.

<html><body>
<style type="text/css">
body {
 font: bold 18px/20px Arial;
}

.shadow, .embossed, .embossed-bonus {
 width: 300px;
 margin: 15px;
 padding: 10px;
}

.shadow {
 background: #eee;
 text-shadow: 0 0 5px #333;
 color: #fff;
}

.embossed, .embossed-bonus  {
 background: #6a6a6a;
 color: #fff;
 text-shadow:0 -1px 0px #000;
}

.embossed-bonus {
 -moz-box-shadow: 0 0 7px #000000 inset;
 -webkit-box-shadow: 0 0 7px #000000 inset;
 box-shadow: 0 0 7px #000000 inset;

 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
}
</style>

<div class="shadow">
Текст с тенью
</div>

<div class="embossed">
Вдавленный текст
</div>

<div class="embossed-bonus">
Вдавленный текст
</div>

</body></html>
(Visited 606 times, 1 visits today)