
Не удержался и решил перепостить сюда ссылку из своего твиттера (присоединяйтесь, иногда, делюсь полезностями) на интересный пример использования text-shadow
. То, что нарисовано на картинке к посту в живую можно посмотреть здесь.
Помимо того, что здесь не используется никакой дополнительной разметки (типа :before
и :after
), особо внимательные дизайнеры могут заметить, что у текста есть не только «объём» (в коде, строки параметров 1-5), но и тень (остальные строки, с указанием цвета через RGBA, что позволяет делать слои-тени прозрачными) .
В принципе, весь код изложен на той же странице. Суть подхода — многократное повторение параметровtext-shadow
через запятую. При этом первый параметр указывается для тени «первого слоя», второй — слоя ниже и т.д. (Для тех, кто вообще не в курсе, как работает text-shadow
— читайте).
читать дальшеВыглядит потрясающе, реализуется просто. Можно использовать в меню, кнопках, заголовках и везде, где придумается.
Работает во всех современных браузерах, кроме IE (неожиданно, правда? 
Кроме того, как пишут здесь, подобный многослойный подход можно использовать и в box-shadow
.
Развитие
А вот что получилось у меня в манипуляциях с тенями, примерно, за полчаса потраченного времени. Уверен, что добавив градиенты и прочие продвинутые CSS3-штуки, можно добиться более впечатляющих результатов.
Слегка доработанный эффект вдавленного текста (за счёт добавления верхней тени выглядит естественнее, чем растиражированные в сети примеры):
Inset Text
.inset {
font-size: 72px;
color: #666;
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
Наоборот, выдавленный текст:
Outset Text
.outset {
font-size: 72px;
font-weight: bold;
color: #666;
text-shadow: -2px -2px 2px #fff, -2px 0 2px #fff,
0 -2px 2px #fff, 2px 2px 2px #000,
0px 2px 2px #000, 2px 0 2px #000;
}
Радужная тень:
Rainbow
.rainbow {
font-size: 72px;
font-weight: bold;
color: rgba(0, 0, 0, 0); /* сам текст невидим */
text-shadow: 3px 0 0 #d91f26, 6px 0 0 #e25b0e,
9px 0 0 #f5dd08, 12px 0 0 #059444,
15px 0 0 #0287ce, 18px 0 0 #044d91,
21px 0 0 #2a1571;
}
Текст с обводкой:
Stroke
.stroke {
font-size: 72px;
font-weight: bold;
color: #999;
text-shadow: 1px 1px 0 #e47e0f, -1px -1px 0 #e47e0f,
1px -1px 0 #e47e0f, -1px 1px 0 #e47e0f;
}
Неоновый текст:
Neon Text
.neon {
background: #000;
font-size: 72px;
font-weight: bold;
color: #407ec4;
text-shadow: 1px 1px 0 #4da2fc, -1px -1px 0 #4da2fc,
1px -1px 0 #4da2fc, -1px 1px 0 #4da2fc,
4px 4px 8px #2c5889, -4px 4px 8px #2c5889,
4px -4px 8px #2c5889, -4px -4px 8px #2c5889;
}
Такой модный сейчас анаглиф:
3D Anaglyph
.ananglyph {
font-size: 72px;
color: #333;
text-shadow: -4px 0 1px #1ef2f1, 4px 0 1px #f6050a;
}
Удачи в освоении!