Типографика является самой любимой игрушкой веб дизайнеров. CSS имеет в своем составе один очень интересный инструмент - text-shadow
(тень текста), который на первый взгляд кажется достаточно
простым, но с его помощью можно создать запоминающиеся эффекты,
если подключить изобретательность и воображение.
Основы использования теней
Свойство text-shadow очень просто использовать. Оно
поддерживается всеми современными браузерами и даже без
использования префиксов. Но поддержка в IE (даже в IE9)
отсутствует. Можно использовать инструменты, например, Modernizr, которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.
Синтаксис
Для создания тени текста используется синтаксис свойства text-shadow,
который приводится ниже. Нужно определить четыре параметра:
первые два задают положение тени, третий устанавливает уровень
размытия, а четвертый определяет цвет тени.
Ниже приводится пример тени текста, которая смещена на два
пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и
имеет черный цвет с уровнем непрозрачности 30%.
1
text-shadow: 2px4px3pxrgba(0,0,0,0.3);
Результат использования данного свойства будет выглядеть следующим образом:
Почему используется rgba?
Вам не обязательно использовать rgba для задания цвета тени при определении свойства. Однако, rgba добавляет еще одну размерность при определении тени - уровень прозрачности.
Данный метод существенно проще, чем другие способы определения
цвета. Вам не надо акцентировать внимание на определении оттенка
цвета тени, который может быть лишь немного темнее или светлее
цвета фона. С rgba вы
можете просто использовать белый или черный цвета и увеличить их
прозрачность, чтобы добиться нужного оттенка фона при смешении
красок.
Вдавленный текст
С помощью свойства text-shadow можно создавать
различные эффекты для текста, не ограничиваясь простыми падающими
тенями. Например, здесь приводится код для формирования иллюзии
вдавленного текста.
Сначала нужно установить цвет текста немного темнее, чем цвет фона. А затем надо использовать свойство text-shadow с белым цветом и увеличенной прозрачностью.
Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%.
Белая тень позиционируется немного вниз и вправо с уровнем
непрозрачности 10%.
1
body {
2
background: #222;
3
}
4
5
#text h1{
6
color: rgba(0,0,0,0.6);
7
text-shadow: 2px2px3pxrgba(255,255,255,0.1);
8
}
Четкая тень
Совсем необязательно размывать тень. Четкая тень может отлично сочетаться с дизайном сайта.
1
text-shadow: 6px6px0pxrgba(0,0,0,0.2);
Двойная тень
Настоящее веселье начинается, когда вы отринете прочь ограничение
наличия только одной тени. Используя запятую для разделения
определений вы можете использовать столько теней, сколько нужно!
1
text-shadow: shadow1, shadow2, shadow3;
Вот пример использования двух теней. Первая имеет тот же цвет, что и фон.
Как только вы освоите использование нескольких теней, результат
будет все более и более выразительным. Очень просто создать 3D
эффект для текста.
В примере используется четыре тени, все смещены вниз на разные дистанции и размыты.
1
text-shadow: 0px3px0px#b2a98f,
2
0px14px10pxrgba(0,0,0,0.15),
3
0px24px2pxrgba(0,0,0,0.1),
4
0px34px30pxrgba(0,0,0,0.1);
Смещение вниз на небольшое расстояние и сильное размытие
Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.
1
text-shadow: 0px4px3pxrgba(0,0,0,0.4),
2
0px8px13pxrgba(0,0,0,0.1),
3
0px18px23pxrgba(0,0,0,0.1);
3D текст от Mark Dotto
Эффект используется на сайте MarkDotto.com. В нем используется 12 различных теней для создания отличного эффекта 3D.
01
text-shadow: 01px0#ccc,
02
02px0#c9c9c9,
03
03px0#bbb,
04
04px0#b9b9b9,
05
05px0#aaa,
06
06px1pxrgba(0,0,0,.1),
07
005pxrgba(0,0,0,.1),
08
01px3pxrgba(0,0,0,.3),
09
03px5pxrgba(0,0,0,.2),
10
05px10pxrgba(0,0,0,.25),
11
010px10pxrgba(0,0,0,.2),
12
020px20pxrgba(0,0,0,.15);
Вдавленный текст от Gordon Hall
Notice in the example above I called my technique the "quick and
dirty” letterpress effect. That’s because there’s a much more
involved way to create some seriously inset text that’s much more
believable.
Gordon uses some serious CSS voodoo to pull off not only an outer
shadow but a genuine inner shadow as well. Check out his blog post for a full explanation of the technique.
1
background-color: #666666;
2
-webkit-background-clip: text;
3
-moz-background-clip: text;
4
background-clip: text;
5
color: transparent;
6
text-shadow: rgba(255,255,255,0.5) 0px3px3px;
Свечение
1
text-shadow: 0px0px6pxrgba(255,255,255,0.7);
Супергерой
1
text-shadow: -10px10px0px#00e6e6,
2
-20px20px0px#01cccc,
3
-30px30px0px#00bdbd;
Множественные источники света
1
text-shadow: 0px15px5pxrgba(0,0,0,0.1),
2
10px20px5pxrgba(0,0,0,0.05),
3
-10px20px5pxrgba(0,0,0,0.05);
Мягкое тиснение
1
color: rgba(0,0,0,0.6);
2
text-shadow: 2px8px6pxrgba(0,0,0,0.2),
3
0px-5px35pxrgba(255,255,255,0.3);
Заключение
Как и большинство эффектов CSS, тени очень легко реализовать. Но
сочетание простых действий могут в результате привести к
поразительным эффектам.