La création d’une image uniquement dans le but d’afficher un gradient est inflexible, et devient rapidement une mauvaise pratique. Malheureusement, au moment d’écrire ces lignes, ils pourraient très bien être encore nécessaires, mais j’espère pas pour longtemps. Merci à Firefox et Safari / Chrome, nous pouvons maintenant créer des gradients puissants avec un effort minimal. Dans cet article, nous allons examiner les différentes façon d’implémenter des dégradés à l’aide de CSS 3.
Introduction :
Dans cet article, nous allons voir comment implémenter des dégradés en CSS 3 à travers des exemples concret. Les techniques pour réaliser ces opérations ne sont pas les mêmes qu’il s’agisse de navigateurs Safari – Chrome / Firefox. Pour réaliser ces dégradés, j’ai simplement créé un bloc ‘DIV’ avec un id ‘gradient’.
Ce que vous devez savoir : Connaitre les bases du HTML et du CSS
Ce que vous devez avoir : Un éditeur HTML
Les dégradés CSS sous Mozilla :
Vous trouverez ci dessous le code qui permet de réaliser un beau dégradé en CSS 3 !
#gradient{
border:1px solid #000;
height:400px;
width:600px;
background:#e3e3e3;
background: -moz-linear-gradient(top, red, green);
}
Figure 2 - Gradient CSS sous Mozilla
Les dégradés CSS sous WEBKIT :
En ce qui concerne l’implémentation des navigateurs développés sous WEBKIT, la technique est un peu différente. Voici le code :
#gradient{
border:1px solid #000;
height:400px;
width:600px;
background:#e3e3e3;
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
}
Ne vous inquiétez pas si vous avez un peu plus mal au crane en lisant cette syntaxe (moi aussi…) mais rien de bien compliqué :
- Quel type de gradient? (Linéaire)
- Axes X et Y les coordonnées de l’endroit où commencer. (0 0 – ou un coin en haut à gauche)
- Axes X et Y les coordonnées de l’endroit où la conclusion (0 à 100% – ou le coin en bas à gauche)
- Quelle couleur pour commencer? (À partir de (rouge))
- Quelle est la couleur de conclure ? (À (bleu))
Les dégradés Partiels :
Il est possible de mettre en place un dégradé partiel ; je vous livre le code qui vous permettra de réaliser cet effet :
#gradient{
border:1px solid #000;
height:400px;
width:600px;
background :#9e7e48;
/* Navigateurs Safari */
background: -webkit-gradient(linear, 0 0, 0 10%, from(#672907), to(#9e7e48));
/* Navigateurs Mozillas */
background : -moz-linear-gradient(top, #672907, #9e7e48 20%);
}
Comme vous pouvez le constater, il devient très simple de mettre en place des dégradés dans vos sites WEB !
Figure 2 - Résultat d'un dégradé partiel
Dégradés multiples :
Il es également possible de créer des dégradés à n* couleurs ; Voici comment :
#gradient{
border:1px solid #000;
height:400px;
width:600px;
background :#9e7e48;
/* Navigateurs Safari */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#672907), color-stop(10%, #5f0000), color-stop(20%, #9e7e48), color-stop(30%, #672907);
/* Navigateurs Mozillas */
background: -moz-linear-gradient(top, #672907, #5f0000 10%, #9e7e48 20%, #672907 30%);
}
Figure 3 - Dégradé multiple
Informations importantes
- Utilisez-les autant que vous le pouvez. Même si les utilisateurs de IE auront une couleur unie, je vous encourage à utiliser cette méthode.
- IE6/7/8, Opera, Safari 3 et Firefox 3 ne peut pas rendre gradients CSS3. Firefox et les utilisateurs de Safari sont généralement mis à jour régulièrement, ce qui ne devrait pas poser de problème.
- Appliquez toujours une couleur par défaut, la couleur solide en arrière-plan pour les navigateurs qui ne comprennent pas les différents préfixes de dégradés.
- Ne jamais utiliser un rouge à dégradé bleu, comme je l’ai fait pour les exemples (C’est moche
).
Ressources :
Article sur les dégradés sous Mozilla très complet : http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
CSS références pour Mozilla (en anglais) : https://developer.mozilla.org/en/CSS_Reference
CSS références pour WEBKIT (en anglais) : http://webkit.org/projects/css/index.html
