3 трюка для добавления текстуры в ваш текст с CSS и SVG

Вероятно, вы знакомы с использованием такой техники Photoshop, когда в качестве маски изображения выступает текст; это лучший известный способ добавить текстуры или даже фон изображения на ваш текст. Далее вы можете использовать этот текст в виде изображения на вашем веб-сайте; а ведь было бы здорово, если бы мы смогли наложить такой же эффект, используя HTML и CSS? Хорошие новости — мы можем!

CSS представила такие свойства как background-clip и mask-image, которые вы можете использовать для создания схожих эффектов, для которых раньше использовался Фотошоп. Кроме того, для этого вы также можете использовать SVG.

Сегодня мы рассмотрим эти опции и даже сделаем несколько простых анимаций. Если вы хотите продолжить самостоятельно, один на один с кодом, вы можете загрузить исходные файлы здесь.

Поддержка браузерами

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

Создание фонового подвижного изображения текста с помощью BACKGROUND-CLIP

Первая опция, которую мы рассмотрим, это свойство background-clip. Это свойство определяет, будет ли фон продлён за границы или нет. Оно позволяет тексту определённого элемента обрезать изображение.

HTML

Наш макет — это просто h1 с классом bgClip:

<h1 class="bgClip">Clip Text</h1>

А теперь давайте добавим магии в CSS…

CSS

Мы добавим текстуру ночного неба к нашему изображению. Мы также убедимся, что текст отображён со сглаживаем, используя font-smoothing. Обратите внимание, что для этой работы цвет текста должен быть прозрачным, поэтому мы также используем text-fill-color:transparent.

.bgClip {
    background:url('../images/clouds.jpg');
    background-repeat:repeat-x;
    background-position:0 0;
    font-size:200px;
    text-transform:uppercase;
    text-align:center;
    font-family:'Luckiest Guy';
    color:transparent;
    -webkit-font-smoothing:antialiased;
    -webkit-background-clip:text;
    -moz-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin:0;

А теперь просто добавим немного анимации, чтобы сделать фон более привлекательным:

-webkit-animation:BackgroundAnimated 15s linear infinite;
    -moz-animation:BackgroundAnimated 15s linear infinite;
    -ms-animation:BackgroundAnimated 15s linear infinite;
    -o-animation:BackgroundAnimated 15s linear infinite;
    animation:BackgroundAnimated 15s linear infinite;
}
    @keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-webkit-keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-ms-keyframes BackgroundAnimated {<     from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}
    @-moz-keyframes BackgroundAnimated {
    from {
        background-position:0 0
    }
    to {
        background-position:100% 0
    }
}

А вот и результат:

Клипуем текст с использованием SVG

Следующая техника, которую мы рассмотрим, это SVG клиппинг. Наподобие приведённому выше методу CSS, SVG также позволяет вам клиповать текст изображением, используя свойство clipPath. Обычно свойство clipPath содержит форму атрибутов, таких как круг или квадрат, но вы также можете использовать текст.

SVG

Видите, я использую HTML элемент img для клиппинга изображения.

<img class="svg-clip" src="images/green.jpg"/>
        <svg height="0" width="0">
            <defs>
                <clippath id="svgPath">
                    <text x="175" y="420" textLength="1000"  lengthAdjust="spacing" font-family="Lemon" font-size="240px"> SVG Text </text>
                </clippath>
            </defs>
        </svg>

 

Хотя я здесь использую .jpg, вы можете использовать другие форматы изображений или даже видео.

CSS

А теперь всё, что нам нужно, это использовать свойство clip-path для наложения на SVG контуров видимого изображения:

.svgClipped {
    -webkit-clip-path: url(#svgPath);
    clip-path: url(#svgPath);
    margin:0 auto;
}

А вот и результат:

Тест под маской с помощью MASK-IMAGE

Последняя техника, которую мы собираемся рассмотреть, — это текстурирование текст с помощью mask-image. Базовая функциональность этого свойства в том, что оно будет вырезать область текста, которая видна в соответствии с прозрачностью.

HTML

Всё, что нам нужно, это один элемент h1 обёрнутый в div:

<div id="maskText">
<h1>Mask Text</h1>
</div>

CSS

Чтобы наложить маску на изображение с помощью текста, мы будем использовать -webkit-mask-image, который задаст изображение и мы также добавим клёвый text-shadow для улучшения вида. Наконец, я хочу внести дополнительную гладкость при эффекте наведения, когда весь текст становится видимым (просто потому что мы можем):

#maskText h1 {
    font-size: 200px;
    font-family: 'Lilita One', sans-serif;
    color: #ffe400;
    text-shadow: 7px 7px 0px #34495e;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    display: block;
    -webkit-mask-image: url('../images/texture.png');
    -webkit-transition:all 2s ease;
    -moz-transition:all 2s ease;
    -o-transition:all 2s ease;
    transition:all 2s ease;
}
    #maskText h1:hover{
    -webkit-mask-image: url('../images/texture-hover.png');
    cursor: pointer;
    color: #ffe400;
}

А вот и результат:

Заключение

Отлично! Вы только что научились новым трюкам с текстом. Эти навыки сберегут ваше время и отгородят вас от Фотошопа. Ещё важнее то, что они динамические (их можно менять «на лету»), в отличие от того же jpg.

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