[Ballajack] Un générateur de fonds dégradés en CSS, CSS Gradient Animator

Le langage CSS (Cascading Style Sheets, en Français Feuilles de style en cascade) est un langage pour ajouter des mises en forme et des mises en page aux documents HTML qui en principe ne contiennent que les contenus d’un site Web. Cette dissociation sépare le fond de la forme tout en facilitant la mise à jour des sites. Les propriétés CSS autorisent bon nombre d’effets typographiques et de couleurs et avec sa dernière version intègre les dégradés de couleurs applicables aux divers éléments HTML.

L’application en ligne CSS Gradient Animator facilite la création de fonds de page, animés ou pas, se basant sur le dégradé obtenu entre deux ou plusieurs couleurs pour produire un code CSS récupérable par une simple opération de copier-coller.

L’utilisation de l’outil ne demande pas de connaissances particulières en CSS puisqu’il suffit d’ajuster quelques paramètres pour obtenir le fond de page dégradé : Gradient Angle et Scroll Angle pour choisir les angles de l’orientation des couleurs du dégradé. Ces dernières doivent au moins être au nombre de deux que l’on va ajouter tour à tour en cliquant sur le bouton Add colour. A priori, le générateur ne limite pas le nombre de couleurs qu’il est possible de prendre en compte pour construire le dégradé sur le fond de page.

Pour ajouter une animation basée sur la rotation des couleurs choisies, il faut ajuster le paramètre Speed. En le laissant à sa valeur minimum, on conserve un fond de couleur fixe qui ne varie alors pas ; sinon en choisissant sa valeur maximale on obtient une rotation extrêmement rapide des couleurs ce qui va créer un effet plutôt psychédélique.

En fonction des réglages le code CSS est mis jour en temps réel dans la fenêtre d’édition. En cliquant sur le bouton Preview, on obtient une prévisualisation du fond de page obtenu. Il est également possible de sauvegarder le code CSS obtenu sur GitHub en cliquant sur le bouton Save CSS as Gist.

Pour repartir de zéro, avec un fond de page vierge, il suffit de cliquer sur le bouton Reset.

CSS Gradient Animator a le mérite d’être utilisable par tous sans être un fin connaisseur de la propriété CSS background-position.

Source : CSS Gradient Animator

by via MyTFMRSS