Ещё в версии CSS2.1 появилась возможность создавать эффект тени у текста с помощью свойства text-shadow. Но на тот момент практически ни один браузер его не поддерживал. И только с активным внедрением поддержки CSS3 эту тень у текста научились отображать практически все современные браузеры. Кроме Internet Explorer’а, который даже в 9-й версии (последней на данный момент) этого не умеет.

Вот формат параметров свойства: text-shadow: x y z  color, x y z  color, …; где x и y – смещение тени в пикселях по горизонтальной и вертикальной оси соответственно, z – радиус размытия тени, color – цвет тени. К тексту можно применить сразу несколько эффектов тени, указывая параметры через запятую. Это позволяет, комбинируя тени разного цвета, с разным смещением, добиваться эффектов трёхмерности текста, вдавленности, свечения и других. Для наглядного представления некоторых возможностей применения text-shadow и эффектов, которые можно с его помощью получить, я подготовил страничку с несколькими примерами. Пример 1 демонстрирует простейший вариант его применения: 

#text1{

 ...
 text-shadow:0px 0px 12px black;
 ...
}

Здесь никакого смещения по осям не задано, получается тень прямо под текстом.

Второй пример чуть поинтереснее:

#text2{

 ...

 left: 0%;
 text-shadow:10px 10px 20px black;
 -webkit-transition: 300ms linear 0s;
 -moz-transition: 300ms linear 0s;
 -o-transition: 300ms linear 0s;
 transition: 300ms linear 0s;
}
#text2:hover {

 left: 1%;
 text-shadow:3px 3px 5px black;
}

Здесь мы задаём изначально большое смещение и большое размытие тени. Тогда кажется, что текст висит высоко над поверхностью страницы. Применяя псевдоселектор “:hover” мы изменяем, при наведении курсора мышки на текст, его параметры: сдвигаем текст влево на 1%, (изначально было 0%), и, в соответствии с законами оптики, уменьшаем смещение и размытие тени. Таким образом, у нас создаётся эффект, как будто текст прижимается к поверхности экрана под весом мышки. Для того, чтобы изменение происходило не скачкообразно, а плавно, для объекта #text2 мы задаём CSS3-свойство “transition” с параметрами скорости изменения в миллисекундах, плавности изменения и времени задержки до начала срабатывания.

Пример 3 демонстрирует интересный эффект, который получается при применении text-shadow в сочетании с заданием прозрачного текста через rgba(r,g,b,a), где “r,g,b” компоненты цвета в модели RGB, “a” – задаёт  прозрачность от 0 до 1.

#text3{...
 -webkit-transition: 300ms linear 0s;
 -moz-transition: 300ms linear 0s;
 -o-transition: 300ms linear 0s;
 transition: 300ms linear 0s;
}

#text3:hover{
 color: rgba(150,150,150, 0);
 text-shadow:0px 0px 35px black;
 }

Задавая прозрачный цвет и большую размытость тени, получаем эффект, как будто текст, при наведении мышки на него, размывается в пространстве и превращается в “облако”. Можно было бы просто написать  ”color: transparent”, но браузер Opera не совсем корректно обрабатывает такой вариант задания свойства и текст после размытия исчезает полностью вместе с “облаком”.

В примере 4 показано, как использовать text-shadow для получения glow-эффекта, т.е., говоря по-русски, свечения.

#text4{

 width: 500px;
 position: absolute;

 background-color: darkblue;

 -webkit-transition: 300ms linear 0s;
 -moz-transition: 300ms linear 0s;
 -o-transition: 300ms linear 0s;
 transition: 300ms linear 0s;
}
#text4:hover {

 text-shadow:0px 0px 15px #3399ff, 0px 0px 35px #99ffff;
}

Здесь мы просто задаём цвет тени такой же или близкий к цвету текста. Для усиления эффекта задаём двойную тень, а фон делаем темным.

Самый интересный пример 5-й. В нём мы сочетаем эффект text-shadow с возможностями JQuery и плагина Lettering.js. Этот плагин по умолчанию (т.е. без задания каких-либо параметров) разбивает заданный ему текст на отдельные буквы и внедряет их вместо оригинального текста в изначальный объект в виде дочерних <span>-объектов. Причём, каждая буква получает класс “.char#”, где “#” – номер буквы по порядку. Это позволяет манипулировать отдельными буквами как в таблице стилей, так и с помощью JavaScript. Итак, для начала скачиваем плагин Letterin.js отсюда и подключаем JQuery и его.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.lettering.js"></script>

JQuery можно скачать, а можно подключить из хостинга JS-библиотек Google (как в примере) или Яндекса. Далее простейший скипт, передающий плагину lettering.js нужный селектор, в данном случае id:

<script type="text/javascript" >

 $('#text5').lettering();

</script>

Ну а теперь в таблице стилей для всех получившихся в результате работы плагина элементов <span>, дочерних для элемента “#text5″, настраиваем такой же эффект, как в примере 3. Только меняем цвет размывающей тени и скорость изменения состояния:

#text5 span{

 -webkit-transition: 100ms linear 0s;
 -moz-transition: 100ms linear 0s;
 -o-transition: 100ms linear 0s;
 transition: 100ms linear 0s;
}

#text5 span:hover{
 color: rgba(102,204,255, 0);
 text-shadow:0px 0px 35px #3399ff;

}

 

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

Popularity: 1% [?]

Share|