Oggi trattiamo l’argomento maschere di ritaglio, e visto che io tratto l’argomento web, vediamo come crearle attraverso il solo uso di CSS. Per farlo introdurremo una proprietà specifica per questo compito: Clip-path.
Questa proprietà permette infatti di creare una maschera su un’immagine, così da poterla ritagliare in base ad una precisa forma. Come sappiamo, di base le immagini occupano sempre un rettangolo, ma grazie a questa proprietà possiamo avere immagini incastonate in forme più strane, o anche creare dei testi il cui riempimento sia proprio un’immagine.
Con questa proprietà possiamo quindi uscire dagli schemi e abbandonare la solita forma rettangolare, e prevedere layout con esagoni, cerchi, ellissi o qualsiasi forma ci venga in mente.
N.B.: Prima di addentrarci in questa nuova proprietà con degli esempi pratici, è bene chiarire che questa proprietà va a sostituire una simile che esisteva in CSS2, cioè clip. Questa proprietà presentava dei grossi limiti e permetteva di creare solo maschere rettangolari. È stata quindi deprecata in favore di clip-path.
Clip-path in teoria
Esistono 2 modi per utilizzare clip-path:
Shape CSS
Attraverso le forme messe a disposizione direttamente in CSS, quindi polygon, circle, ellipse e inset (per creare rettangoli). Queste forme sono disponibili nelle forme supportate dal W3C. Nel dettaglio abbiamo le seguenti funzioni a disposizione:
- inset(from-top from-right from-bottom from-left): Per creare forme rettangolari
- polygon(x1 y1, x2 y2, x3 y3, …): Per creare poligoni di qualsiasi tipo e forma
- circle(raggio at center-x center-y): Per creare cerchi
- ellipse(raggio1 raggio2 at center-x center-y): Per creare ellissi
SVG
Un’altra possibilità offerta da clip-path è quella di richiamare una forma definita attraverso SVG. La forma può essere descritta direttamente all’interno del codice HTML o richiamata da un file esterno. Occhio però a quest’ultimo caso perchè presenta dei problemi di compatibilità che vedremo tra poco.
Compatibilità clip-path
Veniamo subito all’aspetto negativo di questa proprietà: la compatibilità. Se infatti esaminiamo lo stato attuale su caniuse.com, possiamo notare che solo Firefox garantisce ad oggi la piena compatibilità di questa proprietà. Gli altri browser garantiscono un parziale supporto, spesso attraverso io suffisso “-webkit-”. In particolare, la gestione di SVG esterni non è ancora possibile su quasi tutti i browser.
Esempi pratici
Come accennato sopra, clip-path può essere usato in diversi modi e qui sotto vedremo alcuni esempi. Partiamo quindi da una semplicissima immagine, che nella sua forma originale trovate qui sotto:
N.B.: Il bordo grigio che vedete intorno alle immagini è stato aggiunto solamente per mettere in evidenza il taglio rispetto alle dimensioni originali dell’immagina. Di norma non è visibile.
Shape CSS “inset()”
Tramite questo valore possiamo creare ritagli rettangolari. Basta passare 4 parametri:
- Il primo parametro indica il taglio dall’alto (from-top)
- Il secondo parametro indica il taglio da destra (from-right)
- Il terzo parametro indica il taglio dal basso (from-bottom)
- Il quarto parametro indica il taglio da sinistra (from-left)
Quindi, se ad esempio imposto questa regola al tag <img> ottengo il seguente risultato:
img {
clip-path: inset(20% 10% 5% 30%);
}
Shape CSS “polygon()”
Attraverso questa forma possiamo creare qualsiasi tipo di poligono. Ci basta indicare la coppia di coordinate per ogni punto. Ogni coppia è separata tra loro da una virgola. Mentre le singole coordinate X/Y sono separate tra loro da uno spazio.
Impostando quindi la regola qui sotto, ottengo il seguente risultato:
#img-polygon {
clip-path: polygon(0 0, 94% 9%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
Shape CSS “circle()”
Questa forma permette di creare un ritaglio a forma di cerchio. Se impostato un solo parametri (il raggio) il taglio partirà dal centro della figura. Se invece vogliamo che il raggio parta da un altro punto, possiamo indicare le coordinate come qui sotto:
#img-cirle {
clip-path: circle(45% at 17% 50%);
}
Shape CSS “ellipse()”
Simile sintatticamente alla forma circolare, qui indichiamo i 2 raggi dell’ellisse. Anche in questo caso posso posizionare diversamente il centro dell’ellisse.
Ecco qui un esempio pratico:
#img-ellipse {
clip-path: ellipse(65% 26% at 35% 50%);
}
Shape SVG
Se abbiamo la necessità di creare maschere di ritaglio più complesse, ad esempio fondendo elementi poligonali e curve, non ci resta che usare i vettori SVG.
Per farlo vi consiglio di preparareil file SVG attraverso appositi programmi di grafica vettoriale (come Adobe Illustrator o XD) e poi esportare il file in SVG. Possiamo anche scrivere direttamente l’SVG a mano ma l’operazione può risultare più laboriosa (a seconda della forma da ricreare).
Una volta che abbiamo a disposizione il file possiamo richiamarlo direttamente con il comando: clip-path: url(file.svg#elem)
Richiamando quindi il file esternamente e riferendoci all’elemento con ID “elem” al suo interno. Questa è sicuramente la soluzione più comoda perchè ci permette di mantenere separati HTML e maschera di ritaglio. Ma ad oggi solamente Firefox permette di fare questo. Tutti gli altri browser, come visto prima, permettono il solo richiamo di codice SVG inlinea.
Vi consiglio quindi di inserire direttamente il codice SVG nel vostro HTML e richiamare internamente l’elemento di vostro interesse, come nell’esempio qui sotto:
HTML
<div class="image">
<svg>
<clipPath id="clip-text">
<text x="50%" y="50%" fill="red" text-anchor="middle">HELLO!</text>
</clipPath>
</svg>
<img id="img-svg" src="img/bora-bora.jpg" alt="Bora Bora" class="img-fluid">
</div>CSS
.image {
border: 1px solid #ccc;
position: relative;
}
svg {
font-family: "Arial Black", sans-serif;
font-size: 80px;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#img-svg {
clip-path: url("#clip-text");
}E il risultato di questo codice sarà il seguente:
Come vedete, utilizzare questa proprietà non è complicato e ci evita di ritagliare a monte l’immagine da inserire nel nostro layout web. Un’altro uso interessante è attraverso le transizioni e animazioni CSS3 che permettono di animare il ritaglio e, ad esempio, far comparire un’immagine con effetto a “cerchio”. State attenti solamente alla compatibilità (soprattutto se lavorate con SVG).
Infine vi lascio un link che può esservi utile: se siete pigri nel calcolare i punti delle varie forme, potete far uso di un generatore di clip-path che si occupa di creare automaticamente il codice in base al ritaglio visivo che impostate. Utile no? ecco qui il link: https://bennettfeely.com/clippy/
Per concludere, trovate qui sotto il Codepen dell’esercizio funzionante. Buono sviluppo!
Ancora nessun commento