le MEMO du WEB développeur
 

••• Trucs en CSS3 •••   Liste des Mémos, astuces et bonnes pratiques

Foncer une image au passage de la souris - CSS
Effet carnet de notes en CSS 3 - empilement de feuilles - CSS
Un joli titre sans image, tout en CSS - CSS
Effet ruban sur un titre en CSS 3 - CSS
Dessiner un cercle sans image grâce à CSS 3 - CSS
Une bordure en pointillés en CSS3 - Effet couture. - CSS

Un effet de changement de couleur fluide en CSS3 - CSS

Rendre le changement de couleur  sur le survol de la souris plus fluide grâce à CSS3 et à la propriété transition :

Survolez pour tester la modification de couleur avec CSS3

code HTML :

<span id="hover_color"> Tester ici !!!  </span>

code CSS :

#hover_color{
  font-weight:bold;
  font-size:22px;
  color : #f69b00;
  cursor:pointer;
  transition: color 1s;
  -moz-transition: color 1s; /* Firefox 4 */
  -webkit-transition: color 1s; /* Safari and Chrome */
  -o-transition: color 1s; /* Opera */
}

#hover_color:hover{
   color : #f11d7e;
  transition: color 0.5s;
  -moz-transition: color 0.5s; /* Firefox 4 */
  -webkit-transition: color 0.5s; /* Safari and Chrome */
  -o-transition: color 0.5s; /* Opera */
}

La propriété transition n'est pas interprétée par IE.

publié le 01/08/2012 par Memo Web
CSS3
Commenter le Mémo :

Colorer une ligne sur 2 dans un tableau en CSS3 - CSS
Les transitions en CSS3 : rotation d'un élément - rotate() - CSS
Dessiner un triangle avec CSS3 - CSS
Ombrage - propriété box-shadow - CSS
Arrondir les bords d'un élément - CSS
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos