Записки лондонского фрилансера

Объемные буквы без Фотошопа (letterpress effect)

Рубрики: Баннеры, Верстка, Дизайн

Буквально вчера наткнулась на интересную информацию – как на веб-сайте сделать буквы объемными. Причем не делая их картинкой в Фотошопе .

Автор статьи, в которой описана данная функция (http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow), называет этот эффект letterpress effect.

Полезность очевидна – заголовки постов или разделов сайта можно сделать красивее и заметнее, при этом текст остается текстом и доступен поисковикам. Да и Фотошоп лишний раз запускать не надо.

Минус – не все браузеры поддерживают CSS3, в котором есть необходимая опция text-shadow. Зато плюс – Safari и Firefox (3.1+) поддерживают эту опцию, а Firefox становится все более и более популярным браузером (в то время как Эксплорер сдает свои позиции).

Чтобы сделать буквы объемными, им надо добавить тени. Чтобы сделать тени, используется стиль text-shadow:

Тень описывается 4 параметрами: x-offset, y-offset, blur и цвет тени. Можно задать цвет тени темнее цвета букв, тогда в результате получаем выпуклые буквы (“Line 25″ на вышеприведенной картинке).

Для получения  letterpress эффекта тень должна быть немного светлее, чем текст. В данном случае (первый имидж в этом посте, темный текст) использованы #555555 для тени и более темный  #222222 для текста:

color: #222;
text-shadow: 0px 2px 3px #555;

Для тех, кому нужна работа в москве – сайт job.ru. Поиск вакансий, подписка на новые вакансии, советы по составлению резюме. Подробная информация о ярмарках вакансий в Москве. Если вам нужен работник – разместите объявление бесплатно за 3 минуты.