14:24 

Скрытые возможности text-shadow

DoomedSoul
This will destroy you... Quiet

Скрытые возможности text-shadow





Скрытые возможности text-shadow


Не удержался и решил перепостить сюда ссылку из своего твиттера (присоединяйтесь, иногда, делюсь полезностями) на интересный пример использования 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;
}


Удачи в освоении!




@темы: css: html, IT, Дизайн

URL
Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

This will destroy you... Quiet

главная