Couleurs et arrière-plans

Les couleurs et les arrière-plans définissent la surface visuelle de vos éléments -- leur apparence derrière et autour de leur contenu. Le Style Manager fournit des contrôles dédiés pour la couleur d'arrière-plan, les images d'arrière-plan, les dégradés, l'opacité et les effets associés.

Deux points à garder à l'esprit :

• Les propriétés d'arrière-plan ne sont pas héritées. Contrairement à la couleur du texte, un élément enfant ne reprend pas automatiquement l'arrière-plan de son parent. Chaque élément commence transparent.
• La superposition des couches compte. Vous pouvez combiner une couleur d'arrière-plan, une ou plusieurs images d'arrière-plan et des dégradés sur le même élément. Ils s'empilent dans l'ordre que vous définissez.

Définir la couleur d'arrière-plan

Background-color remplit la boîte de l'élément (y compris la zone de padding, mais pas le margin) avec une couleur unie. Dans Silex, elle apparaît sous forme d'un sélecteur de couleur pleine largeur dans la section Décorations.

Vous pouvez saisir des valeurs dans plusieurs formats :

• Hex : #ff6600, #f60 (raccourci)
• RGB : rgb(255, 102, 0)
• RGBA : rgba(255, 102, 0, 0.5) -- la quatrième valeur est l'alpha (transparence de 0 à 1)
• HSL : hsl(24, 100%, 50%)
• HSLA : hsla(24, 100%, 50%, 0.5)
• Couleurs nommées : red, transparent, currentColor

Vous pouvez aussi appliquer une variable CSS à Background-color en utilisant le bouton « + » à côté du libellé de la propriété. C'est la méthode recommandée pour maintenir une palette de couleurs cohérente.

Définir la couleur du texte

Color (dans la section Typographie) définit la couleur du texte. Elle accepte les mêmes formats que Background-color. Contrairement à l'arrière-plan, Color est héritée -- définissez-la sur un parent et tout le texte à l'intérieur la suit sauf s'il la surcharge.

Consultez Typographie pour en savoir plus sur le style du texte.

Images d'arrière-plan

La section Décorations du Style Manager inclut des contrôles intégrés pour Background-image. Vous pouvez ajouter une ou plusieurs images d'arrière-plan à un élément, ainsi que des dégradés.

Quand vous ajoutez une image d'arrière-plan, vous pouvez contrôler :

• Background-size : Comment l'image se met à l'échelle. Valeurs courantes : cover (remplit l'élément, peut recadrer), contain (s'inscrit entièrement, peut laisser des vides), ou des dimensions spécifiques.
• Background-position : Où l'image se place dans l'élément. Valeurs courantes : center, top left, bottom right, ou des pourcentages spécifiques.
• Background-repeat : Si l'image se répète en mosaïque. Valeurs : repeat (mosaïque dans les deux directions), repeat-x (horizontal uniquement), repeat-y (vertical uniquement), no-repeat, space, round.
• Background-attachment : Si l'image défile avec la page ou reste fixe. Valeurs : scroll (défile avec l'élément), fixed (reste en place par rapport au viewport), local (défile avec le contenu de l'élément).

Image héro pleine largeur : 1. Sélectionnez un élément Section. 2. Ajoutez une image d'arrière-plan. 3. Background-size : cover. Background-position : center. Background-repeat : no-repeat.

L'image remplit la section quelle que soit ses dimensions, en recadrant si nécessaire pour maintenir son ratio d'aspect.

Dégradés

Les dégradés sont un type d'image d'arrière-plan. Silex utilise l'éditeur de dégradés intégré de GrapesJS, accessible depuis les contrôles d'image d'arrière-plan.

CSS prend en charge plusieurs types de dégradés :

• Dégradé linéaire : Les couleurs transitionnent en ligne droite. Vous contrôlez la direction (angle ou mots-clés comme to right) et les étapes de couleur.
• Dégradé radial : Les couleurs rayonnent vers l'extérieur depuis un point central.

Exemple -- une superposition de dégradé subtile : 1. Sélectionnez l'élément. 2. Ajoutez un arrière-plan avec un dégradé linéaire de rgba(0, 0, 0, 0.3) vers transparent. 3. Définissez une image d'arrière-plan en dessous.

Le dégradé crée une zone assombrie (utile pour placer du texte blanc lisible sur une photo).

Combiner les arrière-plans

CSS permet de superposer plusieurs arrière-plans sur un même élément. Ils sont dessinés en couches : le premier que vous définissez est au-dessus, le dernier est en dessous. La Background-color est toujours derrière toutes les images d'arrière-plan.

Un schéma courant :

1. Background-color : une couleur de repli (visible pendant le chargement des images)
2. Couche Background-image 1 : une superposition de dégradé semi-transparente
3. Couche Background-image 2 : une photographie

Contrôler l'opacité

Opacity contrôle la transparence de l'élément entier, y compris tous ses enfants et son contenu. Les valeurs vont de 0 (totalement transparent) à 1 (totalement opaque). Elle se trouve dans les propriétés supplémentaires intégrées de GrapesJS.

Important : Opacity affecte tout à l'intérieur de l'élément. Si vous voulez uniquement un arrière-plan semi-transparent tout en gardant le texte parfaitement visible, utilisez plutôt une couleur d'arrière-plan RGBA ou HSLA (par ex., rgba(0, 0, 0, 0.5) pour un arrière-plan noir transparent à 50%).

Ombre de boîte

Box-shadow ajoute un effet d'ombre autour du cadre d'un élément. GrapesJS fournit un éditeur composite intégré pour box-shadow où vous contrôlez :

• Décalage X : Position horizontale de l'ombre
• Décalage Y : Position verticale de l'ombre
• Rayon de flou : À quel point l'ombre est floue (0 = nette)
• Rayon d'extension : À quel point l'ombre s'étend ou se contracte
• Couleur : La couleur de l'ombre (utilisez RGBA pour des ombres semi-transparentes)
• Inset : Si l'ombre est à l'intérieur de l'élément

Ombre subtile de carte : X : 0, Y : 2px, Flou : 8px, Extension : 0, Couleur : rgba(0, 0, 0, 0.1).

Bouton surélevé au survol : Utilisez une pseudo-classe pour :hover et augmentez le flou et le décalage.

Filtres CSS

Filter applique des effets graphiques comme le flou, la luminosité et le contraste à un élément. Silex prend en charge les fonctions de filtre suivantes :

Fonction	Ce qu'elle fait
blur(px)	Flou gaussien. Plus la valeur est élevée, plus c'est flou.
brightness(%)	Ajuste la luminosité. 100% = original. 0% = noir. 200% = deux fois plus lumineux.
contrast(%)	Ajuste le contraste. 100% = original.
grayscale(%)	Convertit en niveaux de gris. 0% = original. 100% = entièrement gris.
hue-rotate(deg)	Fait tourner les couleurs sur le cercle chromatique.
invert(%)	Inverse les couleurs. 100% = entièrement inversé.
saturate(%)	Ajuste la saturation. 100% = original. 0% = désaturé.
sepia(%)	Applique un ton sépia. 0% = original. 100% = entièrement sépia.

Vous pouvez enchaîner plusieurs filtres. Ils s'appliquent dans l'ordre indiqué.

Cas d'usage : Une galerie photo où les images sont désaturées par défaut et deviennent en couleur au survol. Définissez filter: grayscale(100%) sur l'image, puis utilisez la pseudo-classe :hover pour définir filter: grayscale(0%).

Bordure et border radius

La section Décorations inclut des contrôles pour les bordures (via les propriétés de bordure intégrées de GrapesJS) et Border-radius.

Border-radius est une propriété composite avec quatre coins :

• Border-top-left-radius
• Border-top-right-radius
• Border-bottom-right-radius
• Border-bottom-left-radius

Unités : px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax.

Valeurs fixes : initial, inherit, auto.

Conseil : Définissez les quatre coins à 50% pour rendre un élément carré circulaire. Pour des boutons en forme de pilule, utilisez une grande valeur comme 999px.

Outline

Outline trace une ligne à l'extérieur de la bordure. Contrairement à la bordure, elle n'occupe pas d'espace dans la mise en page et peut chevaucher d'autres éléments. C'est une propriété composite avec :

• Outline-width : px, %, em ; mots-clés : medium, thin, thick, inherit, initial, revert, unset.
• Outline-style : none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
• Outline-color : toute valeur de couleur.

Note d'accessibilité : Les navigateurs utilisent le outline pour indiquer le focus clavier. Évitez de supprimer complètement les outlines (outline: none) sauf si vous fournissez un indicateur de focus alternatif. Consultez la pseudo-classe :focus pour styliser les états de focus.

Exemple pratique : une carte avec de la profondeur visuelle

1. Background-color : #ffffff (blanc).
2. Border-radius : 8px sur tous les coins.
3. Box-shadow : 0 2px 12px rgba(0, 0, 0, 0.08).
4. Au survol (via pseudo-classe) : Box-shadow : 0 4px 20px rgba(0, 0, 0, 0.15). La carte semble se soulever vers le spectateur.
5. Image en haut : Background-image avec Background-size : cover, à l'intérieur d'un Div avec une hauteur fixe et Overflow : hidden pour recadrer.

Erreurs courantes

• Utiliser Opacity quand vous voulez un arrière-plan semi-transparent. Opacity affecte l'élément entier et ses enfants. Utilisez des couleurs d'arrière-plan RGBA/HSLA pour des arrière-plans transparents avec un texte pleinement visible.
• Oublier une couleur d'arrière-plan de repli. Si l'image d'arrière-plan ne se charge pas, les utilisateurs ne voient rien. Définissez une Background-color qui fonctionne seule.
• Supprimer les outlines sans alternative. Les utilisateurs au clavier perdent leur indicateur de focus. Stylisez le outline au lieu de le supprimer.
• Abuser des box-shadow. Les ombres subtiles ajoutent de la profondeur. Les ombres lourdes sur chaque élément donnent un résultat encombré.

En savoir plus

• MDN : Arrière-plans et bordures -- tutoriel pour débutants
• MDN : CSS filter -- référence complète des filtres
• Variables CSS -- définir les couleurs comme variables réutilisables
• Typographie -- couleur du texte et style des polices
• Sélecteurs et classes -- changements de couleur au survol, au focus et dans d'autres états interactifs
• Dark Mode for Websites -- votez pour le support du mode sombre sur la feuille de route (réalisable dès aujourd'hui avec les variables CSS)

---

Avancé : intégration des variables CSS et couleurs responsives

Variables de couleur

Le plugin CSS Variables (grapesjs-css-variables) prend en charge trois types de variables : couleur, taille et font-family. Les variables de couleur s'intègrent avec la propriété Color (typographie) et la propriété Background-color (décorations), ainsi qu'avec les sous-propriétés comme Outline-color, Text-decoration-color et Column-rule-color.

Quand une variable de couleur est appliquée, le Style Manager affiche une pastille violette avec le nom de la variable et un aperçu de couleur. Vous pouvez effacer la variable pour revenir à une valeur de couleur directe.

Couleurs responsives avec les points de rupture

Comme les variables CSS peuvent être surchargées par point de rupture (le plugin prend en charge les valeurs par appareil stockées dans des règles @media (max-width: ...) sur :root), vous pouvez définir une palette de couleurs qui change selon les tailles d'écran. Par exemple, vous pourriez éclaircir une couleur d'arrière-plan sur mobile pour améliorer le contraste sur les petits écrans.

Le mot-clé currentColor

currentColor est une valeur CSS spéciale qui fait référence à la valeur calculée de Color de l'élément. Utilisez-la pour les bordures, les outlines ou les ombres qui doivent correspondre automatiquement à la couleur du texte. Si vous changez la couleur du texte, ces propriétés se mettent à jour aussi.

Référence : toutes les propriétés de couleur et d'arrière-plan

Propriété	Section	Type	Valeurs / Unités	MDN
Background-color	Décorations	couleur	Toute valeur de couleur	lien
Color	Typographie	couleur	Toute valeur de couleur	lien
Background-image	Décorations	intégré	URL, linear-gradient, radial-gradient	lien
Background-size	Décorations	intégré	cover, contain, longueur	lien
Background-position	Décorations	intégré	mots-clés, %, longueur	lien
Background-repeat	Décorations	intégré	repeat, repeat-x, repeat-y, no-repeat, space, round	lien
Background-attachment	Décorations	intégré	scroll, fixed, local	lien
Opacity	Extra	curseur	0 à 1	lien
Box-shadow	Décorations	composite	X, Y, Flou, Extension, Couleur, Inset	lien
Filter	Extra	composite	blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia	lien
Border-radius	Décorations	composite	px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax ; initial, inherit, auto	lien
Outline-width	Décorations	entier	px, %, em ; medium, thin, thick, inherit, initial, revert, unset	lien
Outline-style	Décorations	sélection	none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset	lien
Outline-color	Décorations	couleur	Toute valeur de couleur	lien

---

Quiz

Q1 : Vous voulez une section avec une superposition sombre semi-transparente par-dessus une photo d'arrière-plan, avec du texte blanc qui reste parfaitement visible. Comment y parvenir ?

• A) Définir Opacity sur 0.5 sur la section.
• B) Utiliser Background-color rgba(0, 0, 0, 0.5) et la superposer sur l'image d'arrière-plan.
• C) Définir la Color du texte sur white et Opacity sur 0.5.

Réponse

B) Utiliser Background-color rgba(0, 0, 0, 0.5) et la superposer sur l'image d'arrière-plan. -- En pratique, vous utiliseriez un dégradé linéaire (de rgba(0,0,0,0.5) vers rgba(0,0,0,0.5)) comme couche d'image d'arrière-plan par-dessus la photo. Ou utilisez un Div de superposition séparé avec un arrière-plan RGBA. Utiliser Opacity sur la section rendrait aussi le texte semi-transparent.

Q2 : Votre image d'arrière-plan semble étirée et déformée dans une section large. Que devez-vous définir ?

• A) Background-size : contain
• B) Background-size : cover
• C) Background-repeat : repeat

Réponse

B) Background-size : cover -- Cela met l'image à l'échelle pour remplir l'élément tout en préservant son ratio d'aspect, en recadrant si nécessaire. contain laisserait des vides, et repeat mettrait l'image en mosaïque.

Q3 : Vous avez défini un arrière-plan en dégradé mais vous voulez aussi une couleur de repli visible pendant le chargement de la page. Où placer la couleur de repli ?

• A) Dans une deuxième couche de dégradé
• B) Dans la propriété Background-color
• C) Dans la propriété Color

Réponse

B) Dans la propriété Background-color -- Background-color est toujours rendue derrière toutes les couches d'image d'arrière-plan (y compris les dégradés). Elle transparaît si le dégradé a des zones transparentes ou avant que la page ne soit entièrement rendue.

Q4 : Vous avez supprimé le outline de vos boutons pour des raisons esthétiques. Un utilisateur signale qu'il ne peut pas voir quel bouton est en focus quand il utilise le clavier. Que devez-vous faire ?

• A) Le rajouter avec une couleur différente en utilisant la pseudo-classe :focus.
• B) Définir Opacity sur 0.8 au focus.
• C) Rien -- les outlines sont purement décoratives.

Réponse

A) Le rajouter avec une couleur différente en utilisant la pseudo-classe :focus. -- Les indicateurs de focus sont essentiels pour l'accessibilité clavier. Vous pouvez les styliser pour correspondre à votre design en utilisant Outline ou Box-shadow sur l'état :focus. Consultez Sélecteurs et classes pour savoir comment cibler les pseudo-classes.