10 потрясающих примеров использования масок CSS, SVG и Canvas в действии

Вы можете делать удивительные вещи с масками SVG. Эта техника существует уже много лет, но лишь недавно стала широко применяться в веб-разработке.

Я порылся в Интернете, чтобы найти приведенные ниже демонстрации пользовательских обтравочных масок и масок SVG/canvas. Эти примеры показывают, как далеко вы можете продвинуть маски в Интернете и, в конечном счете, что они могут предложить разработчикам в будущем.

1. Маскировка текста

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

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

Эффект масштабирования также создан исключительно с помощью CSS, что делает этот фрагмент кода еще более впечатляющим.

2. Вырезание полигонов маски

Обратите внимание, что это перо использует JavaScript для сложных анимаций, но вся маскировка обрабатывается через элемент холста. Это удивительно сложная идея, поэтому пытаться следовать коду будет сложно.

Но приведенный выше эффект маскирования полигонов — один из самых уникальных дизайнов, которые я видел. Он берет формы, разработанные в CSS, и использует JavaScript для создания этих фигур в качестве элементов страницы для маскировки фонового изображения.

Это запускает последовательную анимацию и работает с элементом Canvas на основе JS, который ведет себя как контейнер для содержимого SVG/XML. Довольно сумасшедшие вещи, но интересно посмотреть, на что способны маски!

3. Маскировка изображения

В этом сокращенном примере показано, как выглядит маска изображения CSS. Вы можете увидеть до и после приведенной выше маски изображения, созданной Винсентом Де Оливейрой.

Обратите внимание, что фактическая черная текстурированная маска — это просто файл PNG. Но он динамически накладывается поверх изображения в CSS для создания фотоэффекта маскировки.

Вы можете сделать это с любой текстурой, если она экспортируется с прозрачностью. Есть много подробностей о свойстве маски, и хотя оно поддерживает файлы .svg, вам может быть проще начать с PNG.

4. Наведение кнопок

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

Опять же, весь код работает с предопределенной маской изображения, и каждая кнопка имеет свой собственный эффект маски. Самая крутая часть — это анимация при наведении, которая не просто показывает маску, а скорее анимирует ее в поле зрения.

Это, безусловно, экспериментальный фрагмент кода, но он выглядит феноменально в браузерах WebKit, и мы надеемся, что через несколько лет этот метод станет основным.

5. Текстовая маска SVG

Вот немного другой пример эффекта текстовой маски, созданный разработчиком Марко Барриа.

Вместо определения пользовательских изображений SVG код фактически использует элемент SVG. Он по-прежнему построен на основе простого текстового содержимого HTML, но работает с динамическим фильтром SVG.

Это немного более технически, но также предоставляет разработчику гораздо больше контроля. Вместо того, чтобы возиться с Illustrator для создания файлов SVG, вы можете кодировать встроенные SVG прямо в свой HTML-документ.

6. Текстовая маска холста

В этом примере холста от Кэлвина Дэвиса вы заметите, что он использует необработанный HTML для содержимого, но сам текст нельзя выделить.

Вместо этого он отображается на странице с помощью элемента Canvas, который может абстрагировать текст за пределами DOM. Это делает его более похожим на изображение, поэтому вы увидите этот эффект, когда текст маскируется поверх фона, но не ощущается как текст.

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

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

7. Анимированный градиент

Еще один действительно классный текстовый эффект — анимированный градиент, созданный разработчиком Сванте Рихтером.

Он использует весь код SVG на HTML-странице, поэтому маски создаются динамически. Эта настройка SVG работает, занимая всю страницу и придавая ей градиентный фон, а затем маскируя этот фон только через текст.

Поскольку градиент можно анимировать с помощью CSS, будет казаться, что анимируется только текст. Довольно крутой эффект, который вы можете добавить на экспериментальный веб-сайт или целевую страницу.

8. Анимированная обтравочная маска

Эта абстрактная анимация с обтравочной маской использует пузырьки на основе JS, сгенерированные случайным образом, для маскирования изображения. Он использует элемент холста вместе с анимированными обтравочными масками, собранными вместе, чтобы сформировать цельный SVG-блоб.

Это может показаться не таким уж большим, но разработчик Neil McCallion написал довольно приятный код, и конечный результат определенно странный.

Маскирование происходит в основном в элементе холста, но оно контролируется с помощью JavaScript. Это интересный способ объединить два изображения с абстрактной SVG-анимацией.

Опять же, это может не служить многим целям на реальном веб-сайте, но это классный эксперимент по работе с масками.

9. Маска SVG BG

С другой стороны, вот эффект маскировки, который можно использовать практически на любом веб-сайте.

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

Разработчик Рина Руденко раздвинула границы возможного с помощью этого пера, используя необработанный элемент холста с большинством маскирующих эффектов, наложенных на HTML.

Мало того, что эта маска практична и удобна для использования в большом заголовке, она также очень хорошо сделана и работает исключительно на HTML5 и CSS3. Яркий пример использования современных веб-стандартов.

10. Маски CSS и SVG

Эта полная галерея масок SVG показывает, как много вы можете сделать с помощью чистого CSS.

Это демонстрация, демонстрирующая множество различных методов маскирования, которые используют одну и ту же фотографию в разных форматах. Кроме того, каждый пример содержит образцы кода прямо на странице, которые вы можете протестировать самостоятельно, хотя код так же просто скопировать из редактора CodePen.

Но это маленькое перо больше похоже на введение в различные эффекты маскирования изображения, которые вы можете сделать. Отличное место для начала, если вы хотите погрузиться в SVG и маски с помощью простых демонстраций.