Скрытые возможности text-shadow
Суббота, 8 января 2011
Не удержался и решил перепостить сюда ссылку из своего твиттера (присоединяйтесь, иногда, делюсь полезностями) на интересный пример использования 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; }
Удачи в освоении!
* * *
Постовой:
Установите себе в подпись красивые юзербары.
* * *
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:
* * *
Вдавленный текст очень натурален и органичен. Возьму на вооружение, если не против ;)
Я только за ;)
Про эмуляцию тени от текста в IE через фильтры отлично написано в статье в техногрете: Использование фильтров в IE.
Во всей это красоте есть один минус — достаточно серьезная нагрузка на процессор, особенно в случае анимации которая будет затрагивать текст с такими эффектами, о чем прекрасно написал г-н Чикуёнок в Истории одной оптимизации.
Но, в любом случае спасибо, вдавленный, с обводкой и неоновый очень хороши.
Неоновый классный. :)
Правильно и сделал что перепостил сюда ссылку. Информация на мой взгляд очень оказалась полезной. Если ты не возражаешь я использую текст
Очень понравился вдавливающийся текст и неоновый, думаю поставлю себе...
Ещё раз огромное спасибо.
огромное спасибо! замечательные стили!
Да, вдавленный текст смотрится солидно. Тоже возьму на вооружение. Еще неплохо анаглиф смотрится. В скором времени все меньше и меньше реальной графики будет и все больше заменять будут на CSS
эффект вдавленного текста — понравилось...сообщу верстальщику о таких хитрых приемах. Спасибо.
Интересно, спасибо. Правда, мне как-то привычнее это делать старым методом через картинку в фотошопе, но это тоже надо будет как-нибудь попробовать.
Стили действительно интересные, но всё должно находится в руках профессионалов, имхо. Мне хоть фотошоп дай, хоть карандаш с листком бумаги, ничего путного не выйдет.
Выглядит просто замечательно. Жаль, что в ИЕ не работает.
Для IE можно подсунуть что-нибудь попроще с помощью filter: glow или filter: dropshadow. Не многослойные тени, конечно, но так всё же лучше, чем совсем ничего.
не страшно, так как, наблюдая статистику своего сайта, я вижу, что с ИЕ приходит ну очень, очень мало людей
Классно. На своих сайтах тоже использую CSS3. Вот теперь благодаря автору кое-что новое узнал и буду использовать. Выглядит потрясно, особенно вдавленный и выдавленный текст
Только вот незадача, один всем известный недобраузер (даже в 9-й версии) всю эту красоту не отображает.