Маски с mask-image

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Опубликовано 17.03.2025
Просмотры 6
Автор
Рек. время прохождения 4 минуты
Упражнений 10
Комментарии 0
Тренажер CSS

В этой серии заданий вы попрактикуетесь в использовании CSS-свойства `mask-image` и связанных с ним свойств для создания эффектов маскирования элементов. Маски позволяют контролировать видимость части элемента, используя изображение (включая градиенты) в качестве маски. Прозрачные или полупрозрачные области маски делают соответствующую часть элемента видимой или полупровидимой, а непрозрачные области маски скрывают элемент. Задания построены от простого применения `mask-image` с URL до использования градиентов, управления размером, позицией, повторением маски и использования сокращенного свойства `mask`.

Список тем

Применение простой маски из изображения

Ваша задача - применить к элементу `div` с классом `masked-element` маску, используя изображение по указанному URL. Элемент должен стать видимым только в тех частях, где маска (изображение) непрозрачна или полупрозрачна. Заполните пропуск, чтобы указать свойство для задания маски.

CSS
.masked-element {
  width: 250px;
  height: 250px;
  background-color: dodgerblue;
  /* Используйте изображение как маску */
  input1: url("https://naytikurs.ru/img/7.png");
  /* Префикс для WebKit браузеров */
  input2: url("https://naytikurs.ru/img/7.png");
  /* Настроим размер маски для наглядности */
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
HTML
<div class="masked-element"></div>
Чтобы задать изображение в качестве маски, используется свойство `mask-image`. Его значением может быть URL изображения с помощью функции `url()`. Также не забудьте про вендорный префикс `-webkit-` для лучшей совместимости.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Маска с использованием линейного градиента

Создайте маску для элемента `div` с классом `gradient-mask`, используя линейный градиент. Градиент должен переходить от полностью непрозрачного черного цвета сверху к полностью прозрачному черному цвету снизу. Заполните пропуск, указав функцию для создания линейного градиента.

CSS
.gradient-mask {
  width: 250px;
  height: 250px;
  background: url('https://naytikurs.ru/img/1.png') center/cover;
  /* Создайте маску с градиентом */
  mask-image: input1(to bottom, black, transparent);
  -webkit-mask-image: input1(to bottom, black, transparent);
}
HTML
<div class="gradient-mask"></div>
Свойство `mask-image` может принимать градиенты в качестве значения. Для создания линейного градиента используется функция `linear-gradient()`. Укажите направление (например, `to bottom`) и цвета (например, `black` для непрозрачной части и `transparent` для прозрачной).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Управление повторением маски

К элементу применена маска из небольшого изображения. По умолчанию маска повторяется, заполняя весь элемент. Ваша задача - отменить это повторение, чтобы маска отобразилась только один раз. Заполните пропуск нужным значением свойства `mask-repeat`.

CSS
.repeat-mask {
  width: 300px;
  height: 250px;
  background-color: orangered;
  mask-image: url("https://naytikurs.ru/img/9.png");
  -webkit-mask-image: url("https://naytikurs.ru/img/9.png");
  /* Установите размер маски, чтобы повторение было заметно */
  mask-size: 50px 50px;
  -webkit-mask-size: 50px 50px;
  /* Отмените повторение маски */
  mask-repeat: input1;
  -webkit-mask-repeat: input1;
}
HTML
<div class="repeat-mask"></div>
Свойство `mask-repeat` контролирует, будет ли изображение маски повторяться. Чтобы отменить повторение по обеим осям, используйте значение `no-repeat`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Изменение размера маски

К элементу применена маска из изображения. Сейчас маска имеет свой исходный размер. Измените размер маски так, чтобы она полностью помещалась внутри элемента, сохраняя свои пропорции. Заполните пропуск соответствующим значением свойства `mask-size`.

CSS
.size-mask {
  width: 280px;
  height: 200px;
  background: linear-gradient(45deg, lightcoral, lightskyblue);
  mask-image: url("https://naytikurs.ru/img/8.png");
  -webkit-mask-image: url("https://naytikurs.ru/img/8.png");
  /* Масштабируйте маску, чтобы она помещалась в элемент */
  mask-size: input1;
  -webkit-mask-size: input1;
  /* Для наглядности уберем повторение и центрируем */
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
HTML
<div class="size-mask"></div>
Свойство `mask-size` управляет размером изображения маски. Значение `contain` масштабирует изображение так, чтобы оно целиком поместилось в контейнер элемента, сохраняя пропорции.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Позиционирование маски

К элементу применена маска, которая не повторяется и имеет заданный размер. По умолчанию она расположена в верхнем левом углу. Ваша задача - спозиционировать маску точно по центру элемента. Заполните пропуск нужным значением свойства `mask-position`.

CSS
.position-mask {
  width: 250px;
  height: 250px;
  background-color: mediumpurple;
  mask-image: url("https://naytikurs.ru/img/6.png");
  -webkit-mask-image: url("https://naytikurs.ru/img/6.png");
  mask-size: 100px 100px;
  -webkit-mask-size: 100px 100px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  /* Расположите маску по центру */
  mask-position: input1;
  -webkit-mask-position: input1;
}
HTML
<div class="position-mask"></div>
Свойство `mask-position` задает начальную позицию изображения маски. Чтобы разместить маску по центру как по горизонтали, так и по вертикали, используйте значение `center`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Использование сокращенного свойства mask (простое)

Вместо того чтобы писать `mask-image` и `mask-repeat` отдельно, можно использовать сокращенное свойство `mask`. Примените маску из изображения `5.png` и установите для нее запрет повторения (`no-repeat`), используя только одно свойство `mask`. Заполните пропуск названием сокращенного свойства.

CSS
.shorthand-mask-simple {
  width: 300px;
  height: 200px;
  background: gold;
  /* Примените маску и отмените повторение одним свойством */
  input1: url("https://naytikurs.ru/img/5.png") no-repeat;
  input2: url("https://naytikurs.ru/img/5.png") no-repeat;
  /* Добавим размер и позицию для наглядности */
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
}
HTML
<div class="shorthand-mask-simple"></div>
Сокращенное свойство `mask` позволяет задать несколько параметров маски одновременно. В данном случае нужно указать URL изображения и значение `no-repeat`. Не забудьте про вендорный префикс `-webkit-mask`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Использование сокращенного свойства mask (сложное)

Используйте сокращенное свойство `mask`, чтобы применить маску из изображения `4.png`, разместить ее по центру (`center`), отменить повторение (`no-repeat`) и масштабировать так, чтобы она вписалась в элемент (`contain`). Заполните пропуски недостающими значениями.

CSS
.shorthand-mask-complex {
  width: 250px;
  height: 250px;
  background: teal;
  /* Используйте сокращенное свойство для задания маски, позиции, размера и повторения */
  mask: url("https://naytikurs.ru/img/4.png") input1 / input2 input3;
  -webkit-mask: url("https://naytikurs.ru/img/4.png") input1 / input2 input3;
}
HTML
<div class="shorthand-mask-complex"></div>
В сокращенном свойстве `mask` можно указывать значения для `mask-image`, `mask-position`, `mask-size`, `mask-repeat` и других свойств маски. Порядок обычно таков: `mask-image` `mask-position` / `mask-size` `mask-repeat`. Значения `mask-position` и `mask-size` разделяются слешем `/`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Режим маски: luminance

По умолчанию маска использует альфа-канал (`alpha`). Но можно использовать яркость (`luminance`) маски для определения видимости. Примените к элементу маску-градиент и установите режим маски `luminance`. Более светлые участки маски сделают элемент более видимым. Заполните пропуск названием свойства, управляющего режимом маски.

CSS
.mode-mask {
  width: 300px;
  height: 200px;
  background: url('https://naytikurs.ru/img/2.png') center/cover;
  /* Маска - градиент от белого к черному */
  mask-image: linear-gradient(to right, white, black);
  -webkit-mask-image: linear-gradient(to right, white, black);
  /* Установите режим маски по яркости */
  input1: luminance;
  -webkit-input1: luminance;
}
HTML
<div class="mode-mask"></div>
Свойство `mask-mode` определяет, используется ли альфа-канал (`alpha`) или яркость (`luminance`) маски. Установите его значение в `luminance`, чтобы видимость элемента зависела от яркости пикселей маски.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Несколько слоев маски

Можно применять несколько масок к одному элементу, перечисляя их через запятую. Примените две маски: первую - изображение `7.png` без повторения, по центру, размером `contain`; вторую - линейный градиент сверху вниз от прозрачного к черному. Заполните пропуск, добавив вторую маску (линейный градиент).

CSS
.multiple-mask {
  width: 250px;
  height: 250px;
  background: deeppink;

  /* Первая маска - изображение */
  mask-image: url("https://naytikurs.ru/img/7.png"), input1(to bottom, transparent, black);
  mask-size: contain, auto;
  mask-position: center, 0 0;
  mask-repeat: no-repeat, repeat;

  /* Префиксы WebKit */
  -webkit-mask-image: url("https://naytikurs.ru/img/7.png"), input1(to bottom, transparent, black);
  -webkit-mask-size: contain, auto;
  -webkit-mask-position: center, 0 0;
  -webkit-mask-repeat: no-repeat, repeat;
}
HTML
<div class="multiple-mask"></div>
Чтобы добавить несколько масок, перечислите их значения для свойства `mask-image` (и других свойств маски, если нужно) через запятую. Для `mask-image` добавьте `, linear-gradient(to bottom, transparent, black)` после первой маски.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Комбинирование масок: mask-composite

У элемента есть две маски: круг и квадрат. По умолчанию они складываются (`add`). Измените способ их комбинирования так, чтобы видимой осталась только область их пересечения (`intersect`). Заполните пропуск названием свойства, управляющего комбинированием масок.

CSS
.composite-mask {
  width: 200px;
  height: 200px;
  background: forestgreen;

  /* Две маски: круг и квадрат */
  mask-image: radial-gradient(circle, black 50%, transparent 51%),
              linear-gradient(black, black);
  -webkit-mask-image: radial-gradient(circle, black 50%, transparent 51%),
                      linear-gradient(black, black);

  mask-size: 100px 100px, 100px 100px;
  -webkit-mask-size: 100px 100px, 100px 100px;

  mask-position: 30% 30%, 70% 70%;
  -webkit-mask-position: 30% 30%, 70% 70%;

  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;

  /* Установите режим пересечения для масок */
  input1: intersect;
  -webkit-input1: intersect;
}
HTML
<div class="composite-mask"></div>
Свойство `mask-composite` определяет, как несколько слоев маски взаимодействуют друг с другом. Значение `intersect` оставляет видимой только ту область, где перекрываются все слои маски.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру