CSS  »  Articoli  »  CSS 3 

Esempi

Adesso che ci siamo chiariti bene i concetti legati alle proprietà e caratteristiche dei CSS3 vediamo come utilizzare le combinazioni per ottenere dei gradevoli effetti sulle immagini dei nostri lavori web.

Il nostro scopo sarà quello di cercare di avere un gradevole effetto grafico con bordi arrotondati ed ombre esterne sulle immagini di una qualsiasi pagina web, ovviamente utilizzando solamente CSS3.

.imgleft {
	float:left;	
	display:block;
	margin:5px 10px;
	padding:4px;
	border:1px solid #ccc;
	border-color:rgba(0,0,0,.25);
		-moz-border-radius:5px;
		-moz-box-shadow:0 1px 3px rgba(0,0,0,.15);
		-webkit-border-radius:5px;
		-webkit-box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.imgright {
	float:right;	
	display:block;
	margin:5px 10px;
	padding:4px;
	border:1px solid #ccc;
	border-color:rgba(0,0,0,.25);
		-moz-border-radius:5px;
		-moz-box-shadow:0 1px 3px rgba(0,0,0,.15);
		-webkit-border-radius:5px;
		-webkit-box-shadow:0 1px 3px rgba(0,0,0,.15);
}

Il codice precedente permette di ottenere delle immagini allineate a destra oppure a sinistra con gli effetti desiderati; osserviamo l’esempio per renderci conto di ciò che abbiamo scritto.

Ovviamente per ottenere il medesimo effetto su tutti i browser abbiamo utilizzato i prefissi spiegati precedentemente.

Galleria d’immagini con alcuni effetti CSS3

Una variante dell’impiego di queste regole CSS3 si possono ulteriormente adoperare per creare un’interessante effetto su una possibile galleria d’immagini, sfruttando sempre i bordi arrotondati con effetto ombra e in più applicando un effetto hover creato sempre con i CSS3. Vediamo come procedere; partiamo dal codice HTML impiegando le liste non ordinate grazie alla loro estrema dinamicità:

<ul class="photos">
	<li><a href="#"><img alt="Spaces 1" src="01-b.png" /></a></li>
	<li><a href="#"><img alt="Spaces 2" src="02-b.png" /></a></li>
	<li><a href="#"><img alt="Spaces 3" src="03-b.png" /></a></li>
	<li><a href="#"><img alt="Plants 1" src="04-b.png" /></a></li>
	<li><a href="#"><img alt="Plants 2" src="05-b.png" /></a></li>
	<li><a href="#"><img alt="Plants 3" src="06-b.png" /></a></li>
</ul>

A questo punto ci concentriamo sul CSS per personalizzare l’aspetto e il comportamento:

ul.photos { margin:9px 0 18px -10px;}
ul.photos li { display:inline;}
ul.photos a {
	display:inline;
	float:left;
	margin:0 0 9px 10px;
	line-height:1;
	text-decoration:none;
}
ul.photos img {
	display:block;
	margin:0 0 5px;
	padding:4px;
	border:1px solid #ccc;
	border-color:rgba(0,0,0,.25);
		-moz-border-radius:5px;
		-moz-box-shadow:0 1px 3px rgba(0,0,0,.15);
		-webkit-border-radius:5px;
		-webkit-box-shadow:0 1px 3px rgba(0,0,0,.15);
		-webkit-transition:all 0.15s ease-out;
}
ul.photos a:hover img {
	border-color:#999;
	border-color:rgba(201,2,92,.5);
		-moz-box-shadow:0 0 5px rgba(201,2,92,.5);
		-webkit-box-shadow:0 0 5px rgba(201,2,92,.5);
}

In pratica il CSS imposta il bordo con ombra e angoli arrotondati sulle immagini della nostra galleria; inoltre si può utilizzare un interessante effetto evidenziato esterno sulle immagini, con la sfumatura sempre creata tramite i CSS3. A riguardo, con Safari/Chrome/Webkit, si potrà notare un gradevole effetto di transizione esterna, aumentando così la bellezza estetica dei nostri lavori. Purtroppo su Firefox/Mozilla si ha sempre l’effetto evidenziato esterno, ma si dovrà rinunciare all’effetto di transizione.

Si può dare uno sguardo all’esempio finale per rendersi conto delle caratteristiche già oggi offerte dai CSS3 grazie a browser recenti, sempre in attesa che della convalida di tutti gli standard da parte del W3C.

Altri articoli

Altre guide

Altre newsletter