Свойство тени текста может быть применено к любому текстовому элементу, но обычно не должно применяться к абзацам текста, лучше оставить это свойство для основных заголовков и меню. Мы изучим синтаксис, пример и некоторые распространенные ошибки при использовании этого свойства, для интересного и необычного использования этого свойства обратитесь к уроку «Создание горизонтального меню с размытием неактивных пунктов с использованием CSS».

Свойство тени текста полностью поддерживается во всех современных версиях браузеров без необходимости в добавлении приставок производителей. Оно поддерживается и браузером Internet Explorer версии 10, но не более ранними версиями.

Основной синтаксис очень понятный:

text-shadow: горизонтальное смещение  вертикальное смещение размытие  цвет;

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

h1 {
        color: black;
        text-shadow: 0 4px 2px rgba(0, 0, 0, 0.3);
        text-align: centre;
        letter-spacing: .1em;
        text-align: center;
        font-family: Highway, sans-serif;
        background: #fffdff;
        width: 10em;
        padding: .5em;
        border: 5px double #222;
        background-image: url('assets/images/excelsior-logo.jpg');
        background-repeat: no-repeat;
        background-position: centre;
}
h1 span {
        text-transform: uppercase;
        display: block;
        font-size: .8em;
}

Применяемый для следующей разметки:

<h1> ExcelsioR <span>Corporation</span></h1>

HTML:

Советы для создания реалистичных теней текста

• Тень никогда не бывает полностью черной, если Вы не на сцене или не на поверхности Луны: в реальном мире окружающее освещение и отраженный свет от других источников сделают тень немного прозрачной. Многие начинающие дизайнеры делают тени слишком сплошными и жирными, по-настоящему тени обычно узкие, с прозрачностью около 30%. Значения цвета, заданные в rgba или hsla, очень хорошо для этого подходят, так как цвета теней из этих цветовых моделей подстроятся под изменения цветов фона.

• Подобным образом у теней почти никогда не бывает идеально четких краев. Добавление нескольких пикселей размытия сделает тени гораздо более реалистичными.

• Так как обычно используются очень маленькие значения, значения для размытия и отступов задаются в пикселях, хотя другие единицы измерений CSS тоже поддерживаются.

• Тонкие шрифты будут отбрасывать тонкие тени. Буква, отбрасывающая тень больше своего размера, что создается с помощью большого значения размытия у свойства тени, предполагает, что подразумеваемый источник света расположен очень близко к ней, что не очень реалистично в большинстве случаев. Увеличение толщины шрифта обычно является предпочтительным вариантом в такой ситуации. Очень черные и готические шрифты обычно особо хорошо смотрятся.

• Так как большинство из нас живет на планете Земля, мы ожидаем, что наиболее распространенный источник света, Солнце, находится над нами и тень, создаваемая его светом, падает вниз. Можно задать отрицательные значения вертикальному смещению свойства тени текста, но это, как правило, создает пугающий эффект подсветки снизу.

• Можно создать несколько теней текста у элемента, что показано в вышеупомянутом уроке «Создание горизонтального меню с размытием неактивных пунктов с использованием CSS», но обычно этого не следует делать.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Красивые таблицы с помощью шрифтов формата OpenType
• Создание изогнутых теней элементов HTML
• Создание изогнутых теней с использованием только CSS