В прошлой статье я упоминал, о том, что эффекта letterpress можно добиться с помощью CSS. Так вот, я подумал, и решил, что следует остановиться на этом моменте и рассказать о нём побольше. Свойство text-shadow появилось ещё в далёком 1998 году в спецификациях к CSS2, однако совсем недавно данное свойство получило полноценную поддрежку. Как известно, в каждом правиле есть исключения, так вот IE является исключением (даже IE9, который вышел в 2011 году, до сих пор не воспринимает text-shadow). Так вот, в связи с тем, что большинство браузеров на те времена игнорировали text-shadow, данное свойство было исключено из CSS2.1 и вернулось к нам, только в CSS3.
[/css]
где #000 — цвет тени, 1px — смещение тени по оси X, 0px — смещение тени по оси Y, 3px — радиус размытия тени.
Ниже приведу код с описанием теней трёх видов:
[css] <!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тени в CSS</title>
<style type="text/css">
body {
background-color:#666; /* Цвет фона*/
font-family:Tahoma; /* Шрифт*/
font-size: 2.5em; /* Размер текста */
}
.shadow1 {
text-shadow: #000 1px 1px 3px; /* Параметры тени */
color: #ccc; /* Цвет текста */
}
.shadow2 {
text-shadow: #999 0 1px 0, #000 0 -1px 0; /* Параметры тени */
color: #333; /* Цвет текста */
}
.shadow3 {
text-shadow: #222 0 0 7px; /* Параметры тени */
color: #666; /* Цвет текста */
}
</style>
</head>
<body>
<p class="shadow1">Вид тени №1</p>
<p class="shadow2">Вид тени №2</p>
<p class="shadow3">Вид тени №3</p>
</body>
</html>
[/css]
Если внимательно присмотреться к тени №2 то можно заметить, что в ней присутствует 2 тени.
Оказывается что теней может быть несколько. Например, Opera поддерживает максимум 6–9 теней. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на работе браузера. Opera версии 9.5+ использует отображение нескольких теней, как в CSS 2.
Safari до версии 3.2 включительно поддерживает только один параметр тени, остальные игнорируются. Множество теней поддреживается начиная с версии 4.0
Однако до сих пор IE используют 12-15% пользователей. О них тоже нужно помнить, поэтому, чтобы придать тень тексту для IE используют фильтр:
[css] filter: glow(color=#0000ff,strength=3);[/css]
Однако хочу сразу предупредить, что смотрится это ужасно.
Второй вид тени в CSS — это box-shadow. Это свойство доступно в CSS3. Сегодня оно поддерживается браузерами IE9, Opera 10.5+, Firefox 4.0, исключения Safari и Chrome.
[css] box-shadow: inset 1px 0 5px #000;[/css]
inset — Необязательный параметр. Позволяет выводить тень внутри элемента.
1px — Обязательный параметр. Сдвиг по оси X. Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево.
0 — Обязательный параметр. Сдвиг по оси Y. Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх.
5px — Необязательный параметр. Размытие. Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
#000 — Необязательный параметр. Цвет. Цвет тени в любом доступном CSS формате, по умолчанию тень черная.
Также можно указать несколько теней, разделяя их запятой. И стоит помнить то, что свойство box-shadow увеличивает размеры элемента к которому оно применяется.
Для того, чтобы установить тень в Firefox до версии 4.0, нужно использовать свойство -moz-box-shadow, В Safari и Chrome — -webkit-box-shadow.
Для Internet Explorer до версии 9.0 можно использовать фильтр:
[/css]
где offX — смещение тени по горизонтали; offY — смещение тени по вертикали; color — цвет тени.
Применение фильтра dropshadow дает четкую резкую тень, поэтому для эффекта размытия можно использовать фильтр shadow.
[css] filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);[/css]
где direction — угол направления тени от 0 до 360°; color — цвет тени; strength — смещение тени в пикселах.
Вот как выглядит div, после наложения box-shadow:
[css] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тень box-shadow</title>
<style type="text/css">
body {
background-color:#666; /* Цвет фона*/
font-family:Tahoma; /* Шрифт*/
font-size: 2.5em; /* Размер текста */
}
.shadow {
box-shadow: 0 0 5px black; /* Параметры тени */
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
padding: 10px;
}
</style>
</head>
<body>
<div class="shadow">Тень есть и будет!</div>
</body>
</html>
[/css]
Демо
Применить эффект тени можно даже к ссылке матрасы Intex.
А как можно менять цвет тени по кнопке? Объектной модели у text-shadow нет. И у box-shadow тоже.
К примеру вот так:
[html]
<html>
<head>
<title>s</title>
</head>
<style>
input[type="button"] {
box-shadow: 1px 1px 5px #000;
border-radius:3px;
background:#ccc;
border:1px solid #eee;
}
</style>
<body>
<input type="button" id="b" value="Кнопка">
</body>
</html>
[/html]