Je vais vous montrer l’implémentation de dégradé par le CSS.
Compatibilité des navigateurs
Je vous invite à consulter ce site : http://www.findmebyip.com/litmus/ qui permet de lister les différentes fonctionnalités et d’indiquer si elles sont prises en compte ou non par les navigateurs disponibles.
Exemple
La définition du dégradé est différentes suivant les navigateurs. Dans l’exemple ci-dessous, je vais vous montrer la définition d’un style qui permet d’avoir le même comportement sous les différents navigateurs. Il s’agit d’un dégragé linéaire partant du haut vers le bas et allant de la couleur rouge (#FF0000) vers le magenta (#FF00FF).
<style type="text/css">
body {
background-image:linear-gradient(red, blue); /* Norme W3C */
background-image:-moz-linear-gradient(red, blue); /* Firefox */
background-image:-webkit-gradient(linear, red, blue); /* Chrome, Safari */
background-image:-o-linear-gradient(red, blue); /* Opera */
background-image:-ms-linear-gradient(red, blue); /* IE */
}
</style>Ressources
Je vous invite à consulter les différentes spécifications concernant chaque navigateur. Ci-dessous un raccourci vers ces documents.
Voici également un bon générateur cross-browser qui augmentera vos chances de compatibilité et réduira vos soucis : http://gradients.glrzad.com/
Bon dév’
