Маска изображения довольно удобна

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

Ну, знаете, что-то в этом роде:

See the Pen

.masked-image {
  mask-image: url(https://assets.codepen.io/174183/mask.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
}

Можно было использовать СSS свойство clip-path, но мы обнаружили, что маска изображения очень хорошо подходит для наших потребностей в высоком уровне темизации и непредсказуемости.

Вы можете повторить маску, чтобы получить несколько интересных эффектов. Это поведение по умолчанию, если не указать mask-repeat: no-repeat. Как и в случае с фоновыми изображениями!

See the Pen

.masked-image {
  mask-image: url(https://assets.codepen.io/174183/repeat-mask.svg);
  mask-size: 10px 10px;
}

Кроме того, не обязательно использовать SVG! Посмотрите на пример, в котором используется текстура кисти в PNG:

See the Pen

.masked-image {
  mask-image: url(https://assets.codepen.io/174183/brush.png);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
}

Можно добавить несколько масок, что дополняется соответствующим CSS свойством mask-composite, позволяющим добавлять, вычитать, пересекать или исключать маски, подобно Объединению объектов в Illustrator.

Например, здесь исключаем маску прямоугольника из маски круга:

See the Pen

.masked-image {
  mask-image: url(https://assets.codepen.io/174183/circle-mask.svg),
    url(https://assets.codepen.io/174183/rectangle-mask.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  mask-composite: exclude;
}

А здесь вычитаем маску прямоугольника из маски круга:

See the Pen

.masked-image {
  mask-image: url(https://assets.codepen.io/174183/circle-mask.svg),
    url(https://assets.codepen.io/174183/rectangle-mask.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  mask-composite: subtract;
}

Заключение

Маскирование — это просто с CSS! Я не так часто встречаю маски в Интернете, как хотелось бы, поэтому надеюсь, что этот небольшой пост вдохновит вас на творческий подход к маскам. Вы также можете узнать больше о mask-image, mask-composite и сокращённая форма записи mask.

Более подробно узнать о CSS масках можно в статье: Что такое CSS маски и зачем они нужны