le nouveaux styles introduits dans CSS3 a donné aux professionnels du Web la possibilité d'ajouter des effets de type Photoshop à leurs pages. Un effet visuel que vous pouvez ajouter en utilisant CSS3 est de rendre les pages Web interactives en créant des zones décolorées qui deviennent nettes lorsqu'un visiteur du site fait quelque chose, comme survoler cet élément. Cet effet utilise une combinaison de opacité et transition.
Changer l'opacité au survol
Un élément interactif consiste à modifier l'opacité d'une image lorsqu'un client survole cet élément. Pour cet exemple (le code HTML est montré ci-dessous), nous utilisons une image avec l'attribut class de grisaille.
Pour le rendre grisé, ajoutez les règles de style suivantes à votre feuille de style CSS:
.greydout {
-webkit-opacité: 0,25 ;
-moz-opacité: 0,25 ;
opacité: 0,25 ;
}
Ces paramètres d'opacité se traduisent par 25 pour cent. Cela signifie que l'image sera affichée comme 1/4 de sa transparence normale. Entièrement opaque sans transparence serait 100 pour cent, tandis que 0 pour cent serait complètement transparent.
Ensuite, pour que l'image soit claire (ou plus précisément, pour qu'elle devienne complètement opaque) lorsque la souris la survole, vous ajouteriez ce qui suit:
.greydout: survolez {
-webkit-opacité: 1 ;
-moz-opacité: 1 ;
opacité: 1 ;
}
Plus d'ajustements d'opacité
Vous remarquerez que, pour ces exemples, nous utilisons les versions préfixées par le fournisseur de la règle pour assurer la rétrocompatibilité pour les anciennes versions de ces navigateurs. Bien qu'il s'agisse d'une bonne pratique, la règle d'opacité est bien supportée par les navigateurs, et il est sûr de supprimer ces lignes préfixées par le fournisseur.
Néanmoins, il n'y a aucune raison de ne pas inclure ces préfixes si vous souhaitez garantir la prise en charge des anciennes versions de navigateur. Assurez-vous simplement de suivre la meilleure pratique acceptée consistant à terminer la déclaration par la version normale et sans préfixe du style.
Lorsqu'il est déployé sur un site, ce réglage d'opacité est un changement brutal. Tout d'abord, c'est gris, puis ce ne l'est pas, sans états intermédiaires entre les deux. C'est comme un interrupteur allumé ou éteint. C'est peut-être ce que vous voulez, mais vous voudrez peut-être aussi expérimenter un changement plus progressif.
Pour ajouter un bel effet et rendre ce fondu progressif, ajoutez le transition propriété:
.greydout
classe:.greydout {
-webkit-opacité: 0,25 ;
-moz-opacité: 0,25 ;
opacité: 0,25 ;
-webkit-transition: tous les 3s facilité ;
-moz-transition: tous les 3s facilitent ;
-ms-transition: tous les 3s facilitent ;
-o-transition: tous les 3 sont facilités ;
transition: tous les 3 facilité ;
}