Что такое text shadow

text-shadow

Краткая информация

Версии CSS

Описание

Синтаксис

text-shadow: none | тень [,тень]*
где тень:

none Отменяет добавление тени. цвет Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр. сдвиг по x Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр. сдвиг по y Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. Обязательный параметр. радиус Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.

Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу. В CSS2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 1. Вид тени в браузере Safari

Браузеры

Opera поддерживает максимум 6–9 параметров тени. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на производительности браузера. Opera версии 9.5–10 использует отображение нескольких теней, как в CSS2.

Safari до версии 4.0 поддерживает только один параметр тени, остальные игнорируются. С версии 4.0 работает уже множество теней.

filter: Shadow(Color=#666666, Direction=45, Strength=4);

Источник

text-shadow

Краткая информация

Версии CSS

Описание

Синтаксис

text-shadow: none | тень [,тень]*
где тень:

none Отменяет добавление тени. цвет Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр. сдвиг по x Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр. сдвиг по y Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. Обязательный параметр. радиус Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.

Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу. В CSS2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 1. Вид тени в браузере Safari

Браузеры

Opera поддерживает максимум 6–9 параметров тени. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на производительности браузера. Opera версии 9.5–10 использует отображение нескольких теней, как в CSS2.

Safari до версии 4.0 поддерживает только один параметр тени, остальные игнорируются. С версии 4.0 работает уже множество теней.

filter: Shadow(Color=#666666, Direction=45, Strength=4);

Источник

Свойство text-shadow

Совсем недавно увидел пост про свойство z-index. Раз пошла такая пьянка, то вставлю и свои пять копеек и расскажу о свойстве text-shadow. Так получилось, что в последнее время мне стали регулярно попадаться сайты, использующие это свойство. Сразу скажу, что под IE любой версии (и IE8 тоже!) читать статью не имеет смысла, так как ослик, к большому сожалению, так и не научился поддерживать свойство, которое было описано еще в 1998 году.

Примечание: Так как Хабр не позволяет в статьях использовать собственные стили, то живые примеры можно смотреть на моей странице.

Итак, в CSS имеется свойство text-shadow для добавления тени на каждую букву текста. На данный момент из современных браузер только IE не поддерживает этот стиль. Само свойство было представлено еще в CSS2, но практически не поддерживалось браузерами. Постепенно ситуация стала менятья к лучшему. На данный момент таблица поддержки браузерами выглядит следующим образом

Как видите, последние версии современных браузеров поддерживают text-shadow. Даже мобильные версии браузеров уже понимают это свойство, хотя и с некоторыми ограничениями.

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

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

В этом примере мы добавляем к заголовку 2 уровня красную тень, которая отбрасывается немного вправо и вниз относительно самого текста. В примере использовались параметры для отступов и цвета тени. Существует также возможность сделать тень размытой. Для этого добавляется еще один необязательный параметр после отступов (обратите внимание, что цвет тени должен указываться либо последним, либо первым). Можно использовать отрицательные значения, чтобы изменить направление тени (влево и вверх). Кстати, браузеры на движке WebKit поддерживают цвет в формате rgba, что позволяет использовать полупрозрачность.

Заголовок с размытой тенью

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

Если вы посмотрите на пример, то увидите, что первую строчку практически невозможно разглядеть, а текст с тенью на второй строчке хорошо читается.

Многослойные тени

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

Создадим на сером фоне два варинта объемного текста.

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

Впрочем, нужно быть осторожным в использовании этих эффектов, так как не все браузеры поддерживают несколько теней. Например, Opera поддерживает до шести теней, а Firefox только одну (только первую, а остальные игнорирует).

Контуры

Используя несколько теней, можно добиться и другого эффекта — создание контуров для букв.

Неоновое свечение

Если создать тень без смещения и размыть ее, то получим эффект неонового свечения.

Использование сценариев JavaScript

Также вы можете использовать свойство text-shadow в сценариях JavaScript. Я не уверен, что на Хабре можно использовать сценарии, поэтому примеры можно посмотреть на моей странице.

Подводя итоги

Учитывая тот факт, что IE не поддерживает свойство text-shadow, многие посчитают его недостойным внимания. Но с другой стороны, пользователи IE не получат ошибку при отображении страницы. Они увидят обычный плоский текст, и когда им скажут, что под другим браузером страница выглядит покруче, то может это заставит их задуматься о смене браузера, а разработчиков M$ заставит призадуматься.

Дополнительная информация

В заключение приведу несколько ссылок для дополнительной информации.
Интересный пример, демонстрирующий свойство text-shadow при помощи сценария.
Stylish text with the CSS text-shadow property (несколько примеров, в т.ч. пример огненного текста).
CSS Text-Shadow in Safari, Opera, Firefox and more — несколько интересных примеров.
Text-Shadow Exposed: Make cool and clever text effects with css text-shadow — еще несколько примеров
Несколько примеров на русском

Источник

CSS свойство text-shadow

Определение и применение

CSS свойство text-shadow добавляет тень к тексту. Допускается добавление нескольких теней к элементу, для этого необходимо добавить дополнительное значение тени, либо теней, разделенных запятыми. Множественные тени наносятся по z-оси спереди назад (с первой заданной тенью сверху).

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
text-shadow	4.0	3.5	9.6	4.0	10.0	12.0

Значения свойства

Версия CSS

Наследуется

Анимируемое

Пример использования

Давайте рассмотрим пример добавления текстовой тени к абзацу (элемент

В этом примере мы для всех азацев (элемент

) установили цвет текста белый, а для текстовой тени (свойство text-shadow) установили значения для расположения горизонтальной и вертикальной тени равными 1 пиксель, а радиус размытия установили равным 4 пикселям.

Кроме того, с использованием псевдоэлемента ::selection задали следующие стили для всех абзацев при выделении текста пользователем: цвет текста черный, цвет заднего фона оранжевый, значения для расположения горизонтальной и вертикальной тени установили равными -1 пиксель (тень сдвигается в противоположную сторону), а радиус размытия установили равным 4 пикселям.

Результат нашего примера:

Рис. 68 Пример использования свойства text-shadow (текстовая тень).

Множественная текстовая тень

Допускается добавление нескольких текстовых теней к элементу, для этого необходимо добавить дополнительное значение тени, либо теней, разделяя их при этом запятыми. Множественные тени наносятся по z-оси спереди назад (с первой заданной тенью сверху).

Пример блока объявлений для множественной тени:

Давайте рассмотрим следующий пример:

В данном примере мы применили множественную тень (8 теней) к первому элементу, установили для него высоту строки 150px (свойство line-height) и задали горизонтальное выравнивание по центру (свойство text-align со значением center ). Для следующих блоков указали как положительное значение для горизонтальной тени, так и отрицательное, благодаря чему тень смещается в левую, а не правую сторону.

Для последнего блока мы установили радиус размытия 6px, а значения горизонтальной и вертикальной тени указали 0px, что придает некий неоновый эффект.

Рис. 68а Пример создания множественной текстовой тени. CSS свойства

Источник

CSS3. Работа с тенями. Часть 2

Продолжаем погружаться в искусство владения тенями в новых модулях CSS3. Прошлый раз мы рассматривали работу с box-shadow, сегодня мы перейдем к text-shadow.

Напомню, что оба правила, хотя и описаны в разных модулях, работают практически идентичным образом, поэтому, если вы уже знакомы с box-shadow по первой части, в этой, второй, части вы увидите много знакомого. И, прежде, чем переходить непосредственно к примерам, давайте сразу разберемся, какие есть различия, чтобы не останавливаться на них далее.

text-shadow vs box-shadow

Если вы вернетесь к разделу про синтаксис box-shadow в первой части, вы найдете такое описание:

Где последнее разворачивается в полном виде в такую конструкцию:

Спецификация CSS3 Text, описывая text-shadow, говорит буквально следующее:

is the same as defined for the ‘box-shadow’ property except that the
‘inset’ keyword is not allowed

В переводе на русский это означает, что для текста невозможны внутренние тени (inset) и синтаксис для text-shadow выглядит следующим образом:

Аналогично box-shadow возможны множественные тени накладываемые поверх друг друга так, что первая тень оказывается наверху. Теперь давайте смотреть, как это все работает.

text-shadow

Сдвиги и цвет

Начнем со сдвигов и работы с цветом. За сдвиги тени отвечают первые два линейных параметра, указывающих длинну (1.1–1.4):

Если вы указываете положительные значения, тень сдвигается влево и вниз (1.1):

Отрицательные значения сдвигают вправо и вверх (1.2):

Аналогично box-shadow, все браузеры, кроме основанных на webkit, если цвет тени явно не задан, берут его из цвета текста (1.1–1.2). Это может быть полезным, например, если вы хотите автоматически делать тень цвета текста, но, например, размытой (см. примеры 2.3 и 2.4). Для явного задания цвета тени достаточно прописать нужное значение в правиле:

Обратите внимание, что при указании цвета полностью применимы возможности CSS3 Color, включая указание уровня прозрачности цвета (alpha) через rgba или hsla.

Размытие

Третий линейный параметр описывает радиус размытия тени (2.1–2.4):

В полном согласии с определением box-shadow, размытие задается некоторым положительным числом — радиусом размытия. Само размытие может осуществляться UA по любому алгоритму с большой точностью аналогичному размытию по Гауссу с половинным радиусом относительно границы тени.

В первых двух примерах (2.1 и 2.2) задан разный радиус размытия:

Во второй паре примеров (2.3 и 2.4) различается только цвет текста и фона, а сами правила задания тени описаны через применяемый к блокам класс blured-shadow:

(Этот пример некорректно работает в Chrome из-за описанных выше нюансов, впрочем спецификация говорит, что пропущенный цвет остается на усмотрение UA.)

Растяжение и сжатие

Четвертый линейный параметр, если он присутствует, отвечает за растяжение или сжатие тени.

Для увеличения тени spray-distance должен быть положительным (3.1):

Для уменьшения — отрицательным (3.2):

Если отступ тени нулевой, ее можно использовать для обводки текста (3.3):

Важная деталь. Насколько мне известно, в настоящий момент (сюрприз!) параметр spray-distance для text-shadow поддерживается только в Internet Explorer 10, а остальные браузеры его не поддерживают (см. например, bug 655590 «[css3-text] Support the spread radius in text-shadow» в Mozilla Bug tracker). Это же верно и в отношении большинства учебников и статей в интернете, которые своевременно не были обновлены вслед за изменениями в спецификации. Поэтому в большинстве примеров, которые вы найдете в сети, вы даже не увидите упоминания возможности растяжения или сжатия тени текста 😉

И еще одна важная деталь. Наличие четвертого параметра сегодня трактуется неподдерживающими его браузерами как неправильное задание тени — в результате эти правила просто игнорируются. Поэтому для обеспечения хоть какого-то уровня совместимости, если вы используете spread-distance, необходимо дублировать правила, например, так:

Если вы все же хотите смоделировать увеличение тени, в определенных пределах это можно сделать через множественные тени, рассматриваемые в следующем разделе (см. примеры 4.6 и 4.7).

Множественные тени

Наконец, аналогично теням для блоков, к тексту также можно применять несколько теней одновременно, добиваясь при этом различных эффектов (4.1–4.5):

Начиная с простейшей дублированной обводки (4.1):

И возможности смещения теней в разные стороны (4.2):

Продолжая эффектами типа неона (4.3):

И немного более изощренным вариантом (4.4)

Или же с ограниченным использованием предыдущего приема перекрытия смещенных теней — небольшое подчеркивание (4.5):

Эмуляция растяжения

Как было сказано в предыдущем разделе, технически множественные тени можно применять для эмулирования увеличения тени. Например, чтобы сделать что-то похожее на (4.6):

Можно было бы применить одновременно несколько теней, сдвинутых в разных направлениях (4.7):

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

Интересные примеры

Теперь давайте рассмотрим еще несколько примеров использования теней для реализации различных интересных эффектов.

Начнем с классической радуги (5.1):

Двойная тень для стрелки (5.2):

Традиционная огненная тень (5.3):

Традиционный «letter-press», — здесь также важен контраст с фоном (5.4):

Не менее традиционный 3d-text (5.5):

Двойная тень для винтажного эффекта (5.6)

Проступающая надпись с прозрачным текстом и сжатой тенью, — также зависит от размера и гарнитуры шрифта (5.7)

Применение отдельной буквы для псевдо-класса ::first-letter (5.8)

Интерактив

Если вы хотите просто поиграться с тенями в интерактивном режиме, наши коллеги к прошедшей в сентябре конференции Build подготовили демонстрационную страницу: «Hands-on: text-shadow».

Internet Exlorer

text-shadow поддерживается в IE10+.

И повторю свой совет относительно использования фильтров: не используйте фильтры вообще, либо продумывайте верстку и стили так, чтобы для IE9+ они не применялись. Стандартные css-эффекты в IE в отличие от старых фильтров, начиная с 9й версии, работают с использованием аппаратного ускорения, к тому же фильтры часто оказываются несочетаемыми с новыми правилами свойствами CSS и их одновременное использование может приводить к неожиданным последствиям.

Источник