Un effet de gradient en CSS3

Les effets de gradients sont utilisé dans les web-design depuis plusieurs années, jusqu’à aujourd’hui le seul moyen était de faire des images. Mais avec l’avénement du CSS3, cela pourrait bien changer, je vais vous présenter une méthode fonctionnelle avec tous les navigateurs moderne : Chrome, Safari, Firefox, IE8.
Hélas Opera ne gère pas encore cette fonctionnalité, mais qui sait…

Pour les moteurs WebKit et Firefox

Voici le code pour la div juste que dessus :

  margin:10px auto;
  width:400px;
  height:80px;
  background: -webkit-gradient(linear, left top, left bottom, from(#FF0), to(#0FF));
  background: -moz-linear-gradient(top,#FF0,#0FF);
  background:blue;

Il est très facile de faire un gradient du haut vers le bas ou de la gauche vers la droite. Pour modifier, je vous conseille d’aller voir la documentation relative pour chaque navigateur ou le lien en fin d’article.

Une amélioration à cet exemple

Il est possible de faire un gradient avec des effets qui varient en fonction de la position sur la div. En effet, on peut faire plusieurs gradient avec plusieurs couleurs

Voici le code pour la div juste que dessus :

  margin:10px auto;
  width:400px;
  height:80px;
  background: -webkit-gradient(linear, left top, left bottom, from(#FF0), to(#0FF),color-stop(0.0, #FF0), color-stop(0.7, #F0F), color-stop(1.0, #0FF));
  background: -moz-linear-gradient(top,#FF0 0%,#F0F 70%,#0FF 100%);
  background:blue;

Pour Internet Explorer 7 et 8

Par contre pour IE, ca se gâte un peu. En effet, IE ne gère pas cette propriété qui fait parti de CSS3. Cependant, il existe un filter qui permet d’obtenir le même effet. Seul les utilisateurs de IE pourront voir la div suivante avec l’effet de dégradé :

Voici le code pour la div juste que dessus :

  margin:10px auto;
  width:400px;
  height:80px;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF000,endColorstr=#FF00FFFF);
  background:blue;

Si vous êtes attentif, vous avez sûrement remarqué que la couleur hexadecimal contient 8 caractères. Normalement, il ne doit y en avoir que 6, mais ces deux caractères indique l’opacité de l’effet de gradient. Sachant que ‘00‘ indique que la div aura une opacité nulle et que ‘FF‘ représente une opacité de 1.

Un petit défaut avec IE, si vous utilisez un plugin javascript pour avoir les coins arrondis par exemple, il est fort probable que le rendu ne soit pas exactement celui que l’on espère. Je n’ai pas pris le temps de chercher à comprendre pourquoi, mais dans certains cas, la div apparaissait toute noire.

Ressources

En bonus, voici un lien vers un générateur de CSS3 qui permet de générer des gradients complexes très simplement.
Et si vous voulez comprendre toute les particularité de la syntaxe des gradients pour Firefox et Webkit, je vous conseille cet excellent post sur le blog Broken-links.

6 commentaires

Désolé, les commentaires sont fermés!