Les effets visuels que nous allons réaliser
Quelques infos avant de présenter les codes CSS
Les codes CSS fournis dans cet article sont des exemples, n'hésitez pas à les personnaliser afin d'etre en accord avec votre chartre graphique et appliquer les effets de transitions recherchés.
Leur principe reste simple :
- L'id principal défini l'état visuel du lien hors utilisation
- L'id :hover défini son visuel au survol de la souris
- La propriété "transition" définie les propriétés à modifier, son temps d'affichage, son type, ...
- La propriété "transform" définie un effet transformation 2D ou 3D à un élément et permet de le faire pivoter, redimensionner, déplacer, incliner, etc.
Les règles CSS fournies dans cet article sont optimisées pour les navigateurs "-ms-" (Microsoft), "-webkit" (Chrome, safari) et "-moz" (Firefox), à vous d'ajouter les préfixes adaptés aux navigateurs visés (ex : -o- pour opera).
Internet explorer prend en charge la propriété "transform", l'effet est donc possible mais son application est immédiate, ce dernier ne supportant pas la propriété "transition".
Transition immédiate
/*Code CSS*/
#type1 {
color:green;
font-size: 22px;
font-weight: bold;
}
#type1:hover {
color: red;
font-style:italic;
}
<!-- Code HTML -->
<div id="type1">Effet 1 : transition immediate</div>
<!-- pour insérer un lien sans interferer avec votre style existant si différent -->
<a href="#" target=""><div id="type1">Effet 1 : transition immediate</div></a>
Transition rapide
/*Code CSS*/
#type2 {
color:green;
font-size: 22px;
font-weight: bold;
transition: color 0.5s linear;
-webkit-transition: color 0.5s linear;
-moz-transition: color 0.5s linear;
}
#type2:hover {
color: red;
}
<!-- Code HTML -->
<div id="type2">Effet 2 : transition rapide</div>
Transition lente
/*Code CSS*/
#type3 {
color:green;
font-size: 22px;
font-weight: bold;
transition: color 2s linear;
-webkit-transition: color 2s linear;
-moz-transition: color 2s linear;
}
#type3:hover {
color: red;
}
<!-- Code HTML -->
<div id="type3">Effet 3 : transition lente</div>
Transition de couleur d'un bouton CSS3
/*Code CSS*/
#type4 {
font-size: 22px;
font-weight:bold;
background-color:green;
color:white;
margin-left:35px;<!--facultatif-->
margin-right:35px;<!--facultatif-->
padding:10px 30px;
border-radius: 12px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
}
#type4:hover {
background-color:black;
color: red;
}
<!-- Code HTML -->
<div id="type4">Effet 4 : transition de couleur du bouton</div>
Transition d'agrandissement d'un bouton CSS3
/*Code CSS*/
#type5 {
font-size: 22px;
font-weight: bold;
background-color:green;
color:white;
margin-left:35px;<!--facultatif-->
margin-right:35px;<!--facultatif-->
padding:10px 30px;
border-radius: 12px;
/*Moderer le retour a l'etat initial*/
/* -webkit-transition: all 1s linear;
-webkit-transform: scale(1);
-moz-transition: all 1s linear;
-moz-transform: scale(1);
-ms-transform: scale(1);*/
}
#type5:hover {
-webkit-transition: all 1s linear;
-webkit-transform: scale(1.2);
-moz-transition: all 1s linear;
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
}
<!-- Code HTML -->
<div id="type5">Effet 4 : transition d'agrandissement du bouton</div>
Transition de mouvement d'un bouton CSS3
/*Code CSS*/
#type6 {
font-size: 22px;
font-weight: bold;
background-color:green;
color:white;
margin-left:35px; <!--facultatif-->
margin-right:35px;<!--facultatif-->
padding:10px 30px;
border-radius: 12px;
/*Moderer le retour a l'etat initial*/
/* -webkit-transition: all 1s linear;
-webkit-transform: translate(0px);
-moz-transition: all 1s linear;
-moz-transform: translate(0px);
-ms-transform: translate(0px); */
}
#type6:hover {
-webkit-transform: translate(50px,-20%);
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-moz-transform: translate(50px,-20%);
-ms-transform: translate(50px,-20%);
}
<!-- Code HTML -->
<div id="type6">Effet 4 : transition de mouvement du bouton</div>
Amusez vous bien avec ces petits effets de style :)