Percorso clip - Trucchi CSS

La clip-pathproprietà in CSS consente di specificare una regione specifica di un elemento da visualizzare, con il resto nascosto (o "ritagliato").

.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 */ ) 

C'era una clipproprietà, ma nota che è deprecata.

Il caso d'uso più comune sarebbe un'immagine, ma non è limitato a questo. Puoi applicarlo altrettanto facilmente clip-patha un tag di paragrafo e solo a una parte del testo.

 
 I'll be clipped.

Questi quattro valori in inset()(nel CSS sopra) rappresentano il punto in alto / a sinistra e il punto in basso / a destra , che forma il rettangolo visibile. Tutto ciò che è al di fuori di quel rettangolo è nascosto.

Altri possibili valori:

.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%); )

Esempio di percorso di clip SVG:

È molto strano che clip-pathnon supportasse la path()funzione fuori dal cancello, poiché path()è già una cosa per proprietà come motion-path. Firefox ora lo supporta e stiamo aspettando il resto dei browser. Vedere un'implementazione iniziale di clip-path: path ();

Crea il tuo

Fino a quando non saremo in grado di utilizzare in modo affidabile path(), le clip più utili per fantasiose forme personalizzate sono polygon(). Ecco un editor davvero accurato per quelli di Mads Stoumann (che funziona anche per cerchi ed ellissi):

Maggiori informazioni

• Ritaglio e mascheramento in CSS
• clip-path su WPD
• clip-path su MDN
• Clippy: il creatore di clip-path di Bennett Feely
• Ritaglio e mascheratura su MDN
• La proprietà CSS Clip (obsoleta) (Web impressionanti)
• Specifiche sul mascheramento CSS
• Mascheramento CSS di Dirk Schulze
• Ritaglio in CSS e SVG - La proprietà e l'elemento clip-path di Sara Soueidan
• Le penne hanno contrassegnato il percorso della clip su CodePen
• Demo e supporto per browser demo Pen di Yoksel
• Maschere SVG di Jakob Jenkov
• La ricerca di Alan Greenblatt sui livelli di supporto del browser per le funzioni di ritaglio e mascheramento

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo	Firefox	IE	Bordo	Safari
91	54	No	88	TP *

Mobile / Tablet

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