Создание сайта
Регистрация
Продвижение
Монетизация
Облако тегов

Требуется для просмотраFlash Player 9 или выше.

Показать все теги

Главная » Создание сайта » CSS » Эффект тени текста с помощью CSS

Эффект тени текста с помощью CSS
Раздел: Создание сайта » CSS  
22 августа 2009   |   автор: admin Оставить комментарий



Создатели браузеров радуют нас поддержкой все новых и новых возможностей CSS. И теперь уже нет нужды создавать тень для текста в фотошопе. Для этих целей достаточно одного CSS.

 

Делается это очень просто. Для того чтобы применить эффект тени к тексту достаточно воспользоваться таким свойством, как “ text-shadow ”. При этом вы можете смещать тень и по вертикали и по горизонтали, задавать ей степень размытости и цвет.

 

text-shadow: 10px 20px 5px #fff; - в этой строке 10px означает смещение на 10px вдоль оси х, а 20px – вдоль оси y. 5px – размытость, #fff – цвет тени. Направление смещения по осям зависит также от знака перед значением свойства: положительный – вправо и вниз, отрицательный – влево и вверх.

 

Следует также учитывать, что пока не все версии браузеров поддерживают данное свойство, поэтому некоторые посетители ваших сайтов не смогут увидеть результата наложения теней.

 

Код HTML:

 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Создание тени с помощью CSS</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

 

<body>

<h1>web-lesson.ru</h1>

<h2>Эффект тени с помощью CSS</h2>

</body>

 

</html>

 

 

Код CSS:

 

body {

            background: #474747 url(bg.png);

}

 

h2 {

            font: 70px Tahoma, Helvetica, Arial, Sans-Serif;

            text-align: center;

            color: #000;

            text-shadow: 10px 20px 5px #fff;

 

}


 

 

Результат в браузере:

 

 

Эффект тени текста с помощью CSS

Сайт: web-lesson.ru 

 


Ключевые теги: тень
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
web-lesson.ru
Добавление комментария
Ваше Имя:
Ваш E-Mail:
Код:
Введите код