Comment l'utiliser
- Choisissez l'onglet Dégradé ou Bouton.
- Ajustez les commandes et observez l'aperçu en direct : couleurs, angle et type pour un dégradé ; texte, couleurs, marge intérieure et rayon des coins pour un bouton.
- Cliquez sur l'icône de copie au-dessus du bloc de code et collez le CSS dans votre feuille de style.
L'onglet Dégradé construit un arrière-plan à partir de deux couleurs. Vous pouvez choisir entre un dégradé linéaire et un dégradé radial. Pour les dégradés linéaires, un curseur d'angle va de 0 à 360 degrés. L'option radiale produit un dégradé circulaire de la première couleur vers la seconde. Le code sous l'aperçu est une unique déclaration background, par exemple un linear-gradient avec un angle et deux arrêts de couleur, prête à coller.
L'onglet Bouton produit une règle complète pour une classe nommée custom-button. Vous définissez le texte de l'étiquette pour l'aperçu, la couleur d'arrière-plan, la couleur du texte, la marge intérieure horizontale et verticale (0 à 100 px chacune) et le rayon des coins (0 à 50 px). Le CSS généré inclut les couleurs, la marge intérieure et le rayon choisis, ainsi qu'aucune bordure, un curseur de type pointeur, une graisse de police moyenne, une courte transition d'opacité et une règle de survol qui réduit légèrement l'opacité.
Les couleurs peuvent être choisies avec le contrôle de couleur ou saisies sous forme de texte. La sortie est du CSS simple, sans préfixes de fabricant et sans framework ; vous pouvez donc l'utiliser dans n'importe quel projet et le modifier ensuite. Les dégradés comportant plus de deux arrêts de couleur ne sont pas pris en charge par cet outil.
Rien n'est envoyé à un serveur. L'aperçu et le code sont générés dans votre navigateur au fil de la saisie.
FAQ
Puis-je créer un dégradé avec trois couleurs ou plus ?
Non. Cet outil utilise deux couleurs. Vous pouvez ajouter d'autres arrêts en modifiant le CSS copié.
À quoi sert le contrôle d'angle ?
Pour les dégradés linéaires, il fixe la direction en degrés. Il est masqué pour les dégradés radiaux, toujours circulaires.
Quel est le nom de classe dans le CSS du bouton ?
La règle générée utilise la classe custom-button, que vous pouvez renommer pour l'adapter à votre projet.
Ajoute-t-il un style de survol au bouton ?
Oui. Le CSS copié inclut une règle de survol qui fixe l'opacité à 0.9.
Mes saisies sont-elles envoyées ?
Non. Le CSS est construit dans votre navigateur.