Galleria di immagini con i CSS3

I CSS3 hanno ormai da un po’ lasciato la fase di sperimentazione e, grazie a browser più recenti, possono essere già utilizzati nei nostri progetti.

Con questo tutorial spiegherò come realizzare un accattivante effetto sulle immagini sfruttando le caratteristiche di controllo sui bordi arrotondati e supporto RGBa che i CSS3 hanno introdotto.

Prima di iniziare: Opacity o RGBa nei CSS3?

L’idea di una proprietà che riuscisse a rendere trasparente un particolare elemento era già da tempo utilizzata nei CSS, e si tratta della proprietà opacity. Ovviamente tale proprietà viene supportata nativamente dai browser più recenti quali Firefox, Safari, Opera e Chrome, mentre per Internet Explorer è necessario applicare dei filtri Microsoft che comunque permettono l’effetto desiderato.

Purtroppo la proprietà opacity ha un problema, quello di far ricadere le sue impostazioni, quindi l’effetto trasparenza, anche su tutti gli elementi figli dell’elemento su cui è impostata. Questo significa che se rendete trasparente un box con la proprietà opacity, otterrete trasparente anche il testo che è contenuto al suo interno.

Questa limitazione non affligge invece la proprietà RGBa; infatti RGBa imposta il valore di opacità solo per la singola dichiarazione a cui é legata.

Vediamo nel codice qual è la reale differenza:

#box1 {
	width:200px;
	height:200px;
	background-color: rgb(226,0,26);
	}
#box2 {
	width:200px;
	height:200px;
	background-color: rgb(0,107,179);
	opacity:0.5;
	margin:-150px 0 0 60px;
	}

Osservando l’esempio uno si può notare come il box azzurro, sovrapposto a quello rosso, presenti un’opacità impostata a 0.5 e che anche il testo all’interno del div eredita il valore di opacità del suo genitore.

A questo punto proviamo ad utilizzare la trasparenza RGBa con il seguente codice e notiamo anche le differenze:

#box2 {
	width:200px;
	height:200px;
	background-color: rgba(0,107,179,0.5);
	margin:-150px 0 0 60px;
	}

Come si può notare nell’esempio due il div azzurro rimane sempre trasparente, però, a differenza del precedente, il testo non eredita la trasparenza e rimane sempre visibile.

La sintassi per utilizzare la trasparenza RGBa non é molto differente da quella vista precedentemente, bisogna solamente aggiungere i valori alfa di trasparenza (RGBa). Quindi in una dichiarazione dello sfondo bisogna scrivere rgba e poi aggiungere i primi tra valori dedicati al colore e il quarto che gestisce il livello di opacità.

I bordi arrotondati

Con i CSS3 è possibile controllare i bordi degli elementi grazie all’ausilio della proprietà border-radius; con questa possiamo arrotondare quindi gli angoli dei nostri elementi e possiamo decidere l’ampiezza dell’angolo impostando direttamente i pixel.

I browser e i prefissi proprietari

Bisogna chiarire subito un aspetto: i CSS3 non sono ancora uno standard, motivo per cui gli sviluppatori dei browser ne utilizzano le proprietà tramite un prefisso proprietario. Per Firefox/Mozilla si utilizza -moz-, per Safari/Chrome/Webkit si utilizza -webkit-.

Quindi oggi possiamo utilizzare queste implementazioni per specificare le proprietà, una volta che i CSS3 diventeranno standard non dovremo ritornare sul nostro codice, ma sarà già gestito.

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.