Clip-path и mask: создание нестандартных форм и масок

Превращаем скучные прямоугольники в шедевры! 🎨 Сегодня ты освоишь два мощных инструмента: clip-path и mask. Они позволят вырезать из элементов любые формы — от простых кругов до сложных SVG-контуров.

🧩 Основы clip-path: вырезаем формы

clip-path — это как ножницы для твоего HTML-элемента. Обрезает всё, что выходит за границы указанной формы.

🔹 Простые геометрические фигуры

Используем встроенные функции:

.element {
  clip-path: circle(50% at center); /* Идеальный круг */
  clip-path: polygon(0 0, 100% 0, 50% 100%); /* Треугольник */
  clip-path: inset(10% 20% 30% 40%); /* Внутренний отступ */
}

💡 Координаты в polygon идут по порядку: x1 y1, x2 y2,... Создавай пути по часовой стрелке!

🔹 Работа с SVG-путями

Для сложных форм подключаем SVG:

<svg width="0" height="0">
  <clipPath id="custom-shape">
    <path d="M10,10 H90 V90 H10 L10,10"/>
  </clipPath>
</svg>

.element {
  clip-path: url(#custom-shape);
}

🎭 Маскирование: тонкое управление прозрачностью

В отличие от clip-path, mask работает с прозрачностью — позволяет создавать плавные переходы и градиенты.

🔸 Градиентные маски

.element {
  mask: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
}

Здесь white — полностью видимая область, transparent — невидимая.

🔸 Изображения как маска

Используем PNG с альфа-каналом:

.element {
  mask: url('mask-image.png') center/contain no-repeat;
  -webkit-mask: url('mask-image.png') center/contain no-repeat; /* Для Safari */
}

🔥 Продвинутые техники

Комбинирование clip-path и mask

Создаём элемент с фигурным вырезом и полупрозрачными краями:

.card {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
  mask: linear-gradient(to bottom, white 90%, transparent);
}

Анимация масок

@keyframes mask-play {
  0% { mask-position: 0 0; }
  100% { mask-position: 100% 0; }
}

.animated-element {
  mask: linear-gradient(90deg, transparent, white 50%, transparent);
  animation: mask-play 2s infinite;
}

🛠 Практические примеры

Вырезанный текст на фоне

.text-overlay {
  background: url('bg-image.jpg');
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  mask: linear-gradient(white, white) text; /* Поддержка в Firefox */
}

Круговая диаграмма

.pie-chart {
  clip-path: circle(50% at center);
  mask: conic-gradient(white 0deg, white 120deg, transparent 120deg);
  background: linear-gradient(orange, red);
}

💡 Производительность и советы

Аппаратное ускорение: clip-path с базовыми формами (circle, polygon) работает быстрее SVG.
Fallback: Всегда добавляй overflow: hidden как резервный вариант.
Инструменты: Генерируй сложные пути в Clippy или Figma.
Проверка: Тестируй в разных браузерах — Firefox особенно чувствителен к маскам.

Теперь твои элементы могут принимать любую форму — от абстрактных ломаных линий до реалистичных силуэтов. Экспериментируй, комбинируй техники и удивляй пользователей нестандартными решениями! 🚀