Simplifiez-vous la création des gradients CSS3 avec Shade

Aujourd'hui je vous propose de vous essayer si ce n'est pas déjà fait aux gradients CSS3 avec un petit outil graphique : Shade.

Simplifiez-vous la création des gradients avec Shade

Shade est une petite application Web qui va vous permettre de créer très simplement de manière visuelle des gradients CSS3 en quelques secondes à peine.

Le fonctionnement de l'application est très simple une fois le rôle de toutes les jauges compris : choisissez votre couleur de base, la façon dont le gradient se distribue, et récupérez votre ligne CSS à insérer dans votre fichier.

Fonctionnement des jauges

Les trois premières jauges (Hue, Saturation et Lightness) s'appliquent sur la Base Color sélectionnée de manière uniforme. Pas la peine de jouer avec en essayant d'obtenir un gradient, ce n'est pas ici que cela sa passe.

La partie Gradient Spread, par contre, permet de choisir comment se comporte le gradient : si le curseur est au centre, la jauge n'est "pas utilisée".

Si une jauge (par exemple Saturate) penche du côté gauche, nous "concentrons" la saturation de l'image de cette cote. Le côté droit sera donc désaturé alors que la gauche sera sursatuée. Les deux autres (Saturate et Lighten) fonctionnent exactement de la même manière.