Тень для текста (кроссбраузерное решение)

Дата публикации: 24.01.2010

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

Тени в меню на apple.com

Будет полезным иметь в своем арсенале приемов навыки работы с тенями для текста.

Задача

Сделать тень для текста средствами CSS, без использования картинок. Чего мы этим добьемся?

гибкость — без использования картинок, текст легко менять
скорость — меньше картинок — меньше вес страницы, меньше обращений к серверу
SEO — текст лучше картинок оптимизируется, и надежней, чем использование техники замены текста картинкой

Текстовые тени для нормальных браузеров

Под нормальные браузеры попали все современные браузеры, которые шагают более-менее в ногу с рекомендациями W3C. В данном случае, эти браузеры понимают CSS3 свойство text-shadow, которое было рекомендовано еще в далеком 2003 году.

Итак, перечень браузеров, которые поддерживают свойство text-shadow:

Safari 3.1 (Mac/Win) — поддерживает, не поддерживаются множественные тени
Safari 4 (Mac/Win) — поддерживает полностью
Opera 9.5+ (Mac/Win/Lin) — поддерживает полностью
Firefox 3.1/3.5 (Mac/Win/Lin) — поддерживает полностью
Google Chrome 2 (Win) — поддерживает полностью
Shiira (Mac) — поддерживает, не поддерживаются множественные тени
Konqueror (Lin/Mac/Win) — поддерживает полностью
iCab (Mac) — поддерживает, не поддерживаются множественные тени
Safari on iPhone — поддерживает, не поддерживаются множественные тени
Nokia Symbian-Smartphones (Series 60) — поддерживает
Opera Mini 4.1 — поддерживает, не поддерживает размытость тени

Для этих браузеров, чтобы сделать тень тексту достаточно одной строки в CSS:

h1 {
	text-shadow: 0px 1px 3px #000;
}

Получим вот такой модный заголовок:

заголовок с тенью

Подробный синтаксис смотри в описании CSS свойства text-shadow.

С помощью text-shadow можно добиться различных интересных эффектов.

Размытый текст

h1 {
	color: #fff;
	background: #666;
	text-shadow: 0px 0px 3px #fff;
}

размытый заголовок

Дублирование текста

h1 {
	text-shadow: 0px 20px #000;
}

продублированный заголовок

Множественные тени позволяют добиться еще нескольких эффектов:

Вдавленный текст

h1 {
	background: #ccc;
	color: #ccc;
	text-shadow: -1px -1px #666, 1px 1px #FFF;
	font-family: serif;
}

вдавленный текст

Выпуклый текст

h1 {
	background: #999;
	color: #999;
	text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;
	font-family: serif;
}

выпуклый текст

Посмотреть примеры в живую (IE тут не позволит насладиться красотой, т.к. не поддерживает text-shadow). Придумать различных эффектов с помощью text-shadow можно еще массу, единственное практически ограничение — твоя фантазия.

Теперь о грустном — что делать с горячо всеми «любимым» IE?

Текстовые тени в IE

Хотя IE вплоть до 8-й версии не понимает text-shadow, у него хватает своих «примочек». В частности для создания теней есть фильтр dropShadow (подробное описание фильтра dropShadow). Чтобы тени появились, у элемента должен быть установлен layout. Устанавить можно несколькими способами:

задав элементу свойства display: block + высоту(height) или ширину (width))
задав элементу position: absolute
задав float: left/right
задав zoom: 1

h1 {
	filter:progid:DXImageTransform.Microsoft.DropShadow(color="#666666",offX=2,offY=2,positive="true");
	zoom: 1;
}

Казалось, что можно кричать «Ура!!!» и радоваться жизни, но посмотри, как этот фильтр в реальности работает:

вот так отобразится текст, если к нему применить фильтр dropShadow

Для тех кто не понял, по пуктам недостаки этого фильтра:

тень выглядит ужасно: угловатая, нет плавного, с полупрозрачностью перехода в фон
искажается начертание шрифта
тень практически не поддается регулированию (управлять можно только положением тени) — это можно частично обойти применив фильтр shadow вместо dropShadow, но критичные первые два недостатка остаются
обязательное наличие layout несколько ограничивает разработчика

Такой результат не приемлем в реальных проектах. Непонятно кто и как принял такую работу у разработчиков.

Kilian Valkhof предложил использовать эмуляцию тени:

не примнть фильтр непосредственно к тексту
использовать вместо dropShadow и shadow комбинацию фильров glow и blur

Это позволит избежать искажения текста и сделать тень более гибкой.

<h1>Тестовый заголовок <!--[if IE]><span>Тестовый заголовок</span><![endif]--></h1>

h1 {
	text-shadow: 3px 3px 3px #cccccc;
	position: relative;
	zoom: 1;
	color: #000;
}
h1 span {
	position: absolute;
	left: -3px;
	top: -3px; 
	z-index: -1;
	filter:
		progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1)
		progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled='true')
	;
	zoom: 1;
}

результат эмуляции тени для IE (проверить самому на живом примере)

Но даже с таким подходом, все равно остается ряд недостатков:

несемантический код — лишний элемент, да еще и с дублированием текста скажется не лучшим образом на логичной структурности содержимого, СЕО оптимизации. Эту проблему можено решить с помощью javascript, который будет вставлять для IE дополнительный элемент при загрузке страницы
не соотвествие отображению в других браузерах (которые понимают text-shadow) — фильтры позволяют проэмулировать тень, с минимальными настройками. Схожести тени с другими браузерами далеко не всегда получиться добиться
меньшая гибкость — фильтры не дадут всех возможностей text-shadow, например не получится реализовать множественные тени

Для создания теней для IE можно воспользоваться javascript (не в первый раз javascript спасает)

Тени для текста с помощью javascript

Из скриптов, что протестировал, для себя остановился на плагине для jquery «Drop Shadow». Его достоинства:

эмулирует тени с помощью вставки множества контенйнеров, т.е. без использования фильтров для IE. Это дает возможность сделать максимально схожими тени в IE с другими браузерами + нет нужды беспокоится о layout для IE
создает тени не только для IE, что иногда может быть полезно
малый вес скрипта — 4Kb (если удалить комментарии из кода), а если применить сжатие, еще меньше будет. В писаниии скрипта есть требовани — наличие скрипта jquery.dimensions.js, но я так и не понял зачем он. Тени создаются, удаляются, определеяются id и без него.
прост и понятен в использовании
можно с некоторым успехом проэмулировать множественные тени

Недостатки:

нельзя инициализировать скрипт по id элемента
если элементу задан фон, тень будет создана не для текста, а для элемента в целом
обязательное подключение библиотеки jquery (а это более 50Kb). Но популярность jquery практически ниверлирует этот недостаток
по опсианию скрипта так же требуется подключение jquery.dimensions.js (еще 2Kb). Но не понял зачем эта библиотека, вроде и без нее все нормально работает

Применение плагина Drop Shadow

Синтаксис:

jQuery(selector).dropShadow(options); // создание тени у элемента
jQuery(selector).redrawShadow();  // перерисовка тени
jQuery(selector).removeShadow(); // удаление тени
jQuery(selector).shadowId(); // возвращает id тени элемента

Опции:

left   : [целое число] (по умолчанию = 4) 
top    : [целое число] (по умолчанию = 4) 
blur   : [целое число] (по умолчанию = 2)
opacity: [дробное число] (по умолчанию = 0.5)
color  : [строка] (по умолчанию = "black")
swap   : [логическое значение] (по умолчанию = false)

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

Blur определяет размер, дисперсию тени. Нормльная тень будет при значениях 1 или 2. При больших значения тень будет размытая (не желетльно использовать такие значения, т.к. влияет на скорость работы скрипта.

Opacity задает степень прозрачности. В основном изменять значение по умочанию стоит когда хочется добиться необычного отображения тени.

Color — имя или шестнадцатиричный код цвета тени.

Swap &mdahs; инвесия цветов основного текста и тени. В описании написано, что этот парметр предназанчен для особых эффектов, вроде рельефной или гравированной надписи…но я не въехал как можно такого добиться, с помощью этого праметра.

Пример:

<script type="text/javascript" src="path-to/jquery.js"></script>
<!--[if IE]>
<script type="text/javascript" src="path-to/jquery.dropshadow.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery(".shadowsIE").dropShadow({color:"#000",left:1,top:2});
});
</script>
<![endif]-->

Выводы об использовании теней для текста в реальных проектах

Тени для текста уже сейчас применять можно, но следует помнить об IE, который не так хорошо с ними дружит. Для IE есть два вараинта решения:

закрывать глаза на неполное соотвествие дизайна теней в IE
добиваться требуемого результата с помощью javascript

На каком варианте остановиться команде разработчиков и заказчику — дело сугубо индивидуальное. Мое мнение — не следует из-за IE отказываться от прекрасных новых возможностей.

Материалы

Теги: тени, оформление текста, типографика

Верстальщику о шрифтах. Часть II : Соответствия шрифтов Windows, Mac и Unix/Linux