Xiper

Тень для текста

Автор: Евгений Рыжков Дата публикации:

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

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

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

Задача

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

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

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

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

Итак, перечень браузеров, которые поддерживают свойство 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 в действии вот так отобразится текст, если к нему применить фильтр dropShadow

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

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

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

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

  1. не применять фильтр непосредственно к тексту
  2. использовать вместо 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 результат эмуляции тени для 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]-->
  • скачать jquery
  • скачать jquery.dropshadow.js
  • скачать jquery.dimensions.min.js

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

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

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

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

Материалы

  • Text-shadow
  • MSDN :: DropShadow Filter
  • Интересные примеры применения text-shadow
  • Text-Shadow Exposed: Make cool and clever text typographics with css text-shadow
  • (Almost) Cross browser text-shadow
  • Плагин для ff 2.0-3.0 для поддержки свойства text-shadow