На этот раз мы рассмотрели использование таких новых технологий как CSS Clipping and Masking, которые позволяют обрезать и накладывать маску на HTML-элемент по определенным векторным (clip-path) и растровым (mask-image) паттернам и с помощью SVG.
Этот обзор возник довольно-таки спонтанно, потому что по плану было рассмотреть CSS Shapes Level 2, которые про свойство shape-inside. Но выяснилось, что его не то что в браузерах не имплементировали, но еще и стандарт не дописали. Поэтому сорвалось.
CSS Clipping and Masking
На самом деле в этих двух технологиях важно понимать разницу между значениями свойств и все станет предельно понятно. Свойство clip-path принимает значения базовых векторных форм (circle, ellipse, inset, polygon) или svg-элементы clippingPath. Свойства mask-image и mask-box-image принимают растровые маски двух типов (с альфа-каналом и luminance-маски), они очень похожи, но заставить работать в webkit-браузерах удалось только alpha.
Дальше только экспериментировать.
Добавить комментарий