Générateur de propriétés CSS

Un générateur de propriétés CSS est un outil qui produit du code CSS pour un effet visuel à partir de curseurs et de sélecteurs de couleur, au lieu que l’utilisateur saisisse le code à la main. Celui-ci couvre quatre effets : les dégradés, les ombres de boîte, le rayon de bordure et les ombres de texte. Chaque panneau affiche un aperçu en direct et produit du CSS prêt à copier.

Ce qu’il génère

• Dégradés : transitions linéaires ou radiales entre deux couleurs
• Ombres de boîte : une ombre portée ou une ombre interne autour d’un élément, avec des réglages de décalage, de flou, d’étalement, de couleur et d’opacité
• Rayon de bordure : des coins arrondis, identiques sur les quatre coins ou réglés individuellement
• Ombres de texte : une ombre derrière le texte, avec des réglages de décalage, de flou, de couleur et d’opacité

Chaque réglage met à jour l’aperçu et le CSS généré en même temps ; les modifications peuvent donc être vérifiées avant de copier le code.

Comment calculer un dégradé linéaire CSS

Un dégradé linéaire passe d’une couleur à une autre le long d’une ligne droite. Sa syntaxe CSS est la suivante :

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

L’angle se mesure en degrés, de 0 à 360. En CSS, 0deg va du bas vers le haut et 90deg va de la gauche vers la droite. position1 et position2 définissent l’endroit où chaque couleur atteint sa pleine intensité, en pourcentage de la longueur du dégradé.

Exemple

Les valeurs de départ du générateur sont un angle de 90 degrés, #ff5f6d à 0 % et #ffc371 à 100 %. Cela produit :

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

La première ligne est une couleur unie de secours pour les navigateurs qui, pour une raison quelconque, n’affichent pas le dégradé. La deuxième ligne est le dégradé lui-même.

Formule du dégradé radial

Un dégradé radial s’étend vers l’extérieur à partir d’un point central, et non le long d’une ligne. Sa forme peut être un cercle ou une ellipse :

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

Ce générateur produit toujours un dégradé radial circulaire. Il ne propose ni forme elliptique ni moyen de déplacer le point central ; seules les deux couleurs et leurs positions d’arrêt peuvent être modifiées.

Les deux types de dégradé de cet outil utilisent exactement deux couleurs, définies avec les sélecteurs Couleur 1 et Couleur 2. Il n’existe aucune option pour ajouter un troisième point d’arrêt de couleur.

Formule de l’ombre de boîte CSS

Une ombre de boîte est une ombre dessinée autour des bords d’un élément :

1box-shadow: h-offset v-offset blur spread color;
2

h-offset et v-offset déplacent l’ombre vers la gauche ou la droite et vers le haut ou le bas. Les valeurs positives la poussent vers la droite ou le bas ; les valeurs négatives la poussent vers la gauche ou le haut. blur adoucit le bord de l’ombre ; plus le nombre est élevé, plus l’adoucissement s’étend. spread agrandit ou réduit la taille de l’ombre avant l’application du flou. L’ajout du mot-clé inset avant les décalages dessine l’ombre à l’intérieur de la bordure de l’élément plutôt qu’à l’extérieur.

Exemple

Avec les réglages par défaut (décalage horizontal de 5px, décalage vertical de 5px, flou de 10px, étalement de 0px, noir à 20 % d’opacité), l’outil produit :

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

Le curseur d’opacité du sélecteur de couleur va de 0 à 100 et est converti vers l’échelle de 0 à 1 qu’utilise rgba() ; 20 % devient donc 0,2.

Formule du rayon de bordure CSS

Le rayon de bordure arrondit les coins d’un élément. Il existe deux formes :

1border-radius: value;                              /* same on all four corners */
2border-radius: top-left top-right bottom-right bottom-left; /* set separately */
3

Lorsque la case « Même rayon pour tous les coins » est cochée, le générateur écrit la forme abrégée. Lorsqu’elle est décochée, il liste toujours quatre valeurs, même si elles sont égales, dans cet ordre : haut gauche, puis haut droit, puis bas droit, puis bas gauche.

Exemple

Le rayon par défaut est de 10px sur chaque coin :

1border-radius: 10px;
2

Une image d’avatar circulaire utilise généralement border-radius: 50% à la place, bien que cette valeur dépasse la plage autorisée par le curseur de ce générateur (de 0 à 100 pixels).

Formule de l’ombre de texte CSS

Une ombre de texte se comporte comme une ombre de boîte, mais s’applique aux lettres plutôt qu’à la boîte d’un élément. Elle prend deux décalages et un flou facultatif, sans valeur d’étalement :

1text-shadow: h-offset v-offset blur color;
2

Exemple

Avec les réglages par défaut (décalage horizontal de 2px, décalage vertical de 2px, flou de 3px, noir à 50 % d’opacité) :

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

Comment utiliser le générateur de propriétés CSS

1. Choisissez un onglet : Dégradé, Ombre de boîte, Rayon de bordure ou Ombre de texte.
2. Réglez les curseurs, les sélecteurs de couleur et les cases à cocher. Le panneau d’aperçu et le code CSS se mettent à jour immédiatement.
3. Sélectionnez le bouton « Copier dans le presse-papiers » et collez le code dans une feuille de style ou dans un attribut style.
4. Sélectionnez « Réinitialiser » pour ramener chaque champ des quatre onglets à sa valeur de départ. Cela ramène aussi l’onglet actif sur Dégradé, même si un autre onglet était affiché.

Foire aux questions

À quoi sert un générateur de propriétés CSS ? Il transforme les réglages des curseurs et des sélecteurs de couleur en code CSS terminé pour les dégradés, les ombres et les coins arrondis, afin que l’utilisateur n’ait pas à écrire ni à mémoriser cette syntaxe à la main.

Quelle est la différence entre un dégradé linéaire et un dégradé radial ? Un dégradé linéaire change de couleur le long d’une ligne droite selon un angle donné. Un dégradé radial change de couleur vers l’extérieur à partir d’un point central. L’option radiale de cet outil utilise toujours une forme circulaire.

Cet outil peut-il créer un dégradé de plus de deux couleurs ? Non. Les panneaux de dégradé linéaire et radial acceptent exactement deux couleurs, Couleur 1 et Couleur 2, chacune avec sa propre position d’arrêt.

En quoi une ombre de boîte interne diffère-t-elle d’une ombre ordinaire ? Une ombre de boîte ordinaire se place à l’extérieur des bords de l’élément, comme une lumière qui tombe derrière lui. Une ombre interne se place à l’intérieur des bords, ce qui donne à l’élément l’apparence d’être enfoncé plutôt que surélevé.

Pourquoi les valeurs des coins arrondis apparaissent-elles dans l’ordre haut gauche, haut droit, bas droit, bas gauche ? Cet ordre est celui dans lequel la propriété CSS border-radius attend que l’on écrive quatre valeurs distinctes, en tournant dans le sens horaire à partir du coin supérieur gauche.

Le CSS généré fonctionne-t-il dans tous les navigateurs ? Les dégradés, les ombres de boîte, le rayon de bordure et les ombres de texte sont tous pris en charge dans les versions actuelles de Chrome, Firefox, Safari et Edge. Aucun préfixe de fournisseur n’est ajouté au code produit.

Références

1. Mozilla Developer Network. linear-gradient(). linear-gradient() reference — to top et to right équivalent à 0deg et 90deg.
2. Mozilla Developer Network. radial-gradient(). radial-gradient() reference — la forme d’un dégradé radial peut être un cercle ou une ellipse.
3. Mozilla Developer Network. box-shadow. box-shadow reference — directions de décalage, étalement et mot-clé inset.
4. Mozilla Developer Network. border-radius. border-radius reference — l’ordre des quatre valeurs : haut gauche, haut droit, bas droit, bas gauche.
5. Mozilla Developer Network. text-shadow. text-shadow reference — chaque ombre de texte comporte deux ou trois longueurs (décalages et flou) plus une couleur facultative.