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