Как добавить эффекты градиента и узоры к тексту

В этой статье мы покажем, как легко добавить эффекты градиента и узоры к тексту на веб-странице.

Мы добьемся этого, сделав текст прозрачным, поместив фоновое оформление текста с помощью background-image свойства и обрезав это фоновое оформление до символов текста с помощью background-clip. Несколько примеров того, что мы можем создать, изображены ниже.

Прозрачный текст и background-clip

Чтобы создать нужный эффект, мы сначала задаем цвет элемента на transparent. В приведенном ниже коде мы оформляем <h1> заголовок:

h1 {
  color: transparent;
}

Конечно, просто выполнение этого означает, что текст будет невидимым, так что одного этого недостаточно.

Следующий шаг - применить background-clip: text, который обрезает любую окраску фона или эффект, который мы размещаем на элементе, только до фактических символов текста, а не заполняет все поле целиком:

h1 {
  color: transparent;
  background-clip: text;
}

Теперь мы готовы немного поколдовать. Наш текст прозрачный, и любые фоновые эффекты, которые мы применим к нему, будут обрезаны до самого текста.

Установка фонового градиента для текста

Давайте сначала попробуем установить эффект градиента для текста нашего заголовка:

h1 {
  color: transparent;
  background-clip: text;
  background-image: linear-gradient(to right, #218bff, #c084fc, #db2777);
}

Здесь мы установили градиент слева направо, который будет охватывать текст заголовка. Результат показан ручкой ниже.

Мы могли бы попробовать бесконечное количество вариантов, таких как разные цвета, изменение направления градиента, создание узоров градиента и так далее.

Давайте попробуем другой пример, на этот раз создав узор в полоску:

h1 {
  color: transparent;
  background-clip: text;
  background-image: repeating-linear-gradient(-57deg, #218bff, #218bff 3px, #c084fc 3px, #c084fc 6px);
}

Результат показан ниже.

Вот еще один пример, использующий более сложный узор. Я также добавилtext-stroke, чтобы придать буквам немного больше четкости.

Установка фонового изображения для текста

Кроме эффектов градиента, мы также можем использовать свойство background-image для применения реальных изображений к тексту. Это может быть любое изображение, но давайте попробуем изображение, содержащее повторяющийся узор. Вот изображение, которое мы будем использовать.

Мы можем применить изображение узора в качестве фона следующим образом:

h1 {
  color: transparent;
  background-clip: text;
  background-image: url(pattern.jpg);
  background-size: contain;
}

Мы добавили background-size: contain, чтобы фоновое изображение красиво вписывалось в текст. Существуют различные параметры изменения размера, которые помогут вам делать практически все, что угодно, с фоновыми изображениями!

Результат показан ниже.

Просто для развлечения, вот еще один пример с другим фоновым изображением. В этом примере вместо text-stroke мы использовали filter: drop-shadow() для улучшения текста.

background-image против background

Возможно, вы заметили, что в приведенных выше примерах мы использовали background-image свойство, а не background сокращение. Оба варианта работают нормально, но при использовании background есть одна ошибка. Вам нужно сначала объявить его, перед background-clip. В противном случае background свойство сбрасывается background-clip до значения по умолчанию border-box, и эффект не работает.

Например, это работает:

color: transparent;
background: linear-gradient(to right, #3b82f6, #c084fc, #db2777);
background-clip: text;

Это не удастся:

color: transparent;
background-clip: text;
background: linear-gradient(to right, #3b82f6, #c084fc, #db2777);

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

Браузерная поддержка color: transparent и background-clip: text существует уже долгое время, но в некоторых браузерах по-прежнему требуются префиксы поставщика. Вы заметите, что в приведенных выше блоках кода мы фактически использовали -webkit- префикс поставщика для Edge и Chrome:

-webkit-background-clip: text; /* Edge, Chrome */
background-clip: text; /* Safari, FF */

Если вы просматриваете демо-версии в Edge и Chrome без префикса поставщика, эффект не срабатывает.

Соображения о доступности

Всегда полезно помнить о том, что может произойти, если используемая нами функция CSS не поддерживается ни одним браузером. Например, если мы установим цвет текста равным transparent, но браузер не поддерживает background-clip: text;, пользователь этого браузера не сможет прочитать наш текст. (Фон будет заполнять все текстовое поле, а не ограничиваться символами текста.)

Чтобы избежать этого, мы могли бы поместить наши необычные эффекты в @supports блок, который проверяет поддержку background-clip:

@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1 {
    /* styles here */
  }
}

Для браузеров, которые не поддерживают background-clip, мы могли бы либо оставить черный цвет текста по умолчанию, либо установить другой цвет.

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

Заключение

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

Эти эффекты следует использовать умеренно и осмотрительно. При разумном использовании этот прием можно использовать, чтобы придать вашим веб-страницам немного изюминки.