Effetti per le immagini con i CSS3, personalizzare le forme

La versione 3 del CSS introduce nuove interessanti proprietà che sempre più spesso ci consentono di implementare effetti grafici, anche piuttosto avanzati, senza dover utilizzare immagini aggiuntive.

Attraverso due semplici proprietà, border-radius e box-shadow, è possibile realizzare diversi effetti grafici che finora richiedevano l’ausilio un software grafico.

Purtroppo non tutte queste tecniche sono compatibili anche con Internet Explorer. Alcuni filtri di Internet Explorer e alcune librerie Javascript online consentono di limitare i danni e simulare queste proprietà ma gli effetti non sempre sono quelli desiderati.

Perché Internet Explorer 9 interpreti nativamente almeno alcune delle regole che utilizziamo possiamo introdurre questa direttiva <meta> nell'head della pagina:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Immagini circolari

Il primo effetto che è possibile applicare alle immagini è sicuramente quello di poter realizzare immagini circolari partendo dalle stesse in versione normale.

Partendo da delle immagini come le seguenti:

ed applicando un border-radius di valore pari alle dimensioni dell’immagine stessa (in questo caso 180px) realizzeremo delle immagini circolari come nell’esempio in basso (Figura 2):

Il codice che abbiamo utilizzato è il seguente:

img {
    -moz-border-radius: 180px;
    -webkit-border-radius: 180px;
    border-radius: 180px;
}

Esempio

Card Style

Per realizzare un effetto Card Style abbiamo bisogno di un pò di Javascript di ausilio. In realtà lo stesso effetto sarebbe realizzabile anche con semplice HTML ma diventa un po’ complicato per via del codice aggiuntivo che bisogna aggiungere ad ogni immagine.

Con alcune righe di codice jQuery andremo ad inserire uno <span> come elemento genitore dell’immagine a cui assegneremo le seguenti proprietà inline:

position:relative;
display:inline-block;
background:url('url dell immagine') no-repeat center center;
width: width dell immagine;
height: height dell immagine;

Abbiamo bisogno di questo piccolo hack poichè quando utilizziamo le proprietà menzionate all’inizio dell’articolo direttamente sulle immagini, i browser hanno qualche problema nel renderizzarle correttamente. Il codice jQuery che utilizzeremo, quindi, è il seguente:

$(document).ready(function(){
    $('img').load(function(){
        var t = $(this);
        t.wrap(function(){
            return $('', {
                'class' : t.attr('class'),
                css   : {
                    position   : 'relative',
                    display    : 'inline-block',
                    background : 'url('+ t.attr('src') +') no-repeat center center',
                    width      : t.width() + 'px',
                    height     : t.height() + 'px'
                }
            });
        }).css('opacity', 0);
    });
});

A questo punto possiamo vedere il codice CSS necessario per realizzare l’effetto Cart Style:

span {
    -moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8),
                     inset 0 2px 0 rgba(255,255,255,.5),
                     inset 0 -1px 0 rgba(0,0,0,.4);
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8),
                        inset 0 2px 0 rgba(255,255,255,.5),
                        inset 0 -1px 0 rgba(0,0,0,.4);
    box-shadow: inset 0 0 1px rgba(0,0,0,.8),
                inset 0 2px 0 rgba(255,255,255,.5),
                inset 0 -1px 0 rgba(0,0,0,.4);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

Il risultato è il seguente:

Esempio

Cutout Style

Un altro effetto interessante che possiamo realizzare è l’effetto "incasso" delle immagini (effetto Cutout).

Utilizzando lo stesso codice Javascript visto in precedenza, andiamo ad assegnare la seguente regola CSS:

span  {
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2),
                     inset 0 4px 5px rgba(0,0,0,.6),
                     inset 0 1px 0 rgba(0,0,0,.6);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2),
                        inset 0 4px 5px rgba(0,0,0,.6),
                        inset 0 1px 0 rgba(0,0,0,.6);
    box-shadow: 0 1px 0 rgba(255,255,255,.2),
                inset 0 4px 5px rgba(0,0,0,.6),
                inset 0 1px 0 rgba(0,0,0,.6);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

Il codice è molto simile a quello dell’esempio precedente. Quello che abbiamo cambiato è il colore delle varie proprietà box-shadow e la loro posizione.

Il risultato è il seguente:

Esempio

Embossed Style

Lo stile embossed è molto simile allo stile Card visto in precedenza con un effetto più accentuato nella parte bassa dell’immagine.

Come per gli altri esempi visti finora le due regole che utilizziamo sono sempre border-radius e box-shadow :

span {
    -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8),
                     inset 0 2px 0 rgba(255,255,255,.5),
                     inset 0 -7px 0 rgba(0,0,0,.6),
                     inset 0 -9px 0 rgba(255,255,255,.3);
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8),
                        inset 0 2px 0 rgba(255,255,255,.5),
                        inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
    box-shadow: inset 0 0 2px rgba(0,0,0,.8),
                inset 0 2px 0 rgba(255,255,255,.5),
                inset 0 -7px 0 rgba(0,0,0,.6),
                inset 0 -9px 0 rgba(255,255,255,.3);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

Il risultato è il seguente:

Esempio

Effetto sovrapposizione lucida

Lo stile glossy è stato molto utilizzato negli scorsi anni e consiste nel utilizzare un overlay opaco su immagini o loghi. Grazie al CSS3 possiamo realizzare lo stesso effetto con pochissime righe di codice.

Rispetto agli esempi visti finora, andiamo ad aggiungere un gradiente lineare all’immagine con lo pseudo attributo :after:

span {
	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
span:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%,
                    rgba(255,255,255,.1) 100%);
	background: -webkit-gradient(linear, left top, left bottom,
                       color-stop(0%,rgba(255,255,255,0.7)),
                       color-stop(100%,rgba(255,255,255,.1))
                    );
	background: linear-gradient(top, rgba(255,255,255,0.7) 0%,
                    rgba(255,255,255,.1) 100%);
}

Ed ecco cosa otteniamo:

Esempio

Soft Embossed Style

Ora che abbiamo appena visto come realizzare un effetto embossed, possiamo riprendere l’esempio e renderlo più “soft” ovvero più sfumato:

span {
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,1),
                     inset 0 2px 1px rgba(255,255,255,.5),
                     inset 0 -9px 2px rgba(0,0,0,.6),
                     inset 0 -12px 2px rgba(255,255,255,.3);
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1),
                        inset 0 2px 1px rgba(255,255,255,.5),
                        inset 0 -9px 2px rgba(0,0,0,.6),
                        inset 0 -12px 2px rgba(255,255,255,.3);
    box-shadow: inset 0 0 4px rgba(0,0,0,1),
                inset 0 2px 1px rgba(255,255,255,.5),
                inset 0 -9px 2px rgba(0,0,0,.6),
                inset 0 -12px 2px rgba(255,255,255,.3);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

Il risultato è il seguente:

Esempio

Per approfondire:

• La proprietà border-radius - Guida CSS3
• La proprietà box-shadow - Guida CSS3