Буквально вчера наткнулась на интересную информацию – как на веб-сайте сделать буквы объемными. Причем не делая их картинкой в Фотошопе :).
Автор статьи, в которой описана данная функция (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 минуты.
Это радует! Скоро и новая версия ИЕ тоже будет css3 поддерживать.
да штука хорошая – красиво и главное доступно для индексации поисковиками, теперь откажемся от картинок в виде символов:)