Blog de web-eau.net

Vous l'avez constaté, la technologie Flash a quasiment disparu de nos pages Web. Et c'est plutôt 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 aux images et qui vont vous étonner !


15 effets CSS3 pour vos images


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 !

 

A PROPOS DE L'AUTEUR :

Webmaster freelance passionné par Joomla depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances avec les néophytes aussi bien qu'avec les personnes plus expérimentées.
Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.

1 1 1 1 1 1 1 1 1 1 Rating 5.00 (1 Vote)

Ajouter vos commentaires

Poster un commentaire en tant qu'invité

0
Vos commentaires sont soumis à la modération de l'administrateur.

Participant à cette conversation

web-eau.net is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is
used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.