Синтаксис
text-shadow: none | параметры тени [,параметры тени]
где параметры тени:
<цвет> <сдвиг по x> <сдвиг по y> <радиус размытия>
Значения
- none
- Отменяет добавление тени.
- цвет
- Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр.
- сдвиг по x
- Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
- сдвиг по y
- Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое опускает тень ниже текста. Обязательный параметр.
- радиус
- Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.
Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS 3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу. В CSS 2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>text-shadow</title>
<style type="text/css">
.shadowtext {
text-shadow: black 1px 1px 2px, red 0 0 1em; /* Параметры тени */
color: white; /* Белый цвет текста */
font-size: 2em; /* Размер надписи */
}
</style>
</head>
<body>
<p class="shadowtext">В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!</p>
</body>
</html>
В браузере Safari 3.1 применяются только параметры первой тени (рис. 1), в отличие от других браузеров, например, Opera (рис. 2).
Рис. 1. Вид тени в браузере Safari 3.1
Рис. 2. Вид тени в браузере Opera
|
