Je vais aujourd’hui vous montrer comment réaliser deux effets assez intéressants en CSS3. Le premier est une sorte de fade in / fade out et le deuxième est une lueur externe avec l’attribut box-shadow

À ce jour, les transitions en css ne sont pas encore au point sur la plupart des navigateurs mais le fait d’utiliser ces effets ne perturbera en aucun cas la navigation dans votre site. Et pour les navigateurs sur lesquels elles marchent (Safari et Chrome) la navigation sera encore plus agréable. Donc pour voir les effets dans de meilleures conditions, utilisez Chrome ou Safari.

Voici les démos :

Le fade in / fade out :
fade in fade out
La lueur externe :
box shadow

À présent, comment les réaliser…

Je vais commencer par le fade in / fade out.
Voici le code html :

<!-- code html -->
<div id="images">
      <a href="#"><img src="lechemindevotreimage" alt="fade in fade out" /></a></div>

et le code css correspondant :

/* code css */

#images {
    width: 630px;
}

#images a img {
	opacity: 0.3;/* l'opacite que vous voulez au depart */
	border: none;/* enlever les border d'une image en lien */
	-ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* Hack IE8 */
	filter: alpha(opacity = 25); /* Hack IE 5-7 */
	-webkit-transition: opacity 0.5s ease-in-out;/* transition pour Chrome et Safari */
	-moz-transition: opacity 0.5s ease-in-out;/* transition pour Firefox */
	-o-transition: opacity 0.5s ease-in-out;/* transition pour Opéra */
	transition: opacity 0.5s ease-in-out; /* on écrit cette ligne à la fin de façon à ce que ce soit elle qui soit prise en compte lorsque l'attribut transition sera pris en compte par tous les navigateurs */

}

#images a:hover img, #images a:focus img {
	opacity: 0.9; /* opacite au survol */
	-ms-filter:"prodig:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* Hack IE 8 */
	filter: alpha(opacity = 90); /* Hack IE 5-7 */
}

À présent la lueur externe :

<!-- code html -->

<div id="ombrebleue">
      <a href="#"><img src="lechemindevotreimage" alt="box shadow" /></a>
</div>

et le code css correspondant :

/* code css */

/* Ceci sert uniquement à référencer la transition (sans ceci l'ombre apparaitra mais il n'y aura pas d'animation) */
/* Sur firefox 3.5+, opera 10.5+ et IE 9 beta les effets s'appliquent mais il n'y a pas d'animation */

@-webkit-keyframes pulse {
	0% {
		-webkit-box-shadow: 0 0 12px rgba(51,204,255,0.2);
	}
	50% {
		-webkit-box-shadow: 0 0 12px rgba(51,204,255,0.9);
	}
	100% {
		-webkit-box-shadow: 0 0 12px rgba(51,204,255,0.2);
	}
}

/* Ici le code pour appliquer une lueur externe */
/* 0px de décalage en x, 0px de décalage en y, 12px de flou et la valeur en RGBA soit RedGreenBlueAlpha donc le 0.5 pour 50% d'opacité */
#ombrebleue a:hover img {
	-webkit-box-shadow: 0px 0px 12px rgba(51,204,255,0.5);
	-moz-box-shadow: 0px 0px 12px rgba(51,204,255,0.5);
	box-shadow: 0px 0px 12px rgba(51,204,255,0.5);
	-webkit-animation: pulse 1.5s infinite ease-in-out; /* Ici on utilise l'animation référencée plus haut */
}

J’espère que cet article vous aura plu. N’hésitez pas à poster vos sites dans les commentaires.

18 comments
Christophe
Christophe

Parfait en effet = tuto beau + tuto simple + tuto efficace + tuto simple pour novice comme moi (2 jours de css, html et php) Malheureusement je suis novice et souhaite l'effet fade in fade out inverse ("flou" au survol) Lorsque je change les valeurs initiale dans la feuille de style CSS (l'effet ne fonctionne plus)

admin
admin

Merci christophe pour ce commentaire. Normalement si tu modifies et que tu inverses le 0.3 et le 0.9 ainsi que les valeurs pour le hack Internet Explorer ça devrait marcher sans souci

Christophe
Christophe

OMG En effet mon erreur venait du fait d'avoir modifié plusieurs valeur sur ce même morceau de code Une fois que je ne modifie que les valeurs sus nommées alors la modification de l'animation s'opère sans soucis Bravo pour ta remarquable réactivité et merci de permettre de poster sur ton blog sans inscription, c'est très appréciable.

karl
karl

salut, super effet, est il possible de le faire sur une balise h et non sur une image. Merci pour vos conseils.

karl
karl

ok c'est bon j'ai juste retiré l'img et le a. merci.

Electrotuto
Electrotuto

Merci je l'ulise actuellement sur mon site. ça donne vraimment une valeur ajouté aux photos.

admin
admin

Il faut mettre une autre durée au lieu de 0.5s (genre 0.3s)

Tetarte
Tetarte

Super comme animation ! En plus tres simple d'utilisation. Merci beaucoup du partage ! Mais il ne serait pas possible de combiner les deux effets ? C'est a dire une image qui s'opacifie avec une lueur externe en meme temps ?

Tetarte
Tetarte

Il suffisait de combiner les propriétés css, ça marche plutôt bien, encore merci :)

Thibaut
Thibaut

dommage que ça marche pas sur ie6 )) !

jm
jm

lol

Antoine
Antoine

J'aime vraiment votre article. J'ai essaye de trouver de nombreux en ligne et trouver le v?tre pour être la meilleure de toutes. Mon francais n'est pas tres bon, je suis de l'Allemagne. Mon blog: regroupement de credit puis sygma banque Rachat De Credit

admin
admin

Merci beaucoup. Ça me fait plaisir que l'article te plaise. A bientot sur le blog et si tu as des questions, n'hésites pas ;)