CSS Маскирование - mask

Здравствуйте, будущие мастера CSS! Сегодня мы окунемся в fascинирующий мир CSS маскирования. Представьте себе, что вы魔术ник, и хотите сделать части вашего веб-страницы исчезающими или показывать их интересными способами. Именно это позволяет нам сделать CSS маскирование! Так что надеваем шляпу魔术ника и изучаем quelques CSS трюки!

Что такое CSS маскирование?

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

Возможные значения

Прежде чем начать кодировать, рассмотрим различные значения, которые мы можем использовать с свойством mask. Представьте их как разные типы magic wand, каждый из которых создает уникальный эффект:

Значение	Описание
none	Не применяется маскирование
<mask-reference>	Ссылается на mask изображение
<masking-mode>	Определяет, как применяется маска
<position>	Устанавливает положение маски
<bg-size>	Определяет размер маски
<repeat-style>	Указывает, как повторяется маска
<geometry-box>	Определяет mask box
no-clip	Prevents обрезку маски

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

Применяется к

Свойство mask может быть применено к любому элементу. Это как иметь magic wand, который работает на все!

Синтаксис

Основной синтаксис для свойства mask выглядит так:

.element {
mask: <value>;
}

Теперь рассмотрим каждое значение подробнее.

CSS mask - none Значение

Значение none很简单. Оно означает, что маскирование не применяется. Это как решать не использовать вашу magic wand вообще.

.no-mask {
mask: none;
}

Этот код просто говорит браузеру: "Не применять маску к этому элементу."

CSS mask - <mask-reference>

Вот где начинается настоящее magic! <mask-reference> может быть изображением или CSS gradient, который определяет, какие части элемента должны быть видны.

.image-mask {
mask-image: url('mask.png');
mask: url('mask.png');
}

.gradient-mask {
mask-image: linear-gradient(to right, transparent, black);
mask: linear-gradient(to right, transparent, black);
}

В этих примерах мы используем либо файл изображения ('mask.png'), либо linear gradient в качестве нашей маски. Черные части маски будут показывать элемент, а прозрачные части будут скрывать его.

CSS mask - <masking-mode>

Masking mode определяет, как применяется маска. Есть два значения: alpha и luminance.

.alpha-mask {
mask-mode: alpha;
}

.luminance-mask {
mask-mode: luminance;
}

• alpha: Использует alpha канал mask изображения.
• luminance: Использует luminance (яркость) mask изображения.

CSS mask - <position>

Как и с фоновыми изображениями, вы можете позиционировать вашу маску:

.positioned-mask {
mask-position: center;
/* или */
mask: url('mask.png') center;
}

Это centrates маску на элементе. Вы можете использовать любое допустимое значение CSS позиции здесь.

CSS mask - <bg-size>

Вы также можете контролировать размер вашей маски:

.sized-mask {
mask-size: cover;
/* или */
mask: url('mask.png') cover;
}

Это делает маску покрывающей весь элемент. Вы можете использовать конкретные размеры, например, 100px 200px.

CSS mask - <repeat-style>

Если ваша маска меньше элемента, вы можете контролировать, как она повторяется:

.repeating-mask {
mask-repeat: repeat-x;
/* или */
mask: url('mask.png') repeat-x;
}

Это повторяет маску горизонтально по всему элементу.

CSS mask - <geometry-box>

Geometry box определяет область, которую покрывает маска:

.box-mask {
mask-clip: padding-box;
/* или */
mask: url('mask.png') padding-box;
}

Это применяет маску к padding box элемента.

CSS mask - <geometry-box> | no-clip

Значение no-clip prevents маску от обрезки до границ элемента:

.no-clip-mask {
mask-clip: no-clip;
/* или */
mask: url('mask.png') no-clip;
}

Это позволяет маске extend за пределы границ элемента.

Свойства, связанные с CSS mask

Есть несколько свойств, связанных с mask, которые дают вам еще больше контроля:

Свойство	Описание
mask-image	Указывает mask изображение
mask-mode	Устанавливает mask mode
mask-repeat	Контролирует, как mask повторяется
mask-position	Устанавливает положение mask
mask-clip	Определяет mask painting area
mask-origin	Устанавливает origin mask
mask-size	Указывает размер mask
mask-composite	Определяет, как mask combine

Каждое из этих свойств соответствует части缩短енного свойства mask, которое мы использовали.

И вот оно, мои молодые CSS魔术ники! Вы только что изучили основы CSS маскирования. Помните, как и любая magic trick, mastery CSS маскирования требует практики. Так что не бойтесь экспериментировать и создавать свои собственные magical веб-дизайны!

За годы преподавания я понял, что лучший способ учиться - это делать. Так что у вас есть интересное задание: попробуйте создать эффект "показать" на изображении с помощью gradient mask. Сделайте так, чтобы при наведении курсора изображение было полностью revealed. Это как отодвигать занавес, чтобы показать спрятанное изображение!

Счастливого кодирования, и пусть ваши mask всегда perfectly fitting!

Credits: Image by storyset