O conceito de recorte e mascaramento é bastante simples. Oculte certas partes dos elementos e mostre outras. A diferença real entre eles também é bastante simples. O recorte é sempre um caminho vetorial, onde o interior do caminho é visível e o exterior não. Onde uma máscara é uma imagem, é tratada como uma imagem em tons de cinza onde as partes pretas mascaram a imagem para a transparência e as partes brancas deixam a imagem passar.
Implementar recorte e mascaramento não é particularmente fácil, já que o suporte do navegador para isso (e todos os pequenos detalhes) varia bastante. Tentamos passar por tudo isso neste screencast, com lutas e tudo.
A sintaxe para todas as possibilidades é:
.clip-me ( /* referencing path from an inline SVG */ clip-path: url(#c1); /* referencing path from external SVG */ clip-path: url(path.svg#c1); /* polygon */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* circle */ clip-path: circle(30px at 35px 35px); /* ellipse */ clip-path: ellipse(65px 30px at 125px 40px); /* inset-rectangle() may replace inset() ? */ /* rectangle() coming in SVG 2 */ /* Masking */ /* mask-image, mask-position, mask-repeat, mask-clip, mask-size… */ mask: url(mask.svg); mask-type: luminance || alpha; -webkit-mask-box-image: url(stampTiles.svg) 30 repeat; mask-border: url(stampTiles.svg) 30 repeat; )Algumas das coisas de demonstração que reproduzimos neste vídeo estão aqui e aqui.
Aqui está um monte de recursos sobre ele:
- clip-path aqui no CSS-Tricks Almanac
- Recorte e mascaramento em CSS
- clip-path no WPD
- clip-path no MDN
- Corte e mascaramento em MDN
- A (obsoleta) propriedade CSS Clip (Impressive Webs)
- Especificação de máscara de CSS
- Mascaramento CSS por Dirk Schulze
- Clipping in CSS e SVG - A propriedade e o
elemento do caminho do clipe de Sara Soueidan - Clip-path com marcação de canetas no CodePen
- Demonstrações e suporte para navegador de demonstração Pen de Yoksel
- Máscaras SVG por Jakob Jenkov
- Pesquisa de Alan Greenblatt sobre os níveis de suporte do navegador para recursos de recorte e mascaramento