CSS  »  Articoli  »  CSS 3 

In un precedente articolo abbiamo visto come aggiungere interessanti effetti alle immagini con il CSS3 personalizzandone le forme; in questo articolo riprenderemo la serie di esempi per vedere come aggiungere nuovi effetti e animazioni sfruttando l'effetto hover su di esse.

Immagini cross-browser con jQuery

Prima di procedere rivediamo brevemente il piccolo frammento di codice Javascript che utilizzeremo per risolvere i problemi di renderizzazione che la maggior parte dei browser hanno quando si usano alcune proprietà CSS3 direttamente sulle immagini:

$(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);
    });
});

Effetto Riflesso

Applicare un effetto riflesso alle immagini è piuttosto semplice; in questo esempio applicheremo anche un piccolo effetto transizione verso l'alto al passaggio del mouse.

span {
	-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.5), 
                     inset 0 2px 0 rgba(255,255,255,.5), 
                     inset 0 -1px 0 rgba(0,0,0,.5);
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.5), 
                        inset 0 2px 0 rgba(255,255,255,.5), 
                        inset 0 -1px 0 rgba(0,0,0,.5);
	box-shadow: inset 0 0 1px rgba(0,0,0,.5), 
                inset 0 2px 0 rgba(255,255,255,.5), 
                inset 0 -1px 0 rgba(0,0,0,.5);

	-moz-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s;
	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
span:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 30px;
	bottom: -31px;
	left: 0;

	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;

	background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
	background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
}
span:hover {
	position: relative;
	top: -8px;
}

Il codice iniziale è quello utilizzato per il Card Style dell'articolo precedente; è stato solo aggiunto l'effetto transizione che andremo ad applicare sulla posizione dell'immagine.

La seconda regola utilizza lo pseudo-attributo :after per inserire l'effetto riflesso. Il colore dell'effetto è stato dato attraverso la proprietà linear-gradient con gli hack per Mozilla e Safari/Chrome.

L'ultima regola è semplicissima, utilizza l'effetto hover per spostare verso l'alto l'immagine.

Il risultato è il seguente:

Figura 1 - Effetto Riflesso

Esempio

Altri articoli

Altre guide

Altre newsletter