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 background ou background-image.
- radial assigné à la propriété Css background ou background-image.
*) "à ce jour", "aujourd'hui" => 10/05/2012
Dégradé Css linéaire
Exemple de code CSC pour un dégradé linéaire
/* 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.
Définitions
Définition -moz-linear-gradient() :
Dégradé Css radial
Exemple de code CSS pour un dégradé radial
/* 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.