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

Автор: Aport Пятница, Январь 23rd, 2015 Нет комментариев

Рубрика: Разное

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

Разберемся как использовать скрытые свойства text-shadow.

То, что нарисовано на картинке справа, посмотреть в живую можно здесь. Помимо того, что здесь не используется никакой дополнительной разметки (типа :before и :after), особо внимательные дизайнеры могут заметить, что у текста есть не только «объём» (в коде, строки параметров 1-5), но и тень (остальные строки, с указанием цвета через RGBA, что позволяет делать слои-тени прозрачными) .

В принципе, весь код изложен на той же странице. Суть подхода — многократное повторение параметров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;

}

 

Источник: yapro.ru

 

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты