CSS Gradient Generator : Une application pour la création et la gestion des gradients CSS

Introduction

Bienvenue dans CSS Gradient Generator. Cette application est composée de quatre parties principales et offre de nombreuses fonctionnalités pour la création et la gestion des gradients CSS.

Les différentes parties de l'application

• Liste des gradients : Sur le côté gauche, on trouve la liste des couches. Si il y a au moins une couche dans la liste, on peut télécharger le code final en cliquant sur le bouton approprié. Dans ce panneau, on peut gérer l'ordre des couches, les supprimer et désactiver leur visibilité. Si une couche est définie comme invisible, elle ne sera pas prise en compte dans la génération du code final.

• Panneau des paramètres des couches : Lorsqu'on clique sur une couche particulière dans le panneau des couches en bas de l'écran, on voit le panneau des paramètres. Dans le coin supérieur gauche de ce panneau, il y a des boutons utilisés pour définir le type de gradient. A côté droit de ceux-ci, il y a un bouton qui ouvre le panneau avec les paramètres d'un gradient donné, tels que la taille, la répétabilité, la transparence globale, le mode de mélange, etc. On peut changer les valeurs dans les champs en tapant, en utilisant la roulette de la souris ou en cliquant sur le champ et en déplaçant le curseur vers le haut ou le bas. A côté droit du titre de ce panneau, il y a un icône. Si on clique dessus, un menu apparaîtra, qui permet, entre autres choses, d'appliquer les paramètres d'une couche donnée à d'autres couches. On peut déplacer l'ensemble du panneau en saisissant son bord supérieur. A côté de celui-ci, il y a un bouton qui ouvre un panneau où on peut ajouter automatiquement des points au curseur.

• Le curseur des gradients : La principale place du panneau est occupée par le curseur des gradients. Si on double-clique sur un point donné du curseur, on ajoute un nouveau point à celui-ci. On peut déplacer les points avec la souris ou les touches fléchées. On peut sélectionner plusieurs points avec la touche Ctrl. Il y a quelques boutons dans le coin droit juste au-dessus du curseur. Avec ces boutons, on peut sélectionner le point suivant/précédent sur le curseur. Avec ces boutons, on peut couper le gradient pour le point sélectionné. Cela peut être utile lorsque on veut désactiver la transition lisse pour les points sélectionnés. On peut également définir une couleur pleine à gauche/droite pour les points sélectionnés et copier/coller la couleur d'un point sélectionné. On peut effectuer toutes ces actions avec les touches appropriées. La meilleure façon est de jeter un coup d'œil sur le onglet du clavier dans cette aide. De plus, on peut activer le mode de précision pour le curseur avec un bouton.

• Le tableau principal : Lorsqu'on sélectionne une couche du panneau gauche, sur le tableau principal, on peut définir son point focal, la direction du gradient ainsi que la position du gradient. Ces options sont disponibles selon le type du gradient donné et sa taille. Les options données sont montrées au bas du tableau principal. On peut passer à d'autres modes en utilisant les touches (Q, W, E) montrées au bas du tableau. On peut également passer entre ces modes en utilisant les touches de la souris. Par défaut, la touche gauche est utilisée pour déplacer le point central du gradient, et la touche droite est utilisée pour tourner le gradient. De plus, on utilise la touche S pour activer/désactiver le mode grille et snap.

• La bibliothèque : La bibliothèque est utilisée pour stocker les travaux enregistrés. Pour la montrer, cliquez sur l'icône. Lorsqu'on ajoute au moins une couche à son travail, on peut enregistrer l'ensemble du travail actuel dans la bibliothèque. Lorsqu'on clique sur un élément dans la liste de la bibliothèque, ses couches seront ajoutées à son travail actuel sans supprimer aucune couche. On peut continuer à travailler sur son travail puis l'enregistrer dans la bibliothèque comme un nouveau élément. Dans le coin supérieur droit de la bibliothèque, on a un icône de menu. Dans ce menu, on a quelques options. La première option "gérer la bibliothèque" permet de... gérer la bibliothèque. Une fois activée, on peut ajouter de nouveaux groupes, renommer les groupes existants ou déplacer les éléments entre groupes. Import et export permettent d'importer un élément sélectionné à partir d'un fichier et d'exporter vers un fichier. La dernière option dans ce menu permet d'ouvrir une bibliothèque en ligne. A partir de ce panneau, on peut ajouter des éléments créés par d'autres utilisateurs. Si on veut partager son travail soi-même, on peut utiliser un formulaire supplémentaire, que on peut ouvrir en cliquant sur le lien dans le texte en haut du panneau de la bibliothèque en ligne.

Conclusion

CSS Gradient Generator est une application très utile pour les développeurs et les designers qui travaillent avec les gradients CSS. Elle offre de nombreuses fonctionnalités pour la création, la gestion et le partage des travaux liés aux gradients CSS.