Ci sono alcune proprietà CSS molto utili (largamente supportate da tutti i browser), ma non molto sfruttate. Forse perché non tutti le conoscono. Non sto parlando di spettacolari e innovative proprietà CSS3, ma semplici proprietà già presenti nel vecchio CSS2.
Il CSS clip è una di queste. La proprietà css “clip” è come una maschera poiché consente di delimitare il contenuto di un elemento entro una forma rettangolare personalizzabile tramite una posizione (absolute).
Vediamo il suo impiego anche tramite un esempio.
Supponiamo che questa sia l’immagine su cui applicare il clip :
Il codice html ad essa relativa potrebbe esser del tipo :
Quindi, il clip va applicato sfruttando la classe clipwrapper sul primo div e, in particolare, la classe clip sul secondo che contiene l’immagine.
.clipwrapper{
position:relative;
height:225px;
}
.clip{
position:absolute;
clip:rect(50px 218px 155px 82px);
}
Attualmente la proprietà clip supporta la forma di un rettangolo (altre forme potrebbero esser supportate in futuro) tramite rect che richiede 4 coordinate : Top, Right, Bottom, Left .
Ecco come, in tal caso, verrà calcolata la regione di clipping facendo ben attenzione al rispetto delle misure associate alla sequenza Top, Right, Bottom, Left come mostra la figura sottostante :
Ecco, infine, il risultato finale :
La classe clip qui utilizzata, usa la famosa rotazione TRBL come sintassi. Al posto di utilizzare i pixels come unità di lunghezza, si possono utilizzare altre unità oppure anche percentuali. Infine, è possibile anche annidare più clips.
