CSS3 text-shadow (тень для текста)

CSS3 text-shadow (тень для текста) используется чтобы привлечь внимание к тексту и дать ему глубину и объем. В некоторых случаях изображение с текстом или с цветным фоном, тени могут быть использованы для увеличения контрастности и улучшения читаемости.

Щебетать странице входа в IE9 без текста-тень Тонкие текстовых тень появляется при навигации по щебетать в IE10

В примере с лева текст без тени. В рисунке с левой стороны тонкая тень для текста, где появляется небольшой объем текста.

Никакой текст, тени на сайт автосервиса в IE9 Текст-тень появляется при навигации по веб-сайте Службы авто в IE10

Новые браузеры поддерживают и свойства <shadow> ‘box-shadow’, ‘text-shadow’. Что бы увидеть тень нужно определить четыре параметра:

  1. цвет тени для текста
  2. смещение тени по оси х
  3. смещение тени по оси у
  4. радиус размытия тени


text-shadow: #FFFFFF 0.5px 1px 0;


CSS3 text-shadow

Основное требование тени для текста смещение по оси х :



.shadow1 { color: black; text-shadow: 2px 2px; } 


example of text-shadow: 2px 2px;

Добавить тень для текста:



.shadow2 { color: black; text-shadow: #87CEEB 1px 3px; } 


example of text-shadow: #87CCEB 1px 3px;

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



.shadow3 { color: black; text-shadow: 1px 3px 3px rgba(135, 206, 235, 1); } 


example of text-shadow: 1px 3px 3px rgba(153, 204, 255, 1);

Можно добавить расстояние тени вокруг текста.



.shadow4 { color: black; text-shadow: skyblue 0px 0px 0px 4px; } 


example of text shadow: skyblue 0px 0px 0px 4px;

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



.shadow4_nospread {
   color: black;
   text-shadow:
   skyblue 0px 2px,
   skyblue 2px 0px,
   skyblue -2px 0px,
   skyblue 0px-2px,
   skyblue -1.4px -1.4px,
   skyblue 1.4px 1.4px,
   skyblue 1.4px-1.4px,
   skyblue -1.4px1.4px;
} 


example of multiple shadows used to simulate spread-distance

CSS3 text-shadow (тень для текста) также может быть с красивым эффектом, который невозможно добиться без отрицательных значений:



.shadow5 { text-shadow: 5px 5px 2px -2px #9966CC; } 


example of text-shadow: 5px 5px 2px -2px #9966CC;

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



.shadow6 {
    text-shadow: rgba(255, 255, 255, .5) 1px 1px,yellow 2px 3px, rgba(255, 153, 0, .7) 3px 6px, rgba(255, 0, 0, .5) 4px 8px; } 


example of multiple text shadows on one string

Совместимость с браузерами

В настоящее время CSS3 text-shadow (тень для текста) отображается во всех новых браузерах. Но не все браузеры поддерживают расстояние тени. В CSS3 text-shadow расстояние тени для текста позволяет сделать больше эффектов; темные размытые тени или строгие тени.



.shadow7 {
    color: black;
    text-shadow: #99FFCC 0px 0px 10px; /* for browsers without spread distance */
    text-shadow: #99FFCC 0px 0px 10px 10px; /* for browsers with the full spec */
}


example of a string of text with spread support example of a string of text without spread support

Для старых версий Internet Explorer часто используют фильтры DX ImageTransform. Microsoft. Blur предназначены создать эффекта тени для текста. CSS3 text-shadow (тень для текста) также обеспечивает значительный прирост производительности по сравнению со старыми альтернативами, за счет аппаратного ускорения.

Многие сайты уже используют CSS3 text-shadow (тень для текста).

IE9 example of text-shadow use that has poor fallback IE10 example of text-shadow use that has poor fallback

Если у вас браузер не поддерживает CSS3 text-shadow (тень для текста), используйте функцию обнаружения textshadow.

Функция обнаружения:



if (typeof document.body.style.textShadow == 'undefined') {
// text-shadow is not supported
document.body.style.color = 'black';
}
else {
// text-shadow is supported
document.body.style.color = '#FFFFCC';
document.body.style.textShadow = 'turquoise -2px -2px, black 2px 2px';
}


Пример: CSS3 text-shadow

Используйте тени для текста уже сегодня! Тонкие значения различных параметров могут создать интересные эффекты.
Вот галерея интересных эффектов CSS3 text-shadow (тени для текста):

Заключение

Воспользуйтесь инструментом для создания тени для текста. Смотрите свойство CSS3 text shadow blur , размытие текста, примеры CSS3 Эффекты Текста

Обратите внимание, что можно использовать CSS3 text-shadow (тень для текста) с шрифтами WOFF, и в сочетании с CSS3 переходами и анимации. Попробовать текстовые тень в Internet Explorer 10 вы сможете только в новой Windows 8.

2 комментария на тему “CSS3 text-shadow (тень для текста)”

  1. комментарии

    Тень с анимацией впервые вижу, оригинально! Спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>