Тень текста CSS
Свойство text-shadow добавляет тень тексту.
В простейшей форме вы задаёте горизонтальное и вертикальное смещение тени. Вы также можете добавить цвет тени и эффект размытия.
Горизонтальная и вертикальная тень
Тень смещена на 2px вправо и 2px вниз.
Prompt
HTML-страница, добавляющая простую тень к тексту.
Во внутреннем блоке
<style> задай <h1> text-shadow: 2px 2px (только горизонтальное и вертикальное смещение). Добавь заголовок.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Тень с цветом
Той же тени задан красный цвет.
Prompt
HTML-страница, добавляющая цветную тень к тексту.
Во внутреннем блоке
<style> задай <h1> text-shadow: 2px 2px red. Добавь заголовок.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Тень с размытием
К красной тени добавлено размытие в 5px.
Prompt
HTML-страница, добавляющая цветную размытую тень к тексту.
Во внутреннем блоке
<style> задай <h1> text-shadow: 2px 2px 5px red (смещение, размытие, цвет). Добавь заголовок.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Ещё примеры тени текста
Вот ещё несколько эффектов text-shadow.
Белый текст с тенью
Белый текст с мягкой тёмной тенью.
Prompt
HTML-страница с белым текстом и тёмной тенью.
Во внутреннем блоке
<style> сделай <h1> белым с text-shadow: 2px 2px 4px #000000. Добавь заголовок.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Красное неоновое свечение
Тень без смещения и с красным размытием создаёт эффект свечения.
Prompt
HTML-страница с красной неоновой тенью текста.
Во внутреннем блоке
<style> задай <h1> text-shadow: 0 0 3px #ff0000 (без смещения, только красное размытие для свечения). Добавь заголовок.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-shadow: 0 0 3px #ff0000;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Несколько теней
Свойство text-shadow также принимает более одной тени. Перечислите каждую тень через запятую.
Красно-синее свечение
Две наложенные тени создают красно-синее неоновое свечение.
Prompt
HTML-страница с двумя наложенными тенями для красно-синего неонового свечения.
Во внутреннем блоке
<style> задай <h1> text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff (две тени, разделённые запятой). Добавь заголовок.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Чёрно-сине-красное свечение
Белый текст с тремя наложенными тенями для чёрного, синего и красного свечения.
Prompt
HTML-страница с белым текстом и тремя наложенными тенями для чёрного, синего и красного свечения.
Во внутреннем блоке
<style> сделай <h1> белым с text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red. Добавь заголовок.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Свойство CSS Тень Текста
Свойство, рассматриваемое на этой странице, — text-shadow, которое задаёт эффект тени, добавляемый к тексту.