Як зробити текстурний текст

12

Від автора: у даній навчальній статті ми дізнаємося, як зробити текстурний текст різними способами, причому не тільки в фотошопі. Існує кілька способів зробити текстурний текст в інтернеті (текст, вирізаний з картинки). Але також існує досить-таки новий спосіб, який підтримується більшістю старих браузерів, і він дуже цікавий. Давайте розглянемо всі способи.

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

Як і скрізь, можна просто підробити графіком, іноді це того варто. Мінуси в тому, що такий тест статичним і, щоб його змінити, потрібно заново створювати картинку. Також зображення можуть багато важити, особливо якщо ви женіться за великими дозволами і т. д. Однак цей спосіб працює:

Як зробити текстурний текст

-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

В SVG можна створювати справжній текст за допомогою елемента . Цей текст можна заповнити чим завгодно, в тому числі шаблоном. В якості шаблону можна використовувати зображення. Приклад нижче:

background-clip: text | Polyfill

Даний код можна вставити прямо в 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 — браузерах.