Свойство CSS text-shadow

Свойство CSS text-shadow отвечает за задание тени у текста. Очень схож со свойство box-shadow.

Синтаксис CSS text-shadow

text-shadow: X Y R color;

Где:

  • X – сдвиг тени относительно текста по оси Х (чаще всего задается в пикселях px);
  • Y – сдвиг тени относительно текста по оси Y (чаще всего задается в пикселях px);
  • R – радиус тени (чаще всего задается в пикселях px);
  • color – цвет (можно задавать в любом формате, см. названия html цветов)

Синтаксис text-shadow допускает задание нескольких теней через запятую. Например

text-shadow: X1 Y1 R1 color1, X2 Y2 R2 color2, ...;

Приоритет тени (какая выше, какая ниже) зависит от конкретной версии CSS. В CSS3 первая тень в списке размещается на самом верху, последняя в списке — в самом низу. В CSS2 наоборот.

Примеры: как сделать тень у текста в html

Пример №1. Простая тень у текста в html

Ниже представлен самый простой пример с тенью у текста. Здесь мы применили оба смещения (X и Y), а также сделали радиус размытия.

<html>
<head>
<style>
.primer1{
padding: 10px;
color: #0000CD;
font-size: 20px;
text-shadow: 3px 1px 7px #191970;
}
</style>
</head>
<body>
<div class="primer1">Текст с тенью</div>
</body>
</html>

На странице преобразуется в следующее

Текст с тенью



Пример №2. Фиксированная или жесткая тень у текста в html

Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.

<html>
<head>
<style>
.primer2{
padding: 10px;
color: #0000CD;
font-size: 20px;
text-shadow: 1px 2px 0px #1E90FF;
}
.primer2_1{
padding: 10px;
color: #0000CD;
font-size: 20px;
text-shadow: 1px 2px 0px #1E90FF;
background: #000;
}
</style>
</head>
<body>
<div class="primer2">Фиксированная или жесткая тень</div>
<div class="primer2_1">Фиксированная или жесткая тень с фоном</div>
</body>
</html>

На странице преобразуется в следующее

Фиксированная или жесткая тень
Фиксированная или жесткая тень с фоном

Пример №3. Двойная тень у текста в html

<html>
<head>
<style>
.primer3{
padding: 10px;
color: #0000CD;
font-size: 20px;
text-shadow: 2px 1px 0px #fff, 4px 2px 0px #00FA9A;
}
</style>
</head>
<body>
<div class="primer3">Двойная тень</div>
</body>
</html>

На странице преобразуется в следующее

Двойная тень



Пример №4. Вдавленные буквы у текста в html

<html>
<head>
<style>
.primer4{
padding: 10px;
color: #333;
font-size: 20px;
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}
.primer5{
padding: 10px;
color: #000;
font-size: 20px;
text-shadow: -1px -1px #666, 1px 1px #fff;
background: #000;
}
</style>
</head>
<body>
<div class="primer4">Вдавленные буквы - вариант 1</div>
<div class="primer5">Вдавленные буквы - вариант 2</div>
</body>
</html>

На странице преобразуется в следующее

Вдавленные буквы – вариант 1

Вдавленные буквы – вариант 2

Пример №5. Вдавленные буквы у текста в html

<html>
<head>
<style>
.primer6{
padding: 10px;
color: #fff;
font-size: 20px;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
background: #555;
}
</style>
</head>
<body>
<div class="primer6">Небольшой 3D текст</div>
</body>
</html>

На странице преобразуется в следующее

Небольшой 3D текст

Для обращения к margin из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.margin="VALUE"




Читайте также:

• Свойство css border

• Свойство css background

• Свойство css transition

• Свойство text-decoration

• Свойство vertical-align

• Свойство white-space

• Свойство word-wrap

• Свойство z-index

• Линейный градиент

• Радиальный градиент


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.