Les dégradés de couleurs - Les cours Css

Comment faire des dégradés en Css?

Les divers dégradés faisablent en Css

Avec l'arrivé de CSS3 et les nouvelles versions des navigateurs, on parle de plus en plus des dégradés linéaires ou radiaux, qui commencent à être pris en charge.

Le W3C spécifie que la fonction pour faire des dégradés linéaires est :
- linear-gradient()
Le W3C spécifie que la fonction pour faire des dégradés radiaux est :
- radial-gradient()
Cependant, à ce jour (10/05/2012) chaque navigateur à sa propre CSS.

Nous allons dans ce chapitre étudier comment faire le dégradé :
- linéaire assigné à la propriété Css ou .
- radial assigné à la propriété Css ou .

*) "à ce jour", "aujourd'hui" => 10/05/2012

Dégradé Css linéaire

Exemple de code CSC pour un dégradé linéaire

Exemple de code :
/* Source ColorZilla. */ /* Old browsers */   background: #1e5799; /* IE9 SVG, needs conditional override of 'filter' to 'none' */   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI3JSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iI2M1Y2VkNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjczJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* FF3.6+ */   background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 27%, #c5ced6 49%, #207cca 73%, #7db9e8 100%); /* Chrome,Safari4+ */   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(27%,#2989d8), color-stop(49%,#c5ced6), color-stop(73%,#207cca), color-stop(100%,#7db9e8)); /* Chrome10+,Safari5.1+ */   background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 27%,#c5ced6 49%,#207cca 73%,#7db9e8 100%); /* Opera 11.10+ */   background: -o-linear-gradient(top, #1e5799 0%,#2989d8 27%,#c5ced6 49%,#207cca 73%,#7db9e8 100%); /* IE10+ */   background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 27%,#c5ced6 49%,#207cca 73%,#7db9e8 100%); /* W3C */   background: linear-gradient(to bottom, #1e5799 0%,#2989d8 27%,#c5ced6 49%,#207cca 73%,#7db9e8 100%); /* IE6-8 */   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );

Ce que vous devez voir :

Compatibilité et Hacks de compatibilité

La norme W3C (Draft 10/01/2012) spécifie que pour faire un dégradé linéaire, il faut utiliser linear-gradient().
Le problème c'est qu'à ce jour seul Firefox 16+ serait en mesure de l'interpréter.
Voici donc la liste des hacks pour chaque navigateur.
Pour Safari 4+ et Chrome 1.0+ :

  • -webkit-gradient(linear,...)

Pour Safari 5.1+ et Chrome 10+ :
  • -webkit-linear-gradient()

Pour Firefox 3.6+ et < 16 :
  • -moz-linear-gradient()

Pour Opera 11.10+ :
  • -o-linear-gradient()

Pour Internet Explore 6+ et < 10 :
  • filter: progid:DXImageTransform.Microsoft.Gradient()

Pour Internet Explore 10+ :
  • -ms-linear-gradient()

Pour les autres c'est une couleur de background.

Editeur de dégradé linéaire

Définitions

Définition -moz-linear-gradient() :

Dégradé Css radial

Exemple de code CSS pour un dégradé radial

Exemple de code :
/* Source ColorZilla. */ /* Old browsers */   background: #1e5799; /* IE9 SVG, needs conditional override of 'filter' to 'none' */   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIyOCUiIHN0b3AtY29sb3I9IiMyOTg5ZDgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0OSUiIHN0b3AtY29sb3I9IiNjOWQwZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2NiUiIHN0b3AtY29sb3I9IiMyMDdjY2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2RiOWU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* FF3.6+ */   background: -moz-radial-gradient(center, ellipse cover, #1e5799 0%, #2989d8 28%, #c9d0d6 49%, #207cca 66%, #7db9e8 100%); /* Chrome,Safari4+ */   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(28%,#2989d8), color-stop(49%,#c9d0d6), color-stop(66%,#207cca), color-stop(100%,#7db9e8)); /* Chrome10+,Safari5.1+ */   background: -webkit-radial-gradient(center, ellipse cover, #1e5799 0%,#2989d8 28%,#c9d0d6 49%,#207cca 66%,#7db9e8 100%); /* Opera 12+ */   background: -o-radial-gradient(center, ellipse cover, #1e5799 0%,#2989d8 28%,#c9d0d6 49%,#207cca 66%,#7db9e8 100%); /* IE10+ */   background: -ms-radial-gradient(center, ellipse cover, #1e5799 0%,#2989d8 28%,#c9d0d6 49%,#207cca 66%,#7db9e8 100%); /* W3C */   background: radial-gradient(ellipse at center, #1e5799 0%,#2989d8 28%,#c9d0d6 49%,#207cca 66%,#7db9e8 100%); /* IE6-8 fallback on horizontal gradient */   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );

Ce que vous devez voir :

Compatibilité et Hacks de compatibilité

La norme W3C (Draft 10/01/2012) spécifie que pour faire un dégradé radial, il faut utiliser radial-gradient().
Le problème c'est qu'à ce jour seul Firefox 16+ serait en mesure de l'interpréter.
Voici donc la liste des hacks pour chaque navigateur.
Pour Safari 5.1+ et Chrome 10+ :

  • -webkit-gradient(radial,...)
  • -webkit-radial-gradient()

Pour Firefox 3.6+ et < 16 :
  • -moz-radial-gradient()

Pour Opera 10.6+ :
  • -o-radial-gradient()

Pour Internet Explore 6+ et < 10 :
  • filter: progid:DXImageTransform.Microsoft.Gradient()

Pour Internet Explore 10+ :
  • -ms-radial-gradient()

Pour les autres c'est une couleur de background.