Эффекты тени CSS
Эффекты тени — это то, что CSS может создать для вас!
Тень текста в CSS
Чтобы добавить тень к тексту, используйте свойство CSS text-shadow.
Как минимум нужно задать горизонтальную и вертикальную тень. Цвет тени и эффект размытия — необязательные дополнения.
Базовая тень текста
Здесь только горизонтальная и вертикальная тень, без цвета и без размытия.
Prompt
Покажите заголовок h1 с текстом «Эффект тени текста!», у которого горизонтальная тень 2px и вертикальная тень 2px, без указания цвета или размытия.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Text Shadow</title>
</head>
<body>
<h1 style="text-shadow: 2px 2px;">Text shadow effect!</h1>
</body>
</html>
Тень текста с цветом
Та же тень, теперь красного цвета.
Prompt
Покажите заголовок h1 с текстом «Эффект тени текста!», у которого горизонтальная тень 2px, вертикальная тень 2px и красный цвет.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Shadow with Color</title>
</head>
<body>
<h1 style="text-shadow: 2px 2px red;">Text shadow effect!</h1>
</body>
</html>
Тень текста с размытием
Тень сохраняет цвет и получает эффект размытия.
Prompt
Покажите заголовок h1 с текстом «Эффект тени текста!», у которого горизонтальная тень 2px, вертикальная тень 2px, эффект размытия 5px и красный цвет.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Shadow with Blur</title>
</head>
<body>
<h1 style="text-shadow: 2px 2px 5px red;">Text shadow effect!</h1>
</body>
</html>
Белый текст с чёрной тенью
За белым текстом находится чёрная тень.
Prompt
Покажите заголовок h1 с текстом «Эффект тени текста!» белого цвета с text-shadow 2px 2px 4px #000000. Используйте тёмный или контрастный фон, чтобы белый текст был виден.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>White Text with Black Shadow</title>
</head>
<body>
<h1 style="color: white; text-shadow: 2px 2px 4px #000000;">Text shadow effect!</h1>
</body>
</html>
Красное неоновое свечение
Тень здесь создаёт красное неоновое свечение.
Prompt
Покажите заголовок h1 с текстом «Эффект тени текста!», у которого есть эффект красного неонового свечения с помощью text-shadow: 0 0 3px #ff0000.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Red Neon Glow</title>
</head>
<body>
<h1 style="text-shadow: 0 0 3px #ff0000;">Text shadow effect!</h1>
</body>
</html>
Несколько теней
У одного текста может быть несколько теней: просто перечислите их через запятую.
Красное и синее неоновое свечение
Две тени объединяются в красное и синее неоновое свечение.
Prompt
Покажите заголовок h1 с текстом «Эффект тени текста!», у которого две тени текста: красное свечение (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.0">
<title>Multiple Shadows Neon Glow</title>
</head>
<body>
<h1 style="text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;">Text shadow effect!</h1>
</body>
</html>
Белый текст с несколькими тенями
За белым текстом находятся чёрная, синяя и тёмно-синяя тени.
Prompt
Покажите заголовок h1 с текстом «Эффект тени текста!» белого цвета с тремя тенями текста: 1px 1px 2px чёрный, 0 0 25px синий и 0 0 5px тёмно-синий.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Shadows on White Text</title>
</head>
<body>
<h1 style="color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;">Text shadow effect!</h1>
</body>
</html>
Обводка вокруг текста
Без настоящих теней text-shadow также может нарисовать простую обводку вокруг текста.
Prompt
Покажите заголовок h1 с текстом «Обводка вокруг текста!» цвета coral, с использованием text-shadow для создания простого эффекта чёрной обводки: -1px 0 чёрный, 0 1px чёрный, 1px 0 чёрный, 0 -1px чёрный.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Around Text</title>
</head>
<body>
<h1 style="color: coral; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Border around text!</h1>
</body>
</html>