От автора: в данной обучающей статье мы узнаем, как сделать текстурный текст различными способами, причем не только в фотошопе. Существует несколько способов сделать текстурный текст в интернете (текст, вырезанный из картинки). Но также существует довольно-таки новый способ, который поддерживается большинством старых браузеров, и он очень интересный. Давайте рассмотрим все способы.
Просто зафотошопьте
Как и везде, можно просто подделать графику, иногда это того стоит. Минусы в том, что такой тест статичен и, чтобы его изменить, необходимо заново создавать картинку. Также изображения могут много весить, особенно если вы гонитесь за большими разрешениями и т.д. Однако этот способ работает:
-webkit-background-clip: text;
Данное свойство не стандартизировано, но придумано именно для одной цели. Преимущество данного способа в том, что данное свойство можно использовать в паре с -webkit-text-fill-color: transparent;. Вы «прячете» текст только в тех браузерах, которые поддерживают верхнее свойство. Divya Manian задокументировал данный метод пару лет назад.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.clip-text-maybe { /* если можно вырезать текст, делаем это */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; background: whatever; /* фоллбек по цвету текста ~ или ~ Текущий цвет текста */ color: red; } |
Это настоящий текст, который можно редактировать, он доступен для поисковиков и т.д. Ниже представлены несколько примеров от Jintos:
Заполнение SVG <pattern>
В SVG можно создавать настоящий текст с помощью элемента <text>. Данный текст можно заполнить чем угодно, в том числе шаблоном. В качестве шаблона можно использовать изображение. Пример ниже:
|
1 2 3 4 5 6 |
<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
Источник: //css-tricks.com/
Редакция: Команда webformyself.
