В этом уроке мы покажем еще один вариант применения довольно известного способа создания объемного текста, вероятно, придуманного Mark Otto, дизайнером социальной сети Twitter, наша версия произошла от примера, созданного Trent Walton. Это не настоящий трехмерный текст, для которого понадобились бы трехмерные трансформации CSS и графическая библиотека WebGL, а имитация.

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

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

Код CSS для примера ниже следующий:

h1 {
        background: #ccc;
        font-size: 4vm;
        padding: 1.2rem;
        color: #fff;
        font-family: Blue Highway; Arial Black, sans-serif;
        text-align: center;
        letter-spacing: 1rem;
        text-shadow:0 .01em 0px #dededa,
                0 .015em 0 #dededa,
                0 .02em  0 #dededa,
                0 .028em 0 #dededa,
                0 .035em 0 #dededa,
                0 .04em  0 #dededa,
                0 .045em 0 #dbdbd6,
                0 .055em 0 #dbdbd6,
                0 .06em  0 #dbdbd6,
                0 .065em 0 #d9d9d4,
                0 .07em  0 #d9d9d4,
                0 .08em  0 #d8d8d3,
                0 .085em 0 #d8d8d3,
                0 .09em  0 #d8d8d3,
                0 .095em 0 #d6d6d1,
                0 .105em 0 #d6d6d1,
                0 .06em .06rem rgba(104, 104, 92, 0.15),
                .07em .105em .04em rgba(0, 0, 0, .015),
                -.02em .09em .05em rgba(104, 104, 92, 0.25),
                -.03em .07em .065em rgba(104, 104, 92, 0.1),
                -.075em .08em .09em rgba(104, 104, 92, 0.06),
                -.09em .06em .195em rgba(104, 104, 92, 0.095);
}

Как и в записи для множественных фоновых изображений CSS, множественные тени текста разделяются запятыми и указываются, начиная от находящихся наиболее близко к текстовому элементу и далее. Для этого примера используются единицы измерения em, а не px, для улучшения масштабируемости, но подойдут и буквально любые другие единицы измерения CSS.

Первые 16 теней сплошные, постепенно становящиеся темнее по мере снижения, создавая впечатление вытянутого текста. Последние шесть теней в объявлении фактически служат для создания окружающих теней, отступая слева, справа и сверху от каждой буквы, с добавлением размытия и прозрачности посредством значения цвета в формате rgba.

Конечно, этот эффект работает во всех современных версиях браузеров, только такие старые версии браузеров, как Internet Explorer версии 9, не поддерживают свойство тени текста, хотя уже Internet Explorer от версии 10 вводит поддержку этого свойства. Но все равно на всякий случай лучше убедиться, что основной цвет текста отличается от цвета фона, как в примере ниже, постарайтесь избегать сочетания «белого на белом», чтобы содержимое точно оставалось читабельным даже в очень старых версиях всех браузеров.

Если Вас заинтересовало, что такое Baluchitherium (или Paraceratherium), в переводе на русский язык Индрикотерий, то это самые большие из открытых когда-либо существовавших сухопутных млекопитающих, похожие на безрогих носорогов с удлиненной шеей, вымершие около 20 миллионов лет назад.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание анимированных подчеркиваний для ссылок
• Классические типографские эффекты: цитата в автоматически добавляемых кавычках
• Интересный эффект выделения текста с использованием псевдоэлемента CSS выделения