Des dégradés sans images avec Javascript

Depuis la mode du web dit 2.0, les dégradés sont parmis les effets visuels les plus répandus sur la toile. Créer ce genre d’effet n’est pas difficile, mais le procédé est assez lourd: Créer une image dans un éditeur graphique, l’uploader sur le serveur, et enfin écrire une classe css pour mettre le tout en place.
Il existe une alternative, en Javascript 100% non-intrusif, qui permettra à n’importe qui de créer de beaux dégradés sans utiliser une seule image.

Bien entendu, il faut télécharger le script, ainsi qu’éventuellement la feuille de style utilisée pour mettre en forme les exemples. Notez toutefois que cette feuille de style n’est absolument pas necessaire pour créer vos dégradés en javascript. Vous trouverez les deux sur cette page.
Il vous reste désormais à inclure le fichier .js dans la partie head de votre document html:

<script type="text/javascript" src="gradient.js"></script>

Supposons maintenant que vous souhaitez appliquer un dégradé du blanc au noir sur un élément h1:

<h1 class="gradient ffffff 000000 horizontal">Un beau dégradé</h1>

Comme vous l’avez remarqué, le contrôle du dégradé se fait au moyen de classe css:

• gradient indique au script que vous souhaitez mettre en place un dégradé.
• ffffff est la couleur de départ, soit ici le blanc.
• 000000 est la couleur d’arrivée, ici le noir.
• horizontal est comme son nom l’indique, le sens du dégradé.

Bien entendu, rien ne vous empêche de rajouter vos propres classes css afin de donner un style supplémentaire à l’élément. Ainsi le code suivant sera parfaitement fonctionnel:

<h1 class="gradient ffffff 000000 horizontal title">Un beau dégradé</h1>

Notez toutefois que les 4 premières classes doivent absolument être les 4 paramètres requis pour l’application du dégradé. Vous pouvez rajouter autant de classes que vous le souhaitez, mais celles-ci doivent obligatoirement se trouver après les 4 classes relatives au dégradé.

Un petit mot sur le fonctionnement: Si le visiteur utilise IE, gradient.js utilisera les propriétés css proprio de Microsoft afin de donner l’effet désiré. Par contre, si l’internaute est sous un autre navigateur, le script génèrera une série de div qui seront positionnés en tant qu’enfant de l’élément. Ces div en-veux-tu-en-voilà sont heureusement totalement invisibles dans la source du document html.

Bien sur, les possibilités offertes par gradient.js ne sont pas aussi nombreuses qu’elles le sont avec une image, et on peut rester dubitatif quand à l’utilisation de Javascript là ou on en à pas réellement besoin.
Toutefois, le gain de temps et la relative propreté du code en font une bonne alternative au manque de temps ou de connaissance en édition graphique.