Текст с тенью на CSS

В этой статье мы рассмотрим как сделать текст на странице более привлекательным. Добавим нашему тексту тень средствами CSS и HTML.

Для браузеров которые понимают свойство CSS text-shadow все делается легко и просто:

<p style="text-shadow: 1px 1px 2px #404040; font: bold 25px Times New Roman; color:red">
Текст с тенью на CSS
</p>

но это свойство не доступно для браузеров IE, включая восьмой. Значит придется выкручиваться...

Итак, начнем. Все что нам потребуется - это создать дубликат того текста, который должен отбрасывать тень. Мы расположим его в отдельном контейнере под основным текстом, немного сместив, чтобы добиться нужного эффекта.

CSS:

div {
   font-family:sans-serif;
   font-size:32px;
   font-weight:900;
   color:#0000ff;
   height:38px;
   line-height:28px;
}

div.shadow {
   color:#808080;
   position:relative;
   top:-36px;
   left:1px;
   z-index:-1;
}

HTML:

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

Пример смотрим здесь: Текст с тенью на CSS.