Créer une galerie de photos polaroids en CSS

Voici un tutorial expliquant comment créer une galerie photos au style "polaroid", en utilisant que du CSS, sans retouche photoshop des images.

Très à la mode, les photos présentées dans des polaroid sur Internet sont du plus bel effet, mais nécessitent souvent une retouche graphique.

Line25 explique comment à l'aide d'instructions CSS3 (Oubliez donc Internet Explorer ...), nous pouvons créer cette galerie.

Tout d'abord, il faut disposer les images dans une liste HTML:

<ul class="gallery">
	<li><a href="http://www.lienversgalerie.com" class="pic-1"><img src="/billet/add/id/images/1.jpg" alt="Photo 1" /></li>
	<li><a href="http://www.lienversgalerie.com" class="pic-2"><img src="/billet/add/id/images/2.jpg" alt="Photo 2" /></li>
	<li><a href="http://www.lienversgalerie.com" class="pic-3"><img src="/billet/add/id/images/3.jpg" alt="Photo 3" /></li>
	<li><a href="http://www.lienversgalerie.com" class="pic-4"><img src="/billet/add/id/images/4.jpg" alt="Photo 4" /></li>
	<li><a href="http://www.lienversgalerie.com" class="pic-5"><img src="/billet/add/id/images/5.jpg" alt="Photo 5" /></li>
	<li><a href="http://www.lienversgalerie.com" class="pic-6"><img src="/billet/add/id/images/6.jpg" alt="Photo 6" /></li>
</ul>

On applique une première couche aux liens sur les images:

ul.gallery li a {
    float: left;
    padding: 10px 10px 25px 10px;
    background: #eee;
    border: 1px solid #fff;
    -moz-box-shadow: 0px 2px 15px #333;
    position: relative;
}

Jusque là, le CSS reste simple, à part l'instruction -moz-box-shadow qui va créer un effet d'ombre autour des box.

Et pour finir, on ajoute une couche de CSS 3 pour placer les images de manière désordonnées avec des z-index différents.

ul.gallery li a.pic-1 {
    z-index: 1;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
}
ul.gallery li a.pic-2 {
    z-index: 5;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
}
ul.gallery li a.pic-3 {
    z-index: 3;
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
}

Et lorsque l'on passe la souris sur une des images, il faut qu'elle apparaisse en premier plan:

ul.gallery li a:hover {
    z-index: 10;
    -moz-box-shadow: 3px 5px 15px #333;
}

Pas mal comme effet non ?

Vous pouvez tester la démo sur le site officiel