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 :
À 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.