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

+44

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

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

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

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


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

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

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

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

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

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

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

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

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

    Категории
    События студии все
    Поздравляем, 2021 наступил! Сколько на него надежд во всем мире...
    01 Января 2021
    Поздравляем, 2021 наступил! Сколько на него надежд во всем мире...
    Наступил Новый 2021 год! Очень надеемся на то, что он будет лучше прошлого, отступит коронавирус, восстановится экономика, справится малый и средний бизнес, а государство поможет ему в этом реальной помощью!
    333 просмотра
    подробнее
    Популярное
    Последнее