Свойство text-shadow создает тень под текстом, что очевидно из названия! По синтаксису и функциональности он похож на box-shadow , но он следует формам отдельных букв, а не отображает вокруг ограничивающего прямоугольника элемента. Вот пример общего синтаксиса, который определяет x-offset, y-offset, blur-radius и цвет:
text-shadow:3px 3px 1px #999;
… и его соответствующий образ: 
Сейчас я не знаю о вас, но не было бы ситуации, когда я бы хотел, чтобы мой текст выглядел так! Я никогда не работал над дизайном, где требовался этот тип эффекта, и я не думаю, что он выглядит очень хорошо. Это глупо — как то, что вы найдете в спаме или на сайте Geocities.
Прикосновение класса
Однако text-shadowсоздание тисненого текста, подобного этому:
У него есть это теневое свойство:
text-shadow:0 -1px 1px rgba(0,0,0,0.5);
Сделано аккуратно и не слишком нагло, эффект может быть привлекательным; он дает функциональному тексту, такому как кнопки и подписи, дополнительное прикосновение к классу. Вы можете увидеть несколько примеров этого на этой странице:
- оранжевые кнопки, такие как кнопка «Поиск» в форме поиска вверху или кнопка «Подписаться» для подписки на рассылку новостей в правом столбце
- поля с заголовками военно-морского флота, такие как поле регистрации новостных рассылок, которое мы только что упомянули со словами «Получить советы экспертов в своем почтовом ящике», или вкладки категорий в верхней части
Итак, как это работает?
Свет и тень
Эффекты тени и глубины создаются путем имитации света и тени, поэтому из этого следует, что у нас есть два основных способа применения text-shadow
-
положительная белая тень, которая создает впечатление света внизу букв, по существу:
text-shadow:1px 1px 0 white; -
негативная черная тень, которая создает впечатление тени в верхней части букв:
text-shadow:-1px -1px 0 black;
Но возникает проблема, которая заключается в том, что может быть довольно трудно найти правильный баланс оттенков , с точки зрения того, сколько из них применять для достижения реалистичного результата. Слишком тонкий и почти невидимый невооруженным глазом; слишком очевидно, и это начинает выглядеть как тень. И, к сожалению, одним из самых сложных эффектов является получение темного текста на светлом фоне , тем более что тень текста отображается за пределами шрифта , а не поверх него.
Советы и приемы
Итак, что мы можем сделать, чтобы сделать эффект более реалистичным, чтобы он выглядел больше как тиснение или гравировка, а не как большая уродливая тень? Вот мои советы: в первую очередь используйте значения цвета RGBA , чтобы эффект имел частичную непрозрачность. Это позволяет ему лучше сочетаться с фоном и дает вам больше контроля над интенсивностью эффекта. (Хотя цвета RGBA не поддерживаются в IE , он академический, так как в любом случае он не поддерживает это свойство.) Не смещайте тень в обоих направлениях по осям x и y, так как это визуально слишком много. Это выглядит лучше, если вы смещаете только в направлении y , как если бы свет находился непосредственно над ним. Затем используйте различные тени в соответствии с цветовыми сочетаниями, с которыми вы работаете:
-
Для светлого текста на цветном (но не очень темном) фоне используйте темную негативную тень с непрозрачностью от
0.25Здесь я также немного смягчил эффект с радиусом размытия1px#light-on-color{ background:#f60; color:#fff; text-shadow:0 -1px 1px rgba(0,0,0,0.5);} -
Для цветного текста на светлом (но не белом) фоне используйте светлую положительную тень с довольно высокой непрозрачностью:
#color-on-light{ background:#eea; color:#229; text-shadow:0 1px 0 rgba(255,255,255,0.75);} -
Другие комбинации более хитры: темная тень будет неэффективна на очень темном фоне или с очень темным текстом, и то же самое для светлой тени с светлым фоном или текстом. Но после целой серии экспериментов я считаю, что лучший эффект достигается при тонком сочетании светлых и темных теней . Добавьте низкую непрозрачность для темной тени, высокую непрозрачность для светлой тени и небольшое смещение к фоновому оттенку (поэтому для темного текста на светлом фоне используйте немного больше светлых теней и немного меньше темных; и наоборот) , Похоже на это:
#dark-on-light{ background:#eee; color:#223; text-shadow:0 -1px 0 rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.8)}#light-on-dark{ background:#223; color:#eee; text-shadow:0 -1px 0 rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.4)}Чем дальше от экстремума вы можете идти (то есть к более темному оттенку светлого цвета или более светлому оттенку темного цвета), тем лучше будет конечный эффект.
Эти последние примеры далеки от совершенства, и эффект выражен лишь незначительно (именно так мы не дадим ему выглядеть слишком похожим на тень). Но я думаю, что они лучше всего сочетаются с неуклюжими цветовыми сочетаниями, и поэтому, учитывая все факторы, они выглядят хорошо. Я собрал демонстрационную страницу со всеми четырьмя из этих примеров , и, на мой взгляд, они в порядке того, насколько хорошо они выглядят.
Ваши идеи?
Я хотел бы услышать ваши мысли о лучших способах достижения этого эффекта, особенно с этими сложными цветовыми сочетаниями. Или, может быть, у вас есть совершенно другая задача, для которой подходит свойство text-shadow Миниатюра кредита: давэкнапик