CSS приклад: text-shadow

Інформація про використання тега text-shadow у CSS

Тег text-shadow у CSS використовується для додавання тіні до тексту та налаштування її параметрів, таких як колір тіні, зсув відносно напису та радіус розмиття. Цей тег може співпрацювати з псевдоелементами :first-letter і :first-line.

Синтаксис

text-shadow: none | тінь [,тінь]*

де тінь:

<зсув по x> <зсув по y> <радіус розмиття> <колір>

Дозволяється вказувати кілька параметрів тіні, розділяючи їх комою. У CSS3 перша тінь у списку розміщується найвище, остання в списку – найнижче.

Приклад

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-shadow</title>
  <style>
   .shadowtext {
    text-shadow: 1px 1px 2px black, 0 0 1em red; /* Параметри тіні */
    color: white; /* Білий колір тексту */
    font-size: 2em; /* Розмір напису */
   }
  </style>
 </head>
 <body>
  <p class="shadowtext">В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!</p> 
 </body>
</html>

Браузери

Opera підтримує до 6–9 параметрів тіні. Збільшення цього значення, а також збільшення радіусу розмиття понад 100px впливає на продуктивність браузера. Safari до версії 4.0 підтримує лише один параметр тіні, решта ігнорується. З версії 4.0 працює вже безліч тіней.

Internet Explorer розуміє властивість text-shadow лише з версії 10.0. Замість цього використовується властивість filter: Shadow(параметри).

Часті запитання

  • Q: Як використовувати text-shadow в CSS?

    A: text-shadow в CSS використовується для додавання тіні до тексту. Синтаксис: text-shadow: горизонтальна_тінь вертикальна_тінь розмазування колір;

  • Q: Де можна використовувати text-shadow в CSS?

    A: text-shadow в CSS можна використовувати на будь-яких текстових елементах, таких як заголовки, параграфи, кнопки тощо.

  • Q: Як створити м'яку тінь для тексту за допомогою text-shadow в CSS?

    A: Щоб створити м'яку тінь для тексту в CSS, можна використати більше ніж один параметр розмазування (blur).

  • Q: Чи підтримується використання text-shadow в CSS у всіх браузерах?

    A: Більшість сучасних браузерів підтримують використання text-shadow в CSS. Однак, слід перевірити сумісність з браузерами, які використовують ваші відвідувачі.

  • Q: Як створити ефект обтікання текстом з тінню за допомогою text-shadow в CSS?

    A: Для створення ефекту обтікання текстом з тінню в CSS, можна використати кілька тіней з різними параметрами для кожного напрямку.