Загрузка...

Маскирование в CSS

Optional Advanced только что разлил газетные колонки. Этот урок — другой необязательный инструмент: маска. Вы кладёте трафарет на один блок. Где трафарет плотный, видны фото или цвет. Где пусто — блок исчезает. Вы не режете статью на потоки и не сдвигаете плитки иконок по спрайт-листу.

Прямой ответ

Маскирование CSS скрывает части элемента через mask-image — PNG, SVG или градиент. Представьте краску через вырез. mask-size, mask-repeat и mask-position ведут себя как слой фона: cover, no-repeat, center. mask-mode выбирает альфу (прозрачность файла маски) или яркость (свет против тьмы). Маска, когда край должен таять. clip-path — когда нужен жёсткий круг или многоугольник. Подписи и кнопки остаются полностью видимыми.

Почему маска — не колонка и не спрайт

Многоколоночность дробит один текстовый поток. Спрайт-лист обрезает битмап через background-position, чтобы много иконок делили файл. Маска не делает ни того ни другого. Элемент по-прежнему занимает свой блок. Ширина и высота раскладки не сжимаются. Меняется только то, какие пиксели этого блока рисуются. Фильтры (blur(), grayscale()) меняют вид каждого видимого пикселя; маска решает, какие пиксели остаются.

PNG как трафарет

mask-image принимает url(...) так же, как background-image. Типичный PNG-маски белый (или непрозрачный) там, где нужно фото, и прозрачный там, где дыра:

PNG mask with mask-image

css 
.hero-photo {
width: 20rem;
height: 12rem;
background: url("/img/studio.jpg") center / cover no-repeat;
mask-image: url("/img/soft-blob.png");
mask-size: cover;
mask-repeat: no-repeat;
}

Фото по-прежнему фон (или <img> с той же маской). PNG-клякса — только трафарет. Если файла маски нет, элемент может исчезнуть целиком — держите стиль без маски или проверьте URL.

Затухание градиентом

Второй файл не нужен. Градиентная маска — привычное затухание внизу карточки:

Fade with a gradient mask

css 
.card-lead {
mask-image: linear-gradient(to bottom, #000 60%, transparent);
mask-repeat: no-repeat;
}

Чёрный (или полностью непрозрачный) сохраняет содержимое; transparent пробивает дыру. Градиент живёт в CSS, лишнего HTTP нет — в отличие от спрайт-листа иконок. Это не opacity на всю карточку: текст в плотной части остаётся чётким; растворяется только замаскированная область.

Размер, повтор, позиция

Считайте маску фоновым слоем, который никогда не видите как картинку:

Size, repeat, and position

css 
.badge {
mask-image: url("/img/star-mask.svg");
mask-size: 4rem 4rem;
mask-repeat: no-repeat;
mask-position: center;
}

mask-size: cover заполняет блок; contain сохраняет пропорции трафарета; длины фиксируют маленькую форму. repeat плитит трафарет (редко и легко переборщить). Есть сокращение mask, но новичкам спокойнее длинные свойства, пока слой не ощущается как background.

Альфа против яркости

mask-mode отвечает: «Читать прозрачность или светлоту?»

Luminance mask-mode on a photo

css 
.portrait {
mask-image: url("/img/gray-sculpt.jpg");
mask-mode: luminance;
mask-size: cover;
}

alpha (часто по умолчанию у прозрачного PNG) берёт альфа-канал. luminance — свет и тьму: белый обычно показывает, чёрный скрывает — удобно, когда трафарет серое фото, а не прозрачный PNG. Если JPEG-маска «ничего не делает», скорее всего нужен был luminance. У SVG <mask> есть mask-type; на HTML-блоках начинайте с mask-mode.

Жёсткий клип против мягкой маски

clip-path режет геометрию: круг, inset, многоугольник. Край острый. Маска может быть мягкой. Это не два имени одного свойства:

Hard clip-path versus a soft mask

css 
.avatar {
clip-path: circle(50%);
}

.poster {
mask-image: radial-gradient(circle, #000 55%, transparent 80%);
mask-repeat: no-repeat;
}

Аватары и билеты часто хотят clip-path. Постер, который тает в страницу, хочет градиентную маску. Можно совмещать, но одна задача на свойство спокойнее. overflow: hidden с border-radius — третий инструмент: обрезает потомков по padding-коробке. Маска рисует сам элемент, включая фон, не скругляя раскладочный блок.

Safari и префикс WebKit

Некоторые версии Safari всё ещё хотят -webkit-mask-image (и соседние свойства) рядом со стандартными:

WebKit prefix for Safari

css 
.fade-photo {
-webkit-mask-image: linear-gradient(#000 70%, transparent);
mask-image: linear-gradient(#000 70%, transparent);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}

Строка с префиксом и стандартная. Не поставляйте только префикс навсегда. @supports может обернуть лишнее; привычка: проверить затухание в Safari, не только в Chromium.

Маска vs клип vs overflow vs спрайты

📊 Mask vs clip-path vs overflow vs sprites

Tool Job Poor fit
mask-image / mask-mode Soft holes, fades, shaped photos on one element Hiding a whole form; replacing column layout
clip-path Hard circle, polygon, inset silhouette Soft dissolves; newspaper columns
overflow: hidden Clip descendants to the box (often with radius) Painting a gradient stencil on the element’s own pixels
Sprites (background-position) Many icon tiles from one bitmap Stenciling a hero photo; flowing article text
Multi-column (column-*) Newspaper fill of one text stream Visibility holes in a picture

Optional Advanced уже брал спрайты для иконок и колонки для прозы. Маскирование — трафарет. Все три на одном герое — фото, обрезанное как спрайт и разрезанное как колонка.

Что не маскировать

Не чините маской беспорядочную вёрстку. Если кнопка или подпись под затуханием, их не прочитают и не нажмут. Скринридер может озвучить текст, а глаз ничего не видит — это баг, не фича. Контраст важен в видимой части. Декоративные фото, карточки и иконки — обычные цели; поля входа — нет.

Mask is not overflow or a sprite sheet

css 
.ok-art {
mask-image: linear-gradient(to right, #000, transparent);
}

.not-a-layout-fix {
/* don't: mask the entire toolbar because it overflowed */
}

.icons {
/* sprites still use background-position — not mask-image */
background-image: url("/img/icons.png");
background-position: 0 -32px;
}

Если ребёнок вылезает из карточки, overflow (или меньший ребёнок) — правка вёрстки. Если двенадцать HTTP-файлов иконок — спрайт или набор SVG. Маска не заменяет ни то ни другое.

Попробуйте сами

  1. Дайте цветному блоку mask-image: linear-gradient(to bottom, #000 50%, transparent) и смотрите, как тает низ.
  2. Подставьте маленький SVG- или PNG-трафарет; задайте mask-size и mask-position: center.
  3. Сравните mask-mode: luminance на сером JPEG и alpha на прозрачном PNG.
  4. Тот же круг через clip-path: circle(50%) — заметьте жёсткий край.
  5. Добавьте -webkit-mask-image с тем же градиентом. Не маскируйте форму.

Частые ошибки

  • Маска как макет страницы или как overflow: hidden
  • Забыть mask-size, и крошечный трафарет сидит в углу
  • Ждать дыр от JPEG без mask-mode: luminance
  • Пропустить -webkit-mask-image и винить «маски CSS» в Safari
  • Считать clip-path и mask-image одним и тем же
  • Маскировать подписи, подписи к фото или кнопки, пока не умрут контраст и клики
  • Путать со спрайтами (смещения плиток) или колонками (потоки текста)

Кратко

  • Маска — трафарет на одном элементе: здесь показать, там скрыть
  • mask-image берёт url или градиент; размер, повтор и позиция как у фона
  • mask-mode: альфа против яркости
  • clip-path — жёсткий геометрический срез; маски могут таять
  • Префикс для Safari; не маскируйте нужный интерфейс
  • Optional Advanced дальше: пользовательский интерфейс (user-interface)

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 74 из 75
Css Урок