Создание теней, отбрасываемых текстом, с помощью CSS3

Одно из наиболее широко реализованных CSS3-свойств называется text-shadow. Как и @font-face, оно поддерживалось в версии CSS2, но затем было исключено из версии CSS 2.1. К счастью, оно снова вернулось и широко поддерживается (всеми современными браузерами и Internet Explorer версии 9 и выше).

Взглянем на базовый синтаксис:

.элемент {

Text-shadow: 1px 1px 1px #cccccc;

}

Помните, что значения в сокращенных правилах всегда обеспечивают тень, которая будет располагаться правее и ниже текста. Следовательно, первое значение — это величина смещения тени вправо от текста, второе — количество пикселов, на которое тень будет смещена вниз относительно текста, третье — радиус размытия (расстояние, на которое будет простираться тень, прежде чем совсем исчезнуть), а последнее значение — цвет тени.

Допустимые шестнадцатеричные, HSL-и RGB-значения цветов.

Значение цвета не обязательно должно быть определено как шестнадцатеричное. Это также может быть значение HSL(A) или RGB(A):

Text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4);

Однако имейте в виду, что в таком случае браузер должен также поддерживать цветовые режимы HSL/RGB наряду со свойством text-shadow, чтобы обеспечить визуализацию соответствующего эффекта. Если бы мне потребовалось использовать HSLA или RGBA (благодаря совместимости с непрозрачностью), то я бы написал следующее:

Text-shadow: 4px 4px 0px #404442; text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4);

Сначала определите тень в виде шестнадцатеричного значения (в качестве резервного варианта для устаревших браузеров), а затем продублируйте правило, но уже с использованием значения HSLA или RGBA.

Пикселы, единицы em или rem.

Вы также можете задавать значения для text-shadow в единицах em или rem. Вот, например, композиция сайта And the winner isn’t.

Страница сайта And the winner isn’t.

В Photoshop текст EVERY YEAR занимает в ширину 102 пиксела, а величина его тени равна 4 пикселам. Следовательно, используя нашу проверенную формулу ширина цели x ширина контекста = результат (4 x 102 = 0,039215686), мы получим следующее:

Text-shadow: .039215686em.039215686em 0em #dad7d7; /* 4×102 */

У заголовка появилась тень.

Я часто устанавливаю значения для text-shadow в единицах em или rem. Поскольку значения всегда очень маленькие, присвоение 1px или 2px, как правило, приводит к тому, что итоговый результат хорошо смотрится во всех областях просмотра.

Предотвращение отбрасывания текстом тени.

В зависимости от того, какое у вас зрение, вы, возможно, заметили, что теперь у нас также появилась тень у текста во втором предложении WHEN I WATCH THE OSCARS I’M ANNOYED («Когда я смотрю церемонию вручения премий “Оскар”, меня возмущает.»). И вот причина этого:

<h1>Every year <em>when I watch the Oscars I’m annoyed…</em></h1>

На текущий момент text-shadow применяется ко всему тегу <h1> (который включает в себя тег <em>), поэтому нам необходимо удалить text-shadow из тега <em>):

#content h1 em {

Font-family: ‘BitstreamVeraSansRoman’; display: block;

Line-height: 1.052631579em; /* 40×38 */ color: #757474;

Font-size: .352941176em; /* 36×102 */ text-shadow: none;

}

Теперь соответствующий текст выглядит как надо.

Тень осталась только для текста EVERY YEAR.

Тени слева и вверху текста. Тени слева или вверху текста можно установить, задав отрицательные значения. Например:

Text-shadow: -4px -4px 0px #dad7d7;

Тень теперь расположена левее и выше заголовка

Если для отбрасываемой текстом тени не будет задаваться размытие, то соответствующее значение можно не включать в объявление, например:

Этот код приведет к следующему результату.

Text-shadow: -4px -4px #dad7d7;

Согласно спецификации первые два значения являются величинами смещения, если не объявлено третье значение.

Создание эффекта рельефного текста.

Я всегда считал, что свойство text-shadow наилучшим образом подходит для создания эффекта рельефного текста. Этот эффект обычно лучше всего работает при использовании яркого цвета (например, белого или близкого к нему), примененного к темному тексту на цветном фоне. Добавим эффект рельефного текста для навигационных ссылок:

Nav ul li a { height: 42px; line-height: 42px; text-decoration: none; text-transform: uppercase; font-family: ‘BebasNeueRegular’; font-size: 1.875em; /*30×16 */ color: #000000;

Text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75);

}

На рисунке показан результат. Едва уловимый, но эффектный — всего лишь добавилось немного глубины.

Эффект рельефного текста для ссылок.

СОВЕТ.

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

Создание качественного и функционального сайта — работа весьма кропотливая и требующая не только навыков, но и опыта, потому если речь идет о создании сайта для бизнеса — целесообразно делегировать создание сайтов в Алматы профессионалам.

Множественные тени, отбрасываемые текстом.

Текст можно снабдить множественными тенями, разделив запятыми два значения. Например:

Text-shadow: 0px 1px #ffffff,4px 4px 0px #dad7d7;

Как и всегда, действовать нужно деликатно, иначе шрифт может стать неудобочитаемым. Я собираюсь использовать это объявление для комбинирования приводившегося ранее эффекта рельефного текста с уже имеющимся эффектом отбрасываемой текстом тени. На рисунке показано, как результат будет выглядеть в браузере.

Для заголовка установлена множественная тень

>> ПРИМЕЧАНИЕ.

Прочесть спецификацию W3C свойства text-shadow можно по следующему адресу: http:// www.w3.org/TR/css3-text/#text-shadow.