text-shadow

Свойство text-shadow даёт возможность добавить тень буквам в тексте.

Добавим нашем заголовку весёлую розовую тень!

        
          
          <h1>Улыбнись!</h1>
          <h1>Улыбнись!</h1>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          h1 {  text-shadow: 5px 5px #ffe2e7;}
          h1 {
  text-shadow: 5px 5px #ffe2e7;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

У тени для текста много общего с тенью для блока — box-shadow.

Каждая тень состоит из следующих значений:

• Два или три значения размера с единицами измерения.
  • Если задано только два значения, то они интерпретируются как смещение по осям x и y.
  • Если задано и третье значение тоже, то оно отвечает за размытие тени.
• Цвет тени в любом доступном формате. Может быть указан до числовых значений размеров, так и после. Но не между значениями. А то браузер запутается.

Посмотрим на каждую из составляющих тени внимательнее:

Смещения по осям x и y — обязательные значения для тени. Могут принимать любые числовые значения, в том числе отрицательные. Значение по умолчанию равно 0 для обеих осей. Если первое значение положительное, то тень будет справа от буквы, если отрицательное — слева. Если второе значение положительное, то тень будет снизу, если отрицательное — сверху.

Радиус размытия — опциональное значение, положительное числовое значение с единицами измерения. По умолчанию значение 0, что делает его указание необязательным. Если не указываете его или пишите 0, то край тени будет резки, без размытия. Чем больше значение, тем шире область размытия и тем светлее сама тень.

Цвет — вроде бы опциональное, но на самом деле обязательное значение цвета тени. Почему? Если не указывать цвет, то решение остаётся за браузером. Как правило, браузер возьмёт значение свойства color текста, которому прописываете тень. Но Safari (sic!) отрисует прозрачную тень. Если вам действительно нужен цвет тени, совпадающий с цветом текста, то это можно указать явно при помощи ключевого слова currentColor.

Можно задавать несколько теней для одного элемента, перечисляя их через запятую.

«Объёмный» текст, созданный при помощи тени — старая уловка типографов и шрифтовиков.

Очень простой приём, чтобы сделать скучный текст более броским и весёлым используется также и в вебе.

💡 Свойство можно анимировать 🪄

На практике

Скопировать ссылку "На практике" Скопировано

Алёна Батицкая советует

Скопировать ссылку "Алёна Батицкая советует" Скопировано

🛠 Можно имитировать обводку букв при помощи этого свойства, задав нулевое смещение по осям и небольшое размытие. Но шириной обводки в этом случае управлять нельзя. Я бы предпочла использовать псевдоэлемент для этих целей.

🛠 На ретина-экранах тени могут выглядеть достаточно грязно. Обязательно проверяйте отображение текста с тенями на экранах с DPR ≥ 2.

+ Развернуть