Как сделать маску svg

Добавил пользователь Валентин П.
Обновлено: 10.09.2024

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

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

На момент написания большинство примеров кода работали только в браузерах WebKit, в то время как маски на основе SVG, похоже, пользуются более широкой поддержкой браузеров. Поэтому, если вы хотите попробовать примеры, я рекомендую вам использовать браузер WebKit, такой как Chrome.

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

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

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

Маскировка выполняется с использованием изображения PNG, градиента CSS или элемента SVG, чтобы скрыть некоторые части изображения или другой элемент на странице. Вы можете сделать это, используя свойство CSS mask .

В этой статье я сосредоточусь исключительно на маскировании с помощью свойства CSS mask и элемента SVG .

CSS- mask Свойство

mask — это сокращенное свойство CSS для целого ряда отдельных свойств. Давайте подробнее рассмотрим некоторые из них.

Свойство mask-image

Вы можете использовать свойство mask-image чтобы установить изображение слоя маски элемента.

Значение none — это не то же самое, что установка значения вообще. Наоборот — он все еще считается прозрачным черным слоем изображения.

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

Вот несколько примеров:

Вот как вы ссылаетесь на элемент SVG с id mask1 :

Градиентное изображение также является подходящим значением для свойства mask-image :

Свойство mask-mode

В mask-mode вы можете установить изображение слоя маски как альфа- маску или маску яркости .

Альфа-маска — это изображение с альфа-каналом. Более подробно, альфа-канал — это информация о прозрачности, содержащаяся в данных каждого пикселя. Маскирующие операции со свойством mask-mode установленным в alpha будут использовать альфа-значения изображения в качестве значений маски.

Удобным примером альфа-канала является изображение PNG с черными и прозрачными областями. Маскированный элемент будет отображаться через черные части изображения маски, которые имеют альфа-значение, равное единице. Все остальное под прозрачными частями, которые имеют нулевое значение альфа, будет скрыто.

Я собираюсь использовать это изображение PNG в качестве моей альфа-маски:

и выполните операцию маскирования изображения JPG ниже:

Вот где происходит магия:

и вот как выглядит результат в браузере:

Маска яркости использует значения яркости изображения в качестве значений маски. Изображение PNG, подобное приведенному выше, но в белом, является хорошим примером маски яркости:

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

Если установить mask-mode свойства mask-mode значение luminance и использовать изображение, указанное выше, в качестве маски, отобразится тот же результат, что и раньше.

Свойство mask-repeat

mask-repeat работает в значительной степени как свойство background-repeat . Он контролирует мозаику изображений слоя маски после того, как вы установили их размер и положение.

no-repeat : изображение слоя маски не повторяется в доступном пространстве.
repeat-x : изображение слоя маски повторяется по координате X.
repeat-y : изображение слоя маски повторяется по координате Y.
space : изображение слоя маски повторяется и распределяется по всей доступной области.
round : изображение слоя маски повторяется целое число раз по доступной области. Если целое число не помещается в доступное пространство, изображение масштабируется до тех пор, пока оно не уместится.

Например, это изображение, которое я намерен использовать в качестве маски:

Приведенный ниже фрагмент кода устанавливает для свойства mask-repeat значение space :

в результате получается следующий маскирующий эффект:

Свойство mask-position

Вы можете расположить изображение слоя маски, используя свойство mask-position . Вы можете установить для этого свойства те же значения, что и для более знакомого свойства CSS background-image . Его начальное значение — center .

Например, если вы хотите разместить слой маскирующего изображения в верхнем левом углу области просмотра, установите для свойства mask-position значение 0 0 :

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

Прием маскирования широко применяется в программе Photoshop. В Power Point тоже можно использовать этот эффект. Функционал программы позволяет это сделать, только технология здесь несколько иная.

Использование маски в оформлении презентаций возможно в нескольких вариантах. Функции маски в программе могут выполнять как отдельные фигуры, так и их наборы. Маску можно сделать из букв. Для маски можно использовать иконки в формате SVG.

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

Использование для маски простой фигуры

Итак, давайте начнем с самого простого способа – маскирование с использованием обычной фигуры из тех, которые предусмотрены программой. Вставляем на слайд картинку. Затем идем во вкладку Вставка – Фигуры, выбираем любую понравившуюся. Растягиваем ее по размеру картинки на слайде.

Теперь нужно выделить оба объекта (картинку и фигуру) в правильной последовательности: сначала картинку, затем зажав клавишу Shift или Ctrl, выделить фигуру. Если нарушите эту последовательность, у вас ничего не получится. Заходим во вкладку Формат, выбираем инструмент Объединение фигур, а в нем опцию Пересечение.

В результате таких манипуляций картинка обрезается по форме наложенной на нее фигуры.

Использование для маски набора фигур

Маску можно сделать не из одной, а из нескольких фигур, объединив их в единый объект. Я выбираю для этого (Вставка — Фигуры) прямоугольник со скругленными углами. Растягиваю его в узкую полосу. Углы еще больше закругляю с помощью желтого движка на фигуре. Создаю 5 копий этой фигуры (Ctrl+C копирую, Ctrl+V вставляю на слайд). Размещаю их на слайде на минимальном расстоянии друг от друга.

Теперь нам надо все эти фигуры объединить в одну. Для этого нужно все их выделить, одну за другой с зажатой клавишей Shift или Ctrl. Затем во вкладке Формат, взять инструмент Объединение фигур, опцию Объединение. Таким же способом я создала еще одну маску из шестиугольников.

Маскирование производим так же, как и в первом случае: размещаем полученную маску на картинке. Выделяем сначала картинку, зажимаем Sift, затем выделяем маску. Идем: Формат – объединение фигур — Пересечение. Получаем такой результат.

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

Использование для маски иконки SVG

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

Вставляем на слайд понравившуюся вам иконку (Вставка – Рисунки – Это устройство) и превращаем ее в фигуру так: кликнув на ней ПКМ, выбираем в меню Преобразовать в фигуру. Затем наложить ее на картинку, растянуть по величине картинки. Выделить картинку, зажать Sift, выделить фигуру. Выполнить команды: Формат – Объединение фигур – Пересечение. Получаем картинки, имеющие такие необычные формы.

Использование для маски букв

Маску можно создать из букв. Делается это таким образом. Выполняем команды: Вставка – Надпись. На слайде в поле для надписи вводим букву. Форматируем ее во вкладке Главная, выбрав интересный шрифт, самый большой размер.

После этого букву нужно превратить в фигуру. Для этого (Вставка — Фигуры) берем фигуру Прямоугольник. Накладываем букву на прямоугольник. Выделяем: сначала прямоугольник, затем с зажатой Sift выделяем букву. Выполняем команды: Формат – объединение фигур – Пересечение.

Получаем фигуру-маску в виде буквы. Ей уже можно пользоваться для маскирования картинки. Но мне хочется сделать маску посложней. Поэтому я делаю копию этой буквы-маски и объединяю их в одну фигуру-маску: Формат – Объединение фигур – Объединение.

Далее накладываю эту маску на картинку. Выделяю сначала картинку, затем, зажав Sift, выделяю маску и выполняю команды: Формат – Объединение фигур – Пересечение. И получаю такой результат.

Использование для маски текста

Сейчас маской нам будет служить не одна буква, а несколько слов. Выглядит это так, словно в текст вставлена картинка. На слайде вставляем текст (Вставка — Надпись). Обычно это какая-либо фраза из 2-3-4 слов. Так же, как мы делали с буквой, форматируем текст: выбираем размер, шрифт. Для создания маски нужен шрифт с широким начертанием. Тогда картинку будет хорошо видно. На тонком шрифте эффекта не получится.

Еще нужно сделать так, чтобы буквы и строки в тексте стояли близко друг к другу. Тогда картинка будет выглядеть более целостной. Для этого, зайдя во вкладку Главная, в опции Межбуквенный интервал, регулируем расстояние между буквами. А в опции Межстрочный интервал регулируем расстояние между строками.

После этого превращаем текст в фигуру. Берем прямоугольник (Вставка-Фигуры). На прямоугольник размещаем текст. Выделяем сначала прямоугольник, зажимаем Sift, выделяем текст. Выполняем команды: Формат – Объединение фигур – Пересечение.

Полученную маску-текст размещаем на картинке. Выделяем сначала картинку, затем, с зажатой клавишей Sift выделяем маску-текст. Выполняем команды: Формат – Объединение фигур – Пересечение.

И вот он – результат.

Вставка видео в маску

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

Вставляю на слайд подготовленное заранее видео небольшое по продолжительности: Вставка – Мультимедиа – Видео – Видео на компьютере.

Вставляю маску: Вставка – Рисунки – это устройство. Кликом на маске ПКМ вызываю меню и выбираю Преобразовать в фигуру. Затем маску размещаю поверх видео.

Далее: вкладка Вставка – Фигуры выбираю Прямоугольник. Этот прямоугольник растягиваю по всему слайду, поверх видео и маски. Выделяю прямоугольник, зажимаю Siftи выделяю маску. Выполняю команды: Формат – Объединение фигур – Вычитание. Получается так, что из прямоугольника вычитается (вырезается) маска, и в этом отверстии видно видео.

Теперь нужно выделить прямоугольник, ПКМ вызвать Формат фигуры. Сделать заливку прямоугольника, выбрав цвет такой же, как фон слайда, убрать контур (Линия – Нет линии).

Итак, мы рассмотрели использование маски в оформлении презентаций разными способами. Используйте полученные знания, тренируйте навыки, оформляете свои презентации интересно, красочно, креативно.

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

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

Поэтому в этой статье я хочу затронуть те стороны CSS, о которых разработчики забывают (или вообще не знают). Может, вы и для себя откроете что-то новое (либо добавите то, о чем у меня не сказано). Итак, поехали.

1 Режимы наложения CSS

Эти режимы определяют, как одно изображение накладывается на другое. Те, кто когда-нибудь работал в программах редактирования изображений вроде Photoshop, наверняка уже поняли, о чем идет речь.

В каждом из режимов цвета на конечном изображении будут выглядеть по-разному. Всего существует 15 возможных режимов наложения, конечный цвет вычисляется в зависимости от исходных цветов и выбранного режима. Примеры:

overlay – наложение – светлые части становятся светлее, темные – темнее;
darken – затемнение – выбирается темное значение;
color-dodge – цветовое осветление – задний фон становится более ярким, за счет этого все изображение смотрится более контрастным.

И так далее.

Режимы наложения можно использовать для того, чтобы сделать контент на сайте более уникальным. По сути, одно изображение имеет 15 различных цветовых вариаций, и можно выбрать любое из них, меняя всего одно значение в CSS.

Все возможные варианты наложения на примере смотрите тут .

Для того, чтобы задать режим наложения, нужно использовать mix-blend-mode:

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

Что делать, если с каким-то элементом режим наложения не нужен? Изолировать его:

Теперь к содержащему div изображению не будет применяться режим наложения.

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

2 Маскирование

Маскирование (masking) - это одна из популярных операций (наряду с отсечением), которая используется для скрытия части элемента. Части под маской будут частично или полностью непрозрачны. При помощи масок на странице можно создать изображение интересной, креативной формы.

Существует три способа сделать маскирование: использовать изображение с прозрачными частями (например, png), использовать CSS градиент либо SVG-элементы.

В отличие от растровых изображений, состоящих из пикселей, векторные изображения SVG можно масштабировать и изменять практически без потери качества.

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

То на странице при прокручивании вниз можно сделать так, чтобы буквы постепенно бледнели и заходили за скалы:

3 Отсечение

Отсечение (clipping) уже упоминалось выше - еще один способ поменять форму изображения. Принцип работы - все, что входит в выбранную область, будет отображено; все, что остается за краями, отображаться не будет.

Отсечение, в отличие от маскирования, дает возможность использовать некую базовую векторную фигуру, по которой и будет определяться, что войдет в зону отображения, а что нет:

В CSS давно существует свойство clip, которое позволяет обрезать изображения по четырем имеющимся сторонам:

Тем не менее свойство clip уже устарело - сейчас используется свойство clip-path.

Clip-path можно использовать либо на CSS (здесь доступны разные фигуры: polygon, circle, ellipse и так далее); либо на SVG (здесь для обертывания элемента будет использоваться элемент clipPath).

CSS

SVG

4 Формы CSS

Здесь речь пойдет о shape-outside и shape-inside.

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

А выглядеть это может вот так:

На странице shape-outside можно использовать, чтобы сделать вот такую красоту:

Shape-inside , наоборот, создает форму, внутри которой будет происходить обтекание.

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

5 Анимация с использованием SVG

SVG - формат, который уже активно используется в вебе. Он векторный (SVG - Scalable Vector Graphics - масштабируемая векторная графика), а значит, изображение будет нормально отображаться на экране с любым разрешением.

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

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

У SVG, помимо прочих преимуществ, есть еще важное отличие от растровых изображений: текст, вставленный в SVG, хранится в теге

, то есть его можно найти, с ним можно взаимодействовать прямо в коде.

Создание SVG-анимации при помощи CSS в целом похоже на анимирование любого другого элемента в HTML: нужно использовать переходы, трансформацию и ключевые кадры.

Самое удивительное при работе с SVG: вы можете взять любую часть и анимировать ее при помощи CSS. А значит, можно делать интересные динамические эффекты даже без использования JS. SVG имеет собственное DOM API, и если вы хотите углубиться в изучение этой темы, обязательно остановите свое внимание на DOM API.

А для начала я советую изучить вот эту статью .

Примеры красочных анимированных рисунков смотрите здесь и здесь .

Заключение

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

Моя проблема:
У меня есть HTML5-видео в оболочке со сплошным (например, синим) фоном (рис.1) .
Я хочу применить двухцветную маску изображения .jpg 1440x900 (рис. 2) к видео, чтобы в конечном итоге получить видео с некоторыми прозрачными частями, соответствующими черные квадраты маски изображения (маска должна масштабироваться пропорционально видео, чтобы быть как-то отзывчивой )

Что происходит на самом деле
При попытке решения (см. Ниже) я ничего не вижу (последние версии Chrome и Firefox): страница полностью синего цвета, и начинается видео

Что я пробовал
Я пробовал несколько демонстраций, найденных здесь и здесь, но в обоих примерах применяется маска не с изображением. Вот основной код, который я пробую.

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