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

Разберемся как использовать скрытые свойства 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;

}

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

Оцени публикацию:
  • 8,40
Оценили человек: 8
Теги : css, text-shadow, тень, эффекты

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • Скоро фотошоп уже не нужен будет)) красота))
    28 января 2011, 09:42 коммент полезен : 0 # Флетчер
  • cool
    21 апреля 2011, 23:25 коммент полезен : 0 # Гость
  • Я давно стараюсь использовать подобное, класс!!
    26 апреля 2011, 05:17 коммент полезен : 0 # bulls
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » CSS »