El concepto de recorte y enmascaramiento es bastante simple. Oculte ciertas partes de elementos y muestre otras. La diferencia real entre ellos también es bastante simple. El recorte es siempre un trazado vectorial, donde el interior del trazado es visible y el exterior no. Donde una máscara es una imagen, se trata como una imagen en escala de grises donde las partes negras enmascaran la imagen a la transparencia y las partes blancas dejan pasar la imagen.
Sin embargo, implementar el recorte y el enmascaramiento no es particularmente fácil, ya que el soporte del navegador (y todos los pequeños entresijos) varía bastante. Intentamos analizarlo todo en este screencast, con luchas y todo.
La sintaxis de todas las posibilidades es:
.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; )Algunas de las cosas de demostración con las que jugamos en este video están aquí y aquí.
Aquí hay un montón de recursos al respecto:
- clip-path aquí en el CSS-Tricks Almanac
- Recorte y enmascaramiento en CSS
- clip-path en WPD
- clip-path en MDN
- Recorte y enmascaramiento en MDN
- La propiedad de clip CSS (obsoleta) (Webs impresionantes)
- Especificaciones sobre enmascaramiento CSS
- Enmascaramiento CSS por Dirk Schulze
- Recorte en CSS y SVG: la propiedad y el
elemento de la ruta del clip por Sara Soueidan - Bolígrafos etiquetados con ruta de clip en CodePen
- Demostraciones y soporte de navegador de demostración Pen by Yoksel
- Máscaras SVG de Jakob Jenkov
- Investigación de Alan Greenblatt sobre los niveles de compatibilidad del navegador para las funciones de recorte y enmascaramiento