Как использовать маски в CSS

Как использовать маски в CSS

От автора: когда вы обрезаете элемент, используя свойство clip-path, обрезанная область становится невидимой. Если вместо этого вы хотите сделать часть изображения непрозрачной или применить к ней какой-либо другой эффект, вам необходимо использовать маску. В этом посте объясняется, как применять свойство CSS mask-image, которое позволяет указать изображение для использования в качестве слоя маски. Это дает вам три варианта. Вы можете использовать в качестве маски файл изображения, SVG или градиент.

Совместимость с браузерами

Большинство браузеров только частично поддерживают стандартное свойство маскировки CSS. Вам нужно будет использовать префикс -webkit- в дополнение к стандартному свойству, чтобы достичь наилучшей совместимости с браузером. Для получения полной информации о поддержке браузерами см. Могу ли я использовать маски CSS?

Хотя поддержка браузерами с помощью свойства prefixed хороша, при использовании маскирования для отображения текста поверх изображения позаботьтесь о том, что произойдет, если маскирование недоступно. Перед добавлением замаскированной версии, возможно, стоит использовать запросы функций для обнаружения поддержки mask-image или -webkit-mask-image и предоставления удобочитаемого отката.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Маскировка изображением

Свойство mask-image работает аналогичным образом с background-image. Используйте значение url() для передачи изображения. Изображение маски должно иметь прозрачную или полупрозрачную область.

Полностью прозрачная область сделает часть изображения под этой областью невидимой. Однако использование полупрозрачной области позволит просвечиваться части исходного изображения. Вы можете увидеть разницу в Glitch ниже. Первое изображение — это исходное изображение воздушных шаров без маски. Ко второму изображению применена маска с белой звездой на полностью прозрачном фоне. Третье изображение имеет белую звезду на фоне с градиентной прозрачностью.

В этом примере я также использую свойство mask-size со значением cover. Это свойство работает так же, как background-size. Вы можете использовать ключевые слова cover и / или contain, вы можете задать размер фона, используя любую допустимую единицу длины или проценты.

Вы также можете повторить маску так же, как и фоновое изображение, чтобы использовать небольшое изображение в качестве повторяющегося узора.

Маскирование с помощью SVG

Вместо того, чтобы использовать в качестве маски файл изображения, вы можете применить SVG. Этого можно добиться несколькими способами. Первый – разместить элемент <mask> внутри SVG и ссылаться на идентификатор этого элемента в свойстве mask-image.

Преимущество этого подхода в том, что маску можно применить к любому элементу HTML, а не только к изображению. К сожалению, Firefox — единственный браузер, поддерживающий такой подход.

Однако еще не все потеряно, так как для наиболее распространенного сценария маскирования изображения мы можем включить изображение в SVG.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Маскировка градиентом

Использование градиента CSS в качестве маски — это элегантный способ создания замаскированной области без необходимости создавать изображение или SVG.

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

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

Использование нескольких масок

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

В качестве примера я нашла в этой статье красивый узор в виде шахматной доски. Код выглядит так:

Чтобы превратить этот или любой другой шаблон, предназначенный для фоновых изображений, в маску, вам нужно будет заменить свойства background-* соответствующими свойствами mask, включая —webkit префиксы.

Есть несколько действительно хороших эффектов, которые можно получить, применяя градиентные узоры к изображениям. Попробуйте сделать ремикс Glitch и опробовать другие варианты.

Наряду с обрезкой, маски CSS — это способ добавить интересные эффекты к изображениям и другим элементам HTML без необходимости использования графического приложения.

Автор: Rachel Andrew

Источник: //web.dev

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

CSS3. Основы

Прямо сейчас изучите CSS3 с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.