Тенденция дизайнеров использовать в своих проектах маски для элементов не перестает быть актуальной, не зависимо от того, Photoshop это или Figma. В этих редакторах маски являются своего рода трафаретом, областью которого ограничен блок и его содержимое. Кроме того, в качестве маски может быть градиентный эффект, наложение цвета и многое другое. И для реализации такой красоты с помощью верстки приходилось использовать средства SVG, Canvas или просто сохранять объект как картинку.
Но сейчас другое время и стремительно развивающийся CSS обзавелся своими механизмами обрезки контента по заданному шаблону - CSS маскингом, принцип действия которого основан на альфа-канале изображения. Сложные формы (они же маски) можно указать с помощью стилей и наложить их на необходимый элемент.
Примеры того, как можно использовать маскинг для элементов в верстке:
Как добавить CSS маску
Для начала стоит упомянуть, что в верстке обрезать элемент по шаблону (т.е. наложить маску) можно тремя способами: с помощью элемента SVG <mask>, с помощью CSS-свойства clip-path и с помощью свойства mask. Последний - это как раз тот, о котором и идет речь в этой статье.
CSS маски используются преимущественно для изображений и градиентов, чем по своим значениям очень схожи со свойством background. Полноценный эффект масок достигается путем комбинации соответствующих свойств, имеющих подобный синтаксис:
.element {
-webkit-mask-image: url(mask.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
/* остальные свойства также начинаются с -webkit-mask- */
}Свойства написаны с префиксом, т.к. на данный момент поддержка их браузерами частичная и требует префиксы.
Ниже рассмотрим наиболее важные из свойств маскинга.
Свойство mask-image
Это главное свойство маскинга. В качестве его значения мы можем указать адрес картинки или градиент, которые и будут обрезать элемент. Принцип действия свойства - умножения альфа-канала маски на альфа-канал изображения.
В качестве картинки может быть png-файл или svg-файл.
.element {
mask-image: image(url(mask.png)); /* маской будет непрозрачная часть png-файла */
mask-image: image(url(mask.svg)); /* маской будет залитая часть svg-файла */
}В качестве градиентной маски может быть указан любой из типов градиентов с соответствующими параметрами.
.element {
mask-image: linear-gradient(to bottom, #000, transparent); /* градиент сверху-вниз от непрозрачного к прозрачному */
mask-image: radial-gradient(#000, transparent); /* круговой градиент из центра от непрозрачного к прозрачному */
mask-image: radial-gradient(ellipse 50% 50% at 0 0, transparent 100%, #000 0); /* круговой градиент с резким переходом */
mask-image: conic-gradient(#000 25%, transparent 100%); /* конический градиент по часовой стрелке */
}Свойства формирования маски
Для более точного указания деталей маски в связке с mask-image используют дополнительные свойства:
- mask-repeat - указывает, будет ли маска повторяться или нет; значения аналогичные свойству background-repeat
- mask-size - определяет размеры маски; значения аналогичные свойству background-size
- mask-position - задает координаты маски; значения аналогичные свойству background-position
Свойства mask-clip и mask-origin
Значения этих свойств определяет, на какую область элемента будет влиять маскинг. mask-origin выполняет роль mask-clip плюс меняет свою исходную позицию. Наиболее часто используемые значения:
| mask-clip | mask-origin | |
| border-box (значение по-умолчанию) | маска захватит всю блочную модель элемента | позиция обрезки относительно рамки |
| padding-box | маска вырежет рамку и применится к остальной части элемента | позиция обрезки относительно внутреннего отступа |
| content-box | маска вырежет место, занимаемое рамкой и внутренним отступ и применится к содержимому элемента | позиция обрезки относительно содержимого |
Заключение
Спецификация CSS-маскинга находится в стадии активного развития и с успехом внедряется браузерами для поддержки. Рассмотренные выше свойства являются наиболее часто применяемыми и уже пользуются успехом в веб-разработке. Не за горами развитие других свойств, таких как mask-attachment, mask-composite, mask-box-image и других.
Комментарии (1)