Vous l'avez noté, la technologie Flash a presque disparu de nos pages Web. Et c'est une bonne chose. Lourde à gérer et à modifier, peu ou pas du tout ergonomique, c'est à se demander comment on a pu s'en servir aussi longtemps.
De son côté, le duo HTML5 et CSS3 ont fait d'énormes progrès, à tel point qu'ils sont devenus la référence.
Voici 15 effets CSS3 à appliquer à vos images et qui vont vous étonner !
Le départ
Voici 3 images "brutes", c'est à dire qu'aucun effet CSS s'est appliqué sur ces images. C'est le cas le plus fréquent lorsqu'une image est affichée dans une page Web.
La structure HTML
Voici à quoi ressemble la structure HTML des images présentées ici.
Rien de compliqué : une div sur laquelle on applique une classe pour l'effet (zoom, par exemple) et une classe pour la mise en forme (colonne).
<div class="zoom colonne"> <div> <div><img src="images/img1.jpg" /></div> </div> <div> <div><img src="images/img2.jpg" /></div> </div> <div> <div><img src="images/img3.jpg" /></div> </div> </div>
...et la mise en forme avec les CSS :
.colonne {
margin: 15px 25px 0 25px;
padding: 0;
}
.colonne:last-child {
padding-bottom: 60px;
}
.colonne::after {
content: '';
clear: both;
display: block;
}
.colonne div {
position: relative;
float: left;
width: 200px;
height: 150px;
margin: 0 0 0 35px;
padding: 0;
}
.colonne div:first-child {
margin-left: 0;
}
div {
width: 200px;
height: 150px;
margin: 0;
padding: 0;
background: #F4F4F4;
overflow: hidden;}
1. Zoom
Passons aux choses sérieuses !
Ici, nous allons afficher un effet "zoom" sur l'image au survol de la souris. La fonction CSS scale de la propriété CSS transform permet d'obtenir un agrandissement (ou une réduction) de l'élément HTML concerné. C'est ce qu'il nous faut !
.zoom div img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.zoom div:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
2. Rotation
Ici, nous allons basculer l'image sur un côté grâce à la propriété rotate.
/* Rotation */
.rotate div img {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.rotate div:hover img {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
3. Dézoomer
Après avoir zoomé sur les images, nous allons maintenant dézoomer !
Si vous avez compris le principe du premier exemple, celui-ci ne devrait pas vous poser de problèmes : c'est "presque" pareil !
/* Dézoomer */
.zoom-out div img {
-webkit-transform: scale(1.25);
transform: scale(1.25);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.zoom-out div:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
4. Image ronde
Plutôt que de vous embetter à découper vos images avec un logiciel de retouche photo, utilisez un peu de CSS pour rendre une image ronde !
/* Image ronde */
.rounded div img {
width: 200px; /* largeur de l'image */
height: auto; /* hauteur de l'image */
-webkit-transition: .3s ease-in-out !important;
transition: .3s ease-in-out !important;
}
.rounded div:hover img:hover {
width: 150px; /* on affiche l'image au carré */
height: 150px;
border-radius: 50%;
}
Explications : pour avoir une image ronde avec la propriété border-radius, il faut que l'image de départ soit carrée. A défaut, vous obtiendrez une image ovale (ce qui est joli aussi).
5. Slide
Le slide est un effet visuel qui simule un déplacement latéral de l'image. Voyons à quoi ressemble le code :
/* Slide */
.slide div img {
margin-left: 0px;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.slide div:hover img {
margin-left: -30px;
}
Explications : pour avoir un effet slide dans l'autre sens, il vous suffit de remplacer la propriété margin-left par la propriété margin-right ou d'appliquer une valeur positive à margin-left.
6. Rotation et Dézoome
Toujours plus fort grâce à CSS3, nous allons tourner et dézoomer nos images en même temps ! Encore une fois, vous allez voir que ce n'est pas très compliqué à mettre en oeuvre.
/* Rotation et dézoome */
.rotate-zoom-out div img {
-webkit-transform: rotate(10deg) scale(1.25);
transform: rotate(10deg) scale(1.25);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.rotate-zoom-out div:hover img {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
7. Flou
Flouter une image peut être intéressant afin de masquer une image ou pour "forcer" vos visiteurs à passer leur souris dessus afin de l'afficher parfaitement nette. C'est ce que nous allons voir ici.
/* Flou */
.blur div img {
-webkit-filter: blur(3px);
filter: blur(3px);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.blur div:hover img {
-webkit-filter: blur(0);
filter: blur(0);
}
Explications : pour avoir un flou plus prononcé, il vous suffit d'augmenter la valeur indiquée à la propriété blur : 5px, par exemple.
8. Noir et blanc
La magie et la poésie des images en noir et blanc, on ne s'en lasse pas ! CSS va vous en faire voir de toutes les couleurs grâce au filtre grayscale !
/* Noir et blanc */
.grayscale div img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.grayscale div:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
Explications : vous pouvez utiliser des valeurs intermédiaires pour la propriété grayscale : 25%, 42%, 77%, etc.
9. Sépia
Le sépia, c'est cette teinte délicieusement rétro qu'ont les photographies de nos grands-parents. CSS3 vous permet de voyager dans le temps et de revenir à cette époque !
/* Sepia */
.sepia div img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.sepia div:hover img {
-webkit-filter: sepia(0);
filter: sepia(0);
}
10. Morph
Attention, on commence à mélanger les effets entre eux. Ici, on va arrondir les images et les faire tourner sur elles-mêmes en utilisant simplement des propriétés CSS3.
/* Morph */
.morph div img {
width: 200px;
height: 150px;
-webkit-filter: grayscale(0) blur(0px);
filter: grayscale(0) blur(0px);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.morph div:hover img {
width: 150px; /* on affiche l'image au carré */
height: 150px;
border-radius: 50%; /* on arrondit l'image */
-webkit-transform: rotate(360deg); /* rotation de l'image */
transform: rotate(360deg);
}
11. Opacité
CSS3 permet également de rendre opaque ou d'éclaircir une image grâce à la propriété opacity.
Une valeur de 1 n'effecte pas l'image. Une valeur supérieure l'assombrira (1.3, par exemple) et une valeur inférieur va l'éclaircir (.5, par exemple).
/* Opacité */
.opacity1 div img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.opacity1 div:hover img {
opacity: .5;
}
12. Opacité colorée
Par défaut, l'opacité applique un filtre noir sur l'image si l'on souhaite l'assombrir. Mais grâce à la puissance de CSS3, il est possible de choisir une autre couleur !
.opacity-color div {
background: #184a7d;
}
.opacity-color div img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.opacity-color div:hover img {
opacity: .5;
}
Explications : des couleurs de fond différentes ont été définies dans les balises div pour obtenir des effets différents.
Et pour terminer, je vous propose de voir une série de 3 effets visuels assez sympa à appliquer à vos images : le flash, le reflet et le halo lumineux !
13. Flash
/* Flash */
.flash div:hover img {
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
14. Reflet
/* Reflet */
.shine div {
position: relative;
}
.shine div::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.shine div:hover::before {
-webkit-animation: shine .75s;
animation: shine .75s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
15. Halo lumineux
/* Halo lumineux */
.light div {
position: relative;
}
.light div::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: block;
content: '';
width: 0;
height: 0;
background: rgba(255,255,255,.2);
border-radius: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
.light div:hover::before {
-webkit-animation: circle .75s;
animation: circle .75s;
}
@-webkit-keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
@keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
Conclusion
Ceci n'est qu'un très petit aperçu de ce qu'il est possible de réaliser aujourd'hui en terme de web design grâce à HTML5 et CSS3. Je rappele que cela n'est utilisable que sur des navigateurs modernes, ce qui exclu les versions antédéliviennes d'Internet Explorer !
N'hésitez surtout pas à copier, à modifier et à utiliser ces codes sur vos images. Je vous encourage à tester et à explorer toutes les possibilités offertes par CSS3.
Amusez-vous bien !
