Скрытые возможности 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;
}

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

* * *

Постовой:

Установите себе в подпись красивые юзербары.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 20

  1. @ Cuprum, 08.01.2011 в 21:47

    Вдавленный текст очень натурален и органичен. Возьму на вооружение, если не против ;)

    Ответить

  2. Чистяков Денис, 08.01.2011 в 22:26

    Про эмуляцию тени от текста в IE через фильтры отлично написано в статье в техногрете: Использование фильтров в IE.

    Во всей это красоте есть один минус — достаточно серьезная нагрузка на процессор, особенно в случае анимации которая будет затрагивать текст с такими эффектами, о чем прекрасно написал г-н Чикуёнок в Истории одной оптимизации.

    Ответить

    • Чистяков Денис, 08.01.2011 в 22:28

      Но, в любом случае спасибо, вдавленный, с обводкой и неоновый очень хороши.

      Ответить

  3. Jeremy, 17.01.2011 в 12:00

    Неоновый классный. :)

    Ответить

  4. Vitaliy, 19.01.2011 в 12:22

    Правильно и сделал что перепостил сюда ссылку. Информация на мой взгляд очень оказалась полезной. Если ты не возражаешь я использую текст

    Ответить

  5. Сергей, 30.01.2011 в 20:15

    Очень понравился вдавливающийся текст и неоновый, думаю поставлю себе...

    Ещё раз огромное спасибо.

    Ответить

  6. Георгий, 15.02.2011 в 23:01

    огромное спасибо! замечательные стили!

    Ответить

  7. Денис, 11.03.2011 в 17:20

    Да, вдавленный текст смотрится солидно. Тоже возьму на вооружение. Еще неплохо анаглиф смотрится. В скором времени все меньше и меньше реальной графики будет и все больше заменять будут на CSS

    Ответить

  8. vangelder, 13.05.2011 в 18:46

    эффект вдавленного текста — понравилось...сообщу верстальщику о таких хитрых приемах. Спасибо.

    Ответить

  9. Антон Вредов, 04.07.2011 в 12:06

    Интересно, спасибо. Правда, мне как-то привычнее это делать старым методом через картинку в фотошопе, но это тоже надо будет как-нибудь попробовать.

    Ответить

  10. Кот Шрёдингера, 30.07.2011 в 22:48

    Стили действительно интересные, но всё должно находится в руках профессионалов, имхо. Мне хоть фотошоп дай, хоть карандаш с листком бумаги, ничего путного не выйдет.

    Ответить

  11. Роман, 11.09.2011 в 12:19

    Выглядит просто замечательно. Жаль, что в ИЕ не работает.

    Ответить

    • rotor, 11.09.2011 в 18:00

      Для IE можно подсунуть что-нибудь попроще с помощью filter: glow или filter: dropshadow. Не многослойные тени, конечно, но так всё же лучше, чем совсем ничего.

      Ответить

    • Feel, 11.09.2011 в 20:01

      не страшно, так как, наблюдая статистику своего сайта, я вижу, что с ИЕ приходит ну очень, очень мало людей

      Ответить

  12. Роман, 12.09.2011 в 1:52

    Классно. На своих сайтах тоже использую CSS3. Вот теперь благодаря автору кое-что новое узнал и буду использовать. Выглядит потрясно, особенно вдавленный и выдавленный текст

    Ответить

  13. Дмитрий, 03.10.2011 в 13:36

    Только вот незадача, один всем известный недобраузер (даже в 9-й версии) всю эту красоту не отображает.

    Ответить

  14. Скажем прощай oveflow: hidden! | white wind Скажем прощай oveflow: hidden! |, 09.06.2012 в 13:53

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

    Ответить

  15. Программы для экологов, 17.01.2014 в 8:11

    тень — вещь потрясающая.

    Ответить

  16. Зенков Андрей, 11.01.2017 в 19:53

    Шрифты 3D выглядят довольно неплохо на сайте. Раньше думал, что эта затея ни к чему не приведёт, однако, решил попробовать на досуге, и заметил, как преображаются заголовки, написанные такими буквами. Стили вообще интересные, буду пробовать разные, чтобы хоть как-то разнообразить обычное начертание. Из статьи взял для себя некоторые моменты, которые, думаю, не обойду стороной

    Ответить

Есть что сказать?

Отменить ответ [X]