Тень в тексте

Воскресенье, 13 Декабря 2009 г. 10:08 + в цитатник

Цитата сообщения Великовозрастное_дитя

Прочитать целиком В свой цитатник или сообщество!

Тень в тексте

Добавим к тексту тень

Делаем тень в тексте

Делается все очень просто. Нужно вывести текст 2 раза так что бы один текст выводился поверх второго.

Сделаем все по порядку. Выведем два раза текст.

<p style="font-size: 30px; color: #cccccc;"> Делаем тень в тексте</p>
<p style="font-size: 30px; color: #000000;"> Делаем тень в тексте</p>

Делаем тень в тексте

Все что теперь осталось - сместить второй текст вверх и влево. Для этого добавим стиль position: relative.
Это говорит от том что положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.

<p style="font-size: 30px; color: #cccccc;"> Делаем тень в тексте</p>
<p style="font-size: 30px; color: #000000; position: relative; top: -50px; left: -3px;"> Делаем тень в тексте</p>

Вот что мы получим

Делаем тень в тексте