Объемные буквы без Фотошопа (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:

text shadow

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

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

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

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

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

  1. Pozitive August 26, 2009 at 19:35

    Это радует! Скоро и новая версия ИЕ тоже будет css3 поддерживать.

  2. работа April 8, 2010 at 12:22

    да штука хорошая – красиво и главное доступно для индексации поисковиками, теперь откажемся от картинок в виде символов:)

Leave a Reply

Name
Email
Website