Серёжа Сыроежкин
Серёжа СыроежкинКопирайтер
4.06.2015

Тень текста

Итак, вы уже добавили сторонние шрифты на свой сайт, задали необходимый размер шрифта и цвет. Научились управлять декорациями шрифта. Теперь настало время поговорить о том, как добавить тень HTML-шрифта.

Тень к тексту невозможно сделать средствами HTML, самый правильный и простой способ сделать тень - CSS. Для этого существует специальное свойство CSS shadow (text-shadow). Рассмотрим его применение:

<!DOCTYPE html>
<html>
 <head>
  <title>Оформление текста CSS - "Нубекс"</title>
  <meta charset="utf-8">
  <style>
     .nubex {
     color: #383838;
     text-shadow: 1px 1px 1px #787878;
     }
  </style>
 </head>
 <body>
  <p class="nubex">Конструктор сайтов "Нубекс"</p>
 </body>
</html>

Значение параметра text-shadow задается следующим образом:

text-shadow: [сдвиг по оси X] [сдвиг по оси Y] [радиус размытия тени] [цвет]

В случае, если тень для текста необходимо убрать, просто нужно прописать:

text-shadow: none;

Разберемся теперь, что означают указанные параметры и как их правильно задать:

  • Сдвиг по оси X (Y) - указывает смещение тени по оси X (Y). Параметр можно задать как положительным числом, так и отрицательным. В первом случае тень будет смещена вправо (вниз), во втором - влево (вверх);
  • Радиус размытия тени - при увеличении этого значения размер тени увеличивается, она становится более сглаженной и светлой. Вид сглаживания отличается при отображении в различных браузерах;
  • Цвет - устанавливает цвет тени.

Все параметры, кроме цвета, задаются в пикселях (px). Цвет можно задать как названием (red, green, blue), так и в шестнадцатиричном формате (#383838).

Тени возможно комбинировать. Для этого нужно несколько теней прописать через запятую:

text-shadow: 1px 1px 1px #787878, 2px 2px 2px blue;

Кроссбраузерность

Практически все современные браузеры корректно работают с тенями и способны отображать большое множество теней. Но нужно помнить, что некоторые браузеры имеют с этим проблемы. Например, браузер Internet Explorer стал поддерживать свойство text-shadow только начиная с версии 10. Для более ранних версий использовалось свойство filter:

filter: Shadow(Color=#787878, Direction=60, Strength=2);

Записанный код создает тень цвета #787878, с углом 60 градусов от вертикали и смещением в 2 пикселя.

Обводка текста CSS

С помощью свойства text-shadow можно сделать и обводку текста. Суть следующая: для текста создаются 8 теней для всех возможных комбинаций X и Y: 1,0; 1,1; ...; 1,-1. Атрибут text-shadow в таком случае выглядит примерно так:


p {
color: white;
text-shadow: black 2px 0px, black 2px 2px, black 0px 2px, black -2px 2px, black -2px 0px, black -2px -2px, black 0px -2px, black 2px -2px;
}

В приведенном примере к тексту белого цвета устанавливается черная обводка в 2 пикселя.