Clip-path - Trucos CSS

Tabla de contenido

La clip-pathpropiedad en CSS le permite especificar una región específica de un elemento para mostrar, con el resto oculto (o "recortado").

.clip-me ( /* Example: clip away the element from the top, right, bottom, and left edges */ clip-path: inset(10px 20px 30px 40px); /* or "none" */ /* Example: clip element into a Heptagon */ clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); /* Deprecated version */ position: absolute; /* absolute or fixed positioning required */ clip: rect(110px, 160px, 170px, 60px); /* or "auto" */ /* values descript a top/left point and bottom/right point */ )

Solía ​​haber una clippropiedad, pero tenga en cuenta que está en desuso.

El caso de uso más común sería una imagen, pero no se limita a eso. Puede aplicarlo fácilmente clip-patha una etiqueta de párrafo y solo a una parte del texto.

 

 I'll be clipped.

Esos cuatro valores en inset()(en el CSS anterior) representan el punto superior / izquierdo y el punto inferior / derecho , que forma el rectángulo visible. Todo lo que está fuera de ese rectángulo está oculto.

Esta imagen de Louis Lazaris explica muy bien los cuatro puntos de la sintaxis antiguaclip: rect(); .

Otros valores posibles:

.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 */ /* rounded corners… not sure if a thing anymore */ clip-path: inset(10% 10% 10% 10% round 20%, 20%); )

Ejemplo de ruta de un clip SVG:

Es muy extraño que clip-pathno sea compatible con la path()función desde el principio, ya path()que ya es algo para propiedades como motion-path. Sin embargo, Firefox tiene soporte para él ahora, y estamos esperando el resto de los navegadores. Consulte una implementación inicial de clip-path: path ();

Haz lo tuyo

Hasta que podamos usarlo de manera confiable path(), los clips más útiles para formas personalizadas elegantes son polygon(). Aquí hay un editor realmente bueno para los de Mads Stoumann (que también funciona para círculos y elipses):

Más información

  • Recorte y enmascaramiento en CSS
  • clip-path en WPD
  • clip-path en MDN
  • Clippy: el creador de rutas de clips de Bennett Feely
  • 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 ruta de 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

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
91 54 No 88 TP *

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
88 85 81 14,0-14,4 *

Articulos interesantes...