Просвечивающий текст

+43

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

Просвечивающий сквозь зальвку текст

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

  • Изображение с прозрачностью;
  • Использование css свойства background-clip;
  • SVG маска;
  • Рисование на canvas.


Вариант с изображением отпал сразу, так как текст должен быть легко редактируемым.

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

Вариант с SVG маской оказался достаточно простым, в сети нашелся пример реализации и после небольшой адаптации я пришел к результату, который в целом устраивал.
Но было это громоздко и не гибко. Текст писался дважды, ограничение в одной строке, путаница в логике. Поэтому стоило попробовать и последний вариант, такая мелочь для canvas не должна составить проблем.

Конечно, дабы не изобретать велосипед, поискал в сети подобную реализацию.
Наткнулся на старенькую статью Питера Собота, где он описывал использование подобного эффекта в редизайне своего сайта, там же был и пример реализации в качестве плагина к jquery (можно обойтись и без jquery, но у меня он уже активно используется, поэтому не стал заморачиваться). Вся суть заключается в свойстве CanvasRenderingContext2D.globalCompositeOperation и его значении destination-out.

А происходит это так: рисуется прямоугольник, залитый цветом (размер и заливка соответствуют блоку с текстом), поверх него рисуется текст, благодаря вышеуказанному свойству текст вычитается из прямоугольника.

Немного доработав код (он плохо работал в мозилле), получил вполне удовлетворительный результат. Теперь можно писать текст в несколько строк и не заморачиваться с разметкой как в случае с SVG.

А вот и пример:

Понравилась статья? Поделись с друзьями:
Читайте также
Некоторые сложности адаптивной верстки
Некоторые сложности адаптивной верстки
У опытного верстальщика верстка адаптивного макета вряд ли вызовет затруднения, но новички часто сталкиваются с неочевидными проблемами.
Анимация
Анимация "Созвездие"
Пошаговое создание анимации

Комментарии (0)

    Голосуйте за нас - Премия - РИФ Воронеж 2017
    Категории
    События студии все
    Популярное
    Последнее