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

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

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

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

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

-webkit-background-clip: text;

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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 за ближайшие 6 дней

Узнать подробнее

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

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

Получить

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree