Speak English? Click here to read my English blog!

Des dégradés sans images avec Javascript

Posté par jbj le 11 fév 2008 dans Javascript/Ajax • 7 commentaires

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.

Tags: , ,

7 commentaires

» Flux RSS des commentaires
  1. Anonyme le 12 février 2008 à 13:48:

    Des dgrads sans images avec Javascript…

    Depuis la mode du web dit 2.0, les dgrads sont parmis les effets visuels les plus rpandus sur la toile. Crer ce genre deffet nest pas difficile, mais le procd est assez lourd: Crer une image dans un diteur graphique, luploader sur le serveur, et enfin …

  2. Jules le 14 février 2008 à 17:58:

    ça donne quoi niveau chargement de la page? Par ce que si sous tout autre navigateur que IE le script crée une quantité de divs, ça doit quand m

  3. 8 scripts Javascript pour sublimer votre site le 15 mai 2008 à 16:24:

    [...] petit script dont j’ai déja parlé il y à quelques temps, Gradient.js est capable de générer des dégradés de couleurs d’une manière totalement non-intrusif. [...]

  4. Alban le 15 janvier 2009 à 1:11:

    Et comment tu fais pour mettre un dégradé sur du texte et pas en font d’écran?

  5. Adeline le 29 janvier 2009 à 10:19:

    Bonjour,

    J’ai fait une page en html

    dont voici le code :

    essai fon degrade

    Puis j’ai créé le fichier « gradient.js » (source trouvée dans le lien donné dans le message).

    J’ai publié sur le web

    et cela ne me donne aucun résultat de dégradé. j’ai testé sous :

    IE
    FIREFOX
    CHROME

    et … rien !

    Suis pas une douée des javascripts mais jusqu’à présent, j’avais toujours « eu » ce que je souhaitais.

    Aurais-je oublié quelque chose ?

    Merci de votre aide.

    Adeline

  6. Adeline le 29 janvier 2009 à 10:20:

    Apparemment, mon code de la page html n’est pas passé. Mais j’ai fait exactement ce que demandé dans l’explication.

    Adeline

  7. Claire le 9 février 2009 à 10:42:

    Bonjour.
    Je souhaite créer un gradient de couleurs dans le fond d’un tableau sur ma page web.
    Dimension du tableau 950 pixel de large.
    J’ai téléchargé et placé le fichier « gradient.js » dans mon répertoire, puis inséré les lignes de code dans les meta head et l’autre dans le code du tableau.
    Dans IE tout fonctionne très bien mais dans firefox le dégradé n’est pas ou il faudrait. Comment faire pour qu’il s’affiche dans mon tableau plutôt que dans la page.
    http://clairemarie.site.voila.fr/accueil.html.
    Merci pour vos lumières.
    Claire

Commenter