Как сделать текстурный текст

Как сделать текстурный текст

От автора: в данной обучающей статье мы узнаем, как сделать текстурный текст различными способами, причем не только в фотошопе. Существует несколько способов сделать текстурный текст в интернете (текст, вырезанный из картинки). Но также существует довольно-таки новый способ, который поддерживается большинством старых браузеров, и он очень интересный. Давайте рассмотрим все способы.

Просто зафотошопьте

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

-webkit-background-clip: text;

Данное свойство не стандартизировано, но придумано именно для одной цели. Преимущество данного способа в том, что данное свойство можно использовать в паре с -webkit-text-fill-color: transparent;. Вы «прячете» текст только в тех браузерах, которые поддерживают верхнее свойство. Divya Manian задокументировал данный метод пару лет назад.

.clip-text-maybe {
  
  /* если можно вырезать текст, делаем это */
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;

  
  background: whatever;

  /* фоллбек по цвету текста
      ~ или ~
     Текущий цвет текста */
  color: red; 
 
}

Это настоящий текст, который можно редактировать, он доступен для поисковиков и т.д. Ниже представлены несколько примеров от Jintos:

Заполнение SVG <pattern>

В SVG можно создавать настоящий текст с помощью элемента <text>. Данный текст можно заполнить чем угодно, в том числе шаблоном. В качестве шаблона можно использовать изображение. Пример ниже:

<svg>
  <pattern id="pattern" patternUnits="userSpaceOnUse" width="750" height="800">
    <image width="750" height="800" xlink:href="image.jpg"></image>
  </pattern>
  <text x="0" y="80" class="headline" style="fill:url(#pattern);">background-clip: text | Polyfill</text>
</svg>

Данный код можно вставить прямо в HTML. Ниже пример от C.Y. Park:

CSS полифилл с помощью SVG

Tim Pietrusky создал полифилл для свойства -webkit-background-clip, который использует SVG для поддержки старых браузеров. Намного быстрее и легче написать CSS код вместо SVG, так что данный способ крайне хорош, а также имеет отличную поддержку в браузерах.

mix-blend-mode: screen;

Еще один способ. Однако такого я еще не видел! Сам метод CSS наложения достаточно нов. Можно прямо наложить один элемент на другой, как в Photoshop’е (к примеру, «screen», «multiply», «lighten» и т.д.). Изображение можно наложить поверх текста, создав эффект текста с фоновым рисунком. Впервые этот способ я увидел у Giana на CodePen:

Работает по принципу:

Цвет текста становится черным.

Ко всему тексту применяется фон и свойство mix-blend-mode: screen;

Ко второй копии того же текста (только белого) применяется тот же фон, но со значением свойства mix-blend-mode: multiply;

С помощью данного метода легко создать текстурный текст. При помощи pointer-events можно оставить текст кликабельным, однако сложно отслеживать, что вы делаете. Основное преимущество в том, что это полностью CSS способ, который полностью работает в Firefox, а не только в –webkit- браузерах.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree