text-shadow

CSS-властивість text-shadow (укр. — “тінь тексту”) дозволяє додавати тінь до тексту елемента. Це може бути корисно для створення різноманітних візуальних ефектів, таких як об’ємність або підкреслення тексту, покращення видимості тексту на фоні або створення стильних декоративних ефектів.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ-компаній України, Європи та США

Синтаксис

text-shadow: <horizontal> <vertical> <blur-radius> <color>;

Значення

  • <horizontal> — визначає горизонтальну відстань тіні від тексту (позитивне значення переміщає тінь вправо, негативне — вліво).
  • <vertical> — визначає вертикальну відстань тіні від тексту (позитивне значення переміщає тінь вниз, негативне — вгору).
  • <blur-radius> — визначає ступінь розмиття тіні. Якщо не вказано, тінь буде різкою (без розмиття). Чим більше значення, тим більше тінь буде розмита.
  • <color> — визначає колір тіні. Це може бути будь-яке значення кольору, таке як іменований колір, HEX, RGB, RGBA, HSL або HSLA.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • Властивість text-shadow підтримує кілька тіней для одного елемента. Тіні відображаються через коми, і кожна тінь може мати власні значення для горизонтального зміщення, вертикального зміщення, радіуса розмиття і кольору.
  • text-shadow не змінює сам текст, а лише додає візуальний ефект. Властивість не впливає на зміст тексту і не змінює його фактичний розмір.
  • Властивість text-shadow застосовується до будь-якого тексту (включаючи елементи <h1>, <p>, <span>, і інші текстові елементи), але не працює на елементах, які не містять тексту (наприклад, зображення або відео).
  • Власне використання text-shadow може допомогти зробити текст більш видимим на складних або темних фонах, а також додати ефект “світіння” або об’ємності.
  • Підтримується всіма сучасними браузерами.