Как добавить тень к тексту?
Тень к тексту добавляется с помощью стилевого свойства text-shadow. С помощью его параметров можно установить положение тени, степень её размытия и цвет тени (рис. 1).
Рис. 1. Параметры свойства text-shadow
Обязательных параметров у text-shadow два:
- смещение тени по горизонтали, значение может быть положительным (тень будет справа от текста) или отрицательным (тень будет слева от текста);
- смещение тени по вертикали, значение может быть положительным (тень будет ниже текста) или отрицательным (тень будет выше текста).
Остальные два необязательных параметра указывают размытие тени и её цвет.
Например, чтобы добавить тень к заголовку, можете использовать следующий код:
h1 { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }В данном примере тень будет смещена на 2 пикселя вправо и вниз от текста, размытие тени составит 4 пикселя, а цвет тени будет полупрозрачным чёрным (rgba(0, 0, 0, 0.5)).
В примере 1 тень к заголовку добавляется без размытия, чтобы она имела чёткие края.
Пример 1. Использование text-shadow
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Тень</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> <style> h1 { font-family: Lobster, sans-serif; /* Шрифт */ font-size: 3rem; /* Размер заголовока */ color: #e0d0a4; /* Цвет */ } h1.shadow { text-shadow: 2px 2px 0 rgba(0,0,0,0.8); /* Параметры тени */ } </style> </head> <body> <h1>Заголовок без тени</h1> <h1 class="shadow">Заголовок с тенью</h1> </body> </html>
Автор: Влад Мержевич
Источник: webref.ru