5 Semplici, ma utili proprietà CSS: CSS Clip

Parte Prima: CSS Clip

Questa serie di 5 posts riguarda altrettante utili proprietà con cui essere familiari, ma che vengono usate raramente. Non si tratta di spettacolari proprietà CSS3. Mi riferisco al vecchio CSS2:  clip, min-height, white-space, cursor, e display che sono largamente supportate da tutti i browser. Potresti rimanere sorpreso dalla loro enorme utilità.

Questi tutorial sono tratti (e tradotti) da uno dei migliori siti di risorse per design web e grafico: http://www.webdesignerwall.com/

1. CSS Clip
La proprietà  css “clip” è come una maschera. Ti permette di delimitare il contenuto di un elemento entro una forma  rettangolare. Per delimitare un elemento si deve specificare la posizione su absolute. Quindi specificare I valori “top, right, bottom,  left” relativi ad un elemento.

css-clip

Esempio di Image Clip

Il seguente esempio mostra come delimitare (to mask), un’immagine usando la proprietà “clip”. Prima specifica l’elemento <div> su  “position: relative”. Poi, specifica l’elemento <img> su “position: absolute” ed I valori “rect”.

img-clip

.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}

Image Resize and Clip
In questo esempio, si mostra come resize e clip le immagini. L’immagine originale è di forma rettangolare e si vuole scalarla del 50% per creare una galleria thumbnail di forma quadrata. Si usano le proprietà “width” e “height” per resize l’immagine e delimitarla con la proprietà “clip”. Quindi si usa la proprietà “left” per spostarla sulla sinistra di 15px

thumb-gallery

.gallery li {
float: left;
margin: 0 10px 0 0;
position: relative;
width: 70px;
height: 70px;
border: solid 1px #000;
}
.gallery img {
width: 100px;
height: 70px;
position: absolute;
clip: rect(0 85px 70px 15px);
left: -15px;
}

E’ stato utile questo post?  Lascia un commento….