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

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

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

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

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

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

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

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

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

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

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

Читайте также

Некоторые сложности адаптивной верстки

У опытного верстальщика верстка адаптивного макета вряд ли вызовет затруднения, но новички часто сталкиваются с неочевидными проблемами.

Анимация "Созвездие"

Пошаговое создание анимации

Написать комментарий