Appliquez des effets visuels de transitions à vos liens

Je vais, dans cet article, vous fournir quelques codes CSS3 permettant d'appliquer des effets visuels de transition au survol de vos liens.
Cette petite touche de style apportera à votre site un coté dynamique et facilitera la navigation de vos visiteurs.

Une petite remarque mais non sans importance, la propriété de "transition" n'est pas pris en charge par Internet Explorer 9 et ses versions antérieures .
Cette application sera donc réservée aux navigateurs Firefox, Opera et autres ... .

Ces articles sont susceptibles de vous intéresser aussi :

Coder en CSS

Compatibilité CSS3 / navigateurs Web

Guide des propriétés CSS

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 :)