В данной статье мы рассмотрим использование тени текста (text-shadow) – эффекта, который поддерживается в Firefox, Opera и Safari. Его обычно используют для оформления врезанного текста. Врезанный текст представляет собой подобие вдавленного в фон текста.
Эффект, который мы собираемся сделать
Если вы посмотрите на изображение и текст, то вероятно, вы поймете то, что мы пытаемся сделать. Посредством цвета и нежного затемнения создается эффект, как будто текст вдавили в фон. Для начала нам нужно реализовать данный эффект в изображении, перед тем, как мы будет применять его с помощью свойства text-shadow (несмотря даже на то, что первично его разрабатывали для создания эффекта рельефа).
Этап 1. Основной цвет текста
Первым делом нам надо сделать цвет текста немного темнее, чем цвет фона, на котором он будет расположен. Это создаст эффект, как будто текст расположен дальше, чем фон. Уровень затемнения оттенка зависит от того, какие цвета вы используете на странице. Советуем вам использовать Photoshop для подбора правильных цветов и теней.
Этап 2. Цвет выступа
Для того, чтобы получить более реалистичный трехмерный эффект, на нужно сделать тонкую линию вокруг самого текста, будто бы это грань. Это создаст некоторый эффект углубления, так как текст у нас затемнен. Цвет самой грани должен быть слегка светлее, чем цвет фона, но не переборщите. Это еще одна из ситуаций, где крайне важно выбрать правильный цвет, потому что если вы сделаете его слишком ярким, то вся картина будет выглядеть странно, а если слишком темным, то вряд ли будет заметна разница. Опять же, лучше использовать Photoshop.
Этап 3. Код
.inset-text {
font-size: 32px;
color: #344251;
text-shadow: 1px 1px 0px #bad3ed;
font-weight: bold;
}
Код очень прост, нам просто нужно применить свойства text-shadow с линией в 1 пиксель на тексте и 1 пиксель под ним, а также 1 пиксель с правой стороны.
Результат
Вот вам пример того, что должно получиться. Если у пользователя нет поддержки свойства text-shadow, то они все равно смогут прочесть текст без труда.