Тінь тексту в CSS

Вивчаємо властивість text-shadow та створюємо тіні тексту з різними кольорами, зміщеннями й рівнем розмиття.

Властивість text-shadow

Властивість text-shadow дозволяє додати тінь до тексту. За допомогою неї можна визначити колір тіні, її зміщення по горизонталі та вертикалі, а також ступінь розмиття.

text-shadow: горизонтальне-зміщення вертикальне-зміщення розмиття колір;

Перше значення — горизонтальне зміщення тіні.
Друге значення — вертикальне зміщення тіні.
Третє значення — радіус розмиття.
Четверте значення — колір тіні.

Напрямок зміщення тіні

Додатне значення по горизонталі зміщує тінь вправо, від'ємне — вліво. Додатне значення по вертикалі зміщує тінь вниз, від'ємне — вгору.

/* Вправо */

text-shadow: 10px 0 0 red;

/* Вліво */
text-shadow: -10px 0 0 red;

/* Вниз */
text-shadow: 0 5px 0 red;

/* Вгору */
text-shadow: 0 -5px 0 red;

Тінь із розмиттям

h1 {

text-shadow: 10px 5px 3px red;
}

Тінь без розмиття

h1 {

text-shadow: 10px 5px 0 green;
}

Якщо розмиття дорівнює 0px, тінь має чіткі краї. Значення 0 можна записати явно або не вказувати, якщо використовується відповідний скорочений запис.

Декілька тіней

До одного тексту можна застосувати декілька тіней. Їх записують через кому.

h1 {

text-shadow:
0 -5px 0 red,
0 5px 0 green;
}

Практичне завдання

📌 Завдання:

№1. Додайте тексту червону тінь, зміщену на 10px вправо, на 5px вниз і з розмиттям 3px.
№2. Додайте тексту зелену тінь, зміщену на 10px вліво, на 5px вгору та без розмиття.
№3. Додайте тексту тінь такого самого кольору, зміщену на 15px вправо та на 10px вгору, без розмиття.
№4. Додайте тексту зелену тінь без зміщення, але з розмиттям 5px.
№5. Додайте тексту дві тіні — червону зверху та зелену знизу.

<!-- Початковий код -->

<h1>Текст із тінню</h1>

💡 Показати підказку

Пам'ятайте порядок значень: горизонтальне зміщення, вертикальне зміщення, розмиття, колір. Від'ємне значення по горизонталі — вліво, від'ємне по вертикалі — вгору.

✅ Показати відповідь

/* №1 */

h1 {
text-shadow: 10px 5px 3px red;
}

/* №2 */
h1 {
text-shadow: -10px -5px 0 green;
}

/* №3 */
h1 {
text-shadow: 15px -10px 0 currentColor;
}

/* №4 */
h1 {
text-shadow: 0 0 5px green;
}

/* №5 */
h1 {
text-shadow:
0 -5px 0 red,
0 5px 0 green;
}