Créer une galerie d'images Polaroid

Uniquement en CSS

Dans ce tutoriel nous allons voir comment créer une galerie d'images Polaroid en utilisant uniquement du CSS. 2 commentaires Donner une note à l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Create Polaroid Images With CSS.

II. Introduction

Une image Polaroid est une icône représentant une image. Cela peut paraître étrange de vouloir afficher des images Polaroid sur un écran d'ordinateur, cependant ça peut être un moyen efficace de créer une galerie d'images.

Nous allons donc nous intéresser aux images Polaroid dans ce tutoriel. Nous allons apprendre à créer une galerie de ces images uniquement grâce au CSS.

III. Le code HTML

Pour commencer nous allons créer le code HTML qui contiendra les images Polaroid. Celui-ci est très simple, il contient seulement les images qui seront affichées dans une balise <a></a> afin d'avoir un lien sur celles-ci. Nous allons préciser l'attribut title pour les ancres, car ce texte sera associé à chaque image.

 
Sélectionnez
<div class="polaroid-images">
        <a href="" title="Cave"><img height="200" src="images/water.jpg" alt="Cave" title="Cave" /></a>
        <a href="" title="Island"><img height="200" src="images/water2.jpg" alt="Island" title="Island" /></a>
        <a href="" title="Islands Forest"><img height="200" src="images/water3.jpg" alt="Islands Forest" title="Islands Forest" /></a>
        <a href="" title="Decking"><img height="200" src="images/water4.jpg" alt="Decking" title="Decking" /></a>
        <a href="" title="Lake"><img height="200" src="images/water5.jpg" alt="Lake" title="Lake" /></a>
        <a href="" title="Mountains"><img height="200" src="images/water6.jpg" alt="Mountains" title="Mountains" /></a>
        <a href="" title="Forest"><img height="200" src="images/water7.jpg" alt="Forest" title="Forest" /></a>
        <a href="" title="Coast Valley"><img height="200" src="images/water8.jpg" alt="Coast Valley" title="Coast Valley" /></a>
</div>

IV. Le code CSS

IV-A. Le style Polaroid

Pour transformer nos images en Polaroid, nous allons appliquer un style particulier aux liens contenant ces dernières. Et c'est grâce à ce style que nous allons pouvoir utiliser le contenu de l'attribut title comme légende de nos images. Nous allons donc appliquer un arrière-plan blanc et un padding à nos liens pour donner l'effet Polaroid.

Le padding en dessous de l'image doit être légèrement plus grand que sur les autres côtés, car c'est à cet endroit qu'on affichera notre texte.

 
Sélectionnez
.polaroid-images a
{
        background: white;
        display: inline;
        float: left;
        margin: 0 15px 30px;
        padding: 10px 10px 25px;
        text-align: center;
        text-decoration: none;
        -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
        box-shadow: 0 4px 6px rgba(0,0,0,.3);
        -webkit-transition: all .15s linear;
        -moz-transition: all .15s linear;
        transition: all .15s linear;
        z-index:0;
}

À ce stade nous n'avons pas encore de texte affiché sous les images. Nous allons donc utiliser la pseudo-classe CSS :after afin d'ajouter un nouvel élément après nos liens. L'avantage de cette méthode est que nous allons pouvoir récupérer le contenu de l'attribut title de nos liens avec la propriété CSS content.

 
Sélectionnez
.polaroid-images a:after {
        color: #333;
        font-size: 20px;
        content: attr(title);
        position: relative;
        top:15px;
}

Enfin on s'assure que quelle que soit l'image elle rentrera toujours dans notre zone HTML.

 
Sélectionnez
.polaroid-images img {
        display: block;
        width: inherit;
}

IV-B. Tourner les images

Afficher des images qui ressemblent à des Polaroid n'est pas suffisant, il va falloir ajouter un peu d'interactions sur ces images. Nous pouvons faire en sorte que les images aient l'air d'avoir été jetées, comme on jette des Polaroid sur une table pour les regarder. Pour créer cet effet, nous allons tourner légèrement chaque image de manière aléatoire.

Pour obtenir une rotation aléatoire nous allons utiliser le sélecteur CSS nth-child pour atteindre toutes les images et les tourner en fonction de l'ordre avec lequel elles apparaissent sur la page.

 
Sélectionnez
.polaroid-images a:nth-child(2n)
{
        -webkit-transform: rotate(4deg);
        -moz-transform: rotate(4deg);
        transform: rotate(4deg);
}
.polaroid-images a:nth-child(3n) {
        -webkit-transform: rotate(-24deg);
        -moz-transform: rotate(-24deg);
        transform: rotate(-24deg);
}
.polaroid-images a:nth-child(4n)
{
        -webkit-transform: rotate(14deg);
        -moz-transform: rotate(14deg);
        transform: rotate(14deg);
}
.polaroid-images a:nth-child(5n)
{
        -webkit-transform: rotate(-18deg);
        -moz-transform: rotate(-18deg);
        transform: rotate(-18deg);
}

Nous pouvons ensuite créer un effet de « ramassage » des Polaroid en utilisant l'événement hover de la souris. Comme les images seront légèrement tournées, au survol de la souris on les redimensionnera et on annulera la rotation pour les remettre droites.

On redéfinit donc la rotation à 0, l'échelle à 120% et on ajoute une ombre pour donner l'impression que l'image s'élève au-dessus de la page.

 
Sélectionnez
.polaroid-images a:hover{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        transform: scale(1.2);
        z-index:10;
        -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
        -moz-box-shadow: 0 10px 20px rgba(0,0,0,.7);
        box-shadow: 0 10px 20px rgba(0,0,0,.7);
}

Et c'est tout ce dont nous avions besoin pour créer notre galerie !

V. Conclusion

Nous avons vu dans ce tutoriel comment créer une galerie d'images façon Polaroid et ce uniquement avec du code CSS (et un peu de HTML bien évidemment).
Vous pouvez vous amuser à essayer d'autres effets pour vos galeries d'images !

VI. Liens

Vous pouvez consulter la démonstration pour avoir un aperçu du rendu dans un navigateur.

VII. Remerciements

Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également zoom61 pour sa relecture orthographique.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2012 Paul Underwood. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.