CSS-маски, часть 1
Это первая часть курса про CSS-маски. В ней мы узнаем, что такое маскирование и как добавить маску на элемент.
Маскирование в CSS — это техника, которая позволяет скрыть части элемента, используя изображение или другой графический элемент (например, градиент).
Представьте, что у вас есть картинка, и вы хотите увидеть только её часть, как если бы вы смотрели через трафарет.
Этот трафарет и есть маска, которая определяет, какие части изображения или элемента будут видны.
Давайте добавим изображению маску в виде кругов, пока не вдаваясь в технические детали. Часть изображения стала прозрачной.
Применить маску можно на сам элемент или на его родителя.
Уберём маску с изображения.
Применим эту же маску к родительскому блоку изображения. Обратите внимание, тень у блока исчезла — её обрезала маска.
Когда маска была на изображении, тень у родителя сохранялась.
Маска может быть с резкими краями, может быть полупрозрачной, может плавно переходить от полностью видимого к полностью прозрачному состоянию.
Изменим параметры градиента, который используется для маски, и получим эффект плавного затухания прозрачности.
Маски создаются с помощью семейства CSS-свойств mask-*. Масочные свойства очень похожи на фоновые свойства, то есть на семейство background-*. Поэтому разбирать маски будем на примерах с фоновыми изображениями.
Давайте создадим простой линейный градиент из прозрачного цвета в чёрный и запишем его в переменную --mask-image в корневом элементе :root.
Теперь зададим этот градиент как фоновое изображение для правого блока. Картинка просвечивает сквозь прозрачную область градиента и скрывается под его непрозрачной чёрной частью.
А теперь используем этот же градиент в качестве маски на левом блоке. Для этого используем mask-image.
Принцип работы маски — прозрачное под прозрачным, непрозрачное под непрозрачным. В нашем случае прозрачная часть градиента находится сверху, поэтому верхняя область блока стала практически прозрачной, и сквозь неё виден фон страницы.
Давайте поэкспериментируем с самой маской. И поменяем параметры градиента.
Обратите внимание, как ведёт себя градиент на блоке справа, когда мы используем его как фон, и как работает маска из этого градиента на блоке слева.
Чтобы продемонстрировать это нагляднее, сделаем переход в градиенте резким: левый нижний угол будет прозрачным, а всё остальное пространство заполнено сплошным чёрным цветом.
Левый нижний угол блока с маской теперь полностью прозрачный.
CSS-свойство mask-image задаёт источник маски.
Источником могут быть сгенерированные изображения, такие как CSS-градиенты, или обычные изображения в формате PNG или SVG.
Проверим, как работают изображения разных форматов в качестве источника для маски. Начнём с SVG.
Создадим переменную --mask-image и присвоим ей значение url("img/bat.svg").
Попробуем использовать изображение в формате PNG. В прозрачных частях маскируемое изображение вырезается, а в непрозрачных остается.
Чтобы в этом убедиться, сравните два элемента: один с маской и другой с той же самой картинкой в качестве фона.
Используем в качестве маски небольшое изображение. Обратите внимание, что оно повторяется и в качестве фона, и в качестве маски.
Управлять повторением фона можно с помощью background-repeat, а маски — с помощью mask-repeat.
Режимы повторения фонов и масок работают одинаково. Давайте убедимся в этом.
Сначала добавим переменную --mask-repeat с режимом повторения фона space и используем его для background-repeat в блоке справа.
Режим space заставляет повторяться фон целое число раз так, чтобы в промежутках оставалось свободное пространство.
Посмотрите, как равномерно распределились шарики в правом блоке.
Зададим блоку с маской тот же режим повторения с помощью CSS-свойства mask-repeat.
Теперь и фоновые картинки, и маски повторяются одинаково.
Изменим режим повторения на repeat-y.
Вы можете сами поэкспериментировать с оставшимися режимами:
repeat-x — повторение по горизонтали.repeat — повторение и по горизонтали, и по вертикали (значение по умолчанию).round — повторение целое число раз с изменением размера.no-repeat — фон не повторяется.
Следующий «фоновый» параметр — это размер фона. Задаётся CSS-свойством background-size. Оно может принимать значения contain, cover, а также ширину и высоту в процентах или других единицах измерения (например, в пикселях).
Добавим переменную с размером фона cover и зададим размер фона блоку справа.
Теперь зададим этот же размер для маски с помощью CSS-свойства mask-size.
Процентные значения для размера маски задаются относительно области, в которой применяется маска. Это аналогично принципу вычисления размеров фона background-size. То есть, если вы укажете размеры маски в процентах, они будут рассчитаны относительно размеров элемента, на который накладывается маска.
CSS-свойство background-position задаёт позицию фонового изображения.
Расположим фоновую картинку в правом нижнем углу с помощью bottom right.
Зададим такую же позицию маски с помощью mask-position.
А теперь посмотрим, как работают проценты в качестве позиции фона/маски.
Подытожим: CSS-маски — это способ скрыть части элементов с помощью изображений, градиентов или SVG-файлов.
CSS-свойство mask-image определяет источник маски. Оно принимает те же значения, что и background-image: URL внешних изображений (url()), CSS-градиенты и другие форматы.
Основные свойства для управления маской аналогичны свойствам фона: размер задаётся с помощью mask-size, позиция — с помощью mask-position, а режим повторения — с помощью mask-repeat.
Давайте перейдём от теории к практике и рассмотрим пример, где маски действительно незаменимы.
Представим стандартную карточку с изображением и музыкальным треком. Пока название трека короткое — всё выглядит отлично.
Но как только появляются реальные, длинные названия треков, всё ломается.
Конечно, мы могли бы просто обрезать текст с помощью overflow: hidden. Однако гораздо красивее и удобнее для восприятия сделать плавное затухание текста у краёв карточки.
Давайте с помощью линейного градиента создадим маску, которая будет плавно скрывать края элемента.
Сначала применим этот градиент как фоновое изображение, чтобы чётко видеть область, которую будет покрывать маска. Там, где фон останется красным, текст будет виден полностью.
Теперь активируем маску, заменив CSS-свойство background-image на mask-image. Посмотрите, как скрылось слово «Парус».
Добавим анимацию при наведении на элемент. С помощью неё мы перемещаем текст внутри контейнера с маской.
Чтобы проверить работу анимации, наведите курсор на название трека.
Первая часть курса про CSS-маски завершена!
