Создание кроссбраузерной тени текста

Разработка своих веб-приложений и страничек

Создание кроссбраузерной тени текста

Сообщение Zver » 23 авг 2009, 13:43

Итак. Хочу поделится интересным эффектом - тень от текста.
Стандартное "text-shadow:" работает только в последних версиях Оперы.
Для начала создадим документ HTML.
Код: Выделить всёРазвернуть

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Текст с тенью</title>
</
head>
<
body>

<
div id="style_text">Это текст с тенью</div>
<
div id="style_shadow">Это текст с тенью</div>
</
div>

</
body>
</
html>
 

Теперь самое интересное - стили.
Код: Выделить всёРазвернуть

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Текст с тенью</title>
<
style type="text/css">
body{
    background:#FFFFFF;
    padding:0px;
    margin:0px;
}
/* Св-ва тени */
#style_shadow{
    color:#333333;
    font-size:20px;
}
/* Св-ва текста */
#style_text{
    color:#4AA5FF;
    font-size:20px;
    padding:1px;
    position:absolute;
}
</
style>
</
head>
<
body>

<
div id="style_text">Это текст с тенью</div>
<
div id="style_shadow">Это текст с тенью</div>
</
div>

</
body>
</
html>
 

У нас получится нечто вроде этого:
text-shadow.png
text-shadow.png (2.12 Кб) Просмотров: 777

Единственный минус - текст придется писать два раза. Непрактично при выводе большого текста. Плюсы - отображается тень во всех браузерах.
-------------------
Скачать исходник:
font-shadow.zip
Исходник
(562 байт) Скачиваний: 334

-------------------
By Zver
Zver
Активный участник
 
Сообщения: 1333
Зарегистрирован: 18 дек 2008, 18:51
Откуда: Саратов, Заводской

Вернуться в PHP, HTML, CSS...

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 32

cron