Как использовать методы отсечения и маскирования CSS и SVG

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

Чтобы прояснить ситуацию, маскирование и отсечение — это два разных способа манипулирования изображениями с помощью CSS. Начнем с обрезки.

Основы обрезки

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

Например, если треугольная обтравочная маска находится поверх изображения леса, вы увидите изображение леса внутри треугольной формы. Граница фигуры называется путем отсечения, не путать с устаревшим свойством clip . Вы создаете путь отсечения с помощью свойства clip-path .

Примечание. Не пытайтесь повторить это на своем действующем сайте.

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

Отсечение в действии

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

Вот фрагмент структуры HTML из примера:

<svg class="clip-svg">
	<defs>
		<clipPath id="polygon-clip-triangle-equilateral" clipPathUnits="objectBoundingBox">
			<polygon points="0 0.87, 0.5 0, 0.5 0, 1 0.87" />
		</clipPath>
	</defs>
</svg>

Это CSS для отсечения:

.polygon-clip-triangle-equilateral {
	-webkit-clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	-webkit-clip-path: url("#polygon-clip-triangle-equilateral");
	clip-path: url("#polygon-clip-triangle-equilateral");
}

Вы можете увидеть, где в HTML содержится ссылка на идентификатор clipPath и как он использует URL-адрес clip-path для отсечения.

Обрезной инструмент

Clippy — отличный инструмент для создания путей клипа CSS. Существует большое разнообразие стартовых форм и размеров, которые можно настроить по индивидуальному заказу.

Основы маскирования

Маскирование выполняется с помощью изображения PNG, градиента CSS или элемента SVG, чтобы скрыть часть изображения или другой элемент на странице. Мы сосредоточимся на графике SVG, но имейте в виду, что это можно сделать с другими типами изображений или стилями.

Свойство маски и элемент маски

Просто напоминание, чтобы помочь визуализировать, важно помнить, что замаскированный элемент является «исходным» (до применения маски) изображением. Вы можете не захотеть видеть все изображение, поэтому скрытие его частей выполняется с помощью свойства mask CSS. mask — это сокращение CSS для группы отдельных свойств, в которые мы углубимся чуть позже. Элемент SVG <mask> используется внутри графики SVG для добавления эффектов маскировки. В этом примере маска представляет собой круг, а также применяется градиент.

Использование элемента маски SVG на графике SVG

Чтобы получить представление об <mask> SVG, мы будем маскировать с помощью графики SVG.

На первый взгляд это может показаться немного сложным, но все это работает вместе, чтобы замаскировать основное изображение. У нас есть фактическое изображение в качестве фона, так где же SVG вступает в игру? В отличие от примеров обрезки, это фоновое изображение технически находится внутри элемента SVG. Мы будем использовать CSS, чтобы применить эту маску к изображению. Свойства будут исходить из элемента маски SVG, и мы дадим ему идентификатор masked-element в нашем CSS.

Чтобы увидеть это в действии, ознакомьтесь с этим примером Codepen. Вот рабочий код для маскированного изображения SVG:

<svg class="masked-element" width="300" height="300" viewBox="0 0 300 300">
	<image xlink:href="image link" width="300px" height="300px" />
</svg>

С помощью этого CSS мы указываем, где найти маску. Он будет искать идентификатор #mask-this:

/* Here’s the CSS for masking */
.masked-element image {
  mask: url(#mask1);
}

Заметили градиент в форме круга? Был применен градиент, а также задана форма круга для маски.

<svg class="svg-mask">
 	<defs>
 		<mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <linearGradient id="grad" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop stop-color="white" offset="0"/>
      <stop stop-color="green" stop-opacity="0" offset="1"/>
    </linearGradient>
    <circle cx="0.50" cy="0.50" r="0.50" id="circle" fill="url(#grad)"/>
  	</mask>
 	</defs>
</svg>

Маскировка текста SVG

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

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

<div class="text-wrap">
    <svg class="text-demo" viewBox="0 0 600 400" width="600" height="400">
    <defs>
      <mask id="myMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="50" y="200" id="myText">My Text</text>
        <text x="125" y="293" id="mySubtext">SVG</text>
      </mask>
    </defs>
    <ellipse class="masked" cx="300" cy="200" rx="300" ry="150" fill="rgba(255, 255, 255, 0.8)" />
  </svg>
  </div>

/* Here’s the CSS for text element */
#myText {
font-size: 125px;
font-style: bold;
fill: #000;
}

/* Here’s the CSS for masking */
.masked {
mask: url("#myMask");
}

Чтобы полностью понять, полезно поиграть и поэкспериментировать с кодом. Попробуйте изменить цвета, изменить текст и настроить размеры в этом Codepen.

Свойство изображения-маски

Изображение может быть объявлено, а изображение mask-image может быть установлено в значение URL. Изображение mask-image может быть PNG, SVG или ссылкой на элемент mask SVG, как я продемонстрировал в предыдущем примере.

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

<img class="mask-img example-mask" src="https://linktoimage.com/img/image-example.jpg" alt="Masked image">

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

.example-mask {
  mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  mask-mode: alpha;
  webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  webkit-mask-repeat: no-repeat;
  mask-size: 200px;
  webkit-mask-size: 200px;
  mask-position: center;
  webkit-mask-position: center;
}

В свойстве mask-image будет объявлена ​​форма маски. В этом случае изображение маски представляет собой графику SVG. Включение URL-ссылки — это то, как строится маска.

Вот он на Codepen.

Объединение нескольких изображений маски

Как раз тогда, когда вы думали, что маскирование не может быть лучше, есть возможность установить более одного слоя изображения маски. Все, что вам нужно сделать, это добавить два значения URL (или больше, если вы амбициозны), разделенные запятой.

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

.combined-mask {
   mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
}

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

Вот он на Codepen.

Создайте простой градиент с mask-image

Не все маски должны быть сложной формы. Иногда маской является не конкретное изображение, а простая маска, такая как градиент. Если вы ищете быстрый способ добиться этого, свойство mask-image является опцией, которую довольно легко реализовать.

В этом примере к набору градиентов был применен класс в качестве свойства mask-image . С помощью этого простого объявления было легко создать градиентную маску на изображении.

mask-image: linear-gradient(black, white, transparent);
-webkit-mask-image: linear-gradient(black, white, transparent);

Смотрите это на Codepen.

Свойство повтора маски

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

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

Размер mask-size довольно легко визуализировать, особенно с установленным здесь значением в пикселях.

mask-size: 200px;
webkit-mask-size: 200px;

Есть еще несколько вариантов повтора маски, если вы ищете другой эффект для шаблона:

• repeat-x повторяется по координате x.
• Repeat-y повторяет вниз по координате y.
• space повторяется и распространяется в доступной области.
• round повторяется несколько раз в доступной области (масштабирование поможет заполнить пространство, если это необходимо)

Поддержка браузера

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

Чтобы проверить и посмотреть, поддерживаются ли ваши маски и вырезки, я бы рекомендовал создать JSFiddle или Codepen, а затем попробовать его в разных браузерах. В последние годы поддержка браузеров увеличилась, и в конечном итоге она будет полностью поддерживаться. Не позволяйте ограничениям сбить вас с толку — всегда хорошо быть впереди игры, и как только поддержка станет более массовой, вы точно будете знать, как революционизировать свою графику. Если вы сомневаетесь, обязательно обратитесь к надежному документу «Можно ли использовать».

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

Далее: Создавайте сайты еще быстрее!

Вы понимаете важность оптимизированного процесса веб-дизайна. Все, что вы можете сделать, чтобы разработать веб-сайт быстрее, означает больше денег в вашем кармане. Именно поэтому компания Flywheel разработала нашу платформу хостинга, чтобы сэкономить ваше время и помочь вам лучше работать! С помощью этих советов и инструментов для веб-дизайна вы сможете выполнять больше проектов и уделять больше времени развитию своего бизнеса.

В этом руководстве мы дадим советы о том, как работать быстрее и ускорить рабочий процесс WordPress. От первоначальной настройки сайта до его запуска — узнайте, как вы можете сократить время своей повседневной работы! Загрузите его сегодня.

Эта статья была первоначально опубликована 3 августа 2016 года. Последний раз она обновлялась 6 ноября 2018 года.