17. Arrière-plans, bordures, ombres et effets

Vos pages sont construites, vos textes et vos images sont en place. Il reste à leur donner du relief : un fond, une bordure, une ombre, parfois un mouvement. Ce chapitre passe en revue les trois dernières sections de l’onglet Style des éléments atomiques, puis propose cinq recettes réutilisables. Il prépare le chapitre 18, où ces réglages deviendront des classes partagées.

17.1 — Où se règle l’habillage

Pour un élément atomique, tout se passe dans l’onglet Style, dont vous connaissez déjà les premières sections : Mise en page, Espacement, Taille, Position et Typographie. Ce chapitre s’intéresse aux trois dernières, Arrière-plan (Background), Bordure (Border) et Effets (Effects). Elles sont identiques pour un Bloc Div, un Flexbox, un Titre, un Bouton ou une Image : ce que vous apprenez sur l’un vaut pour tous les autres.

Pour un widget classique, l’habillage se partage entre l’onglet Style du widget (ses réglages propres, comme la couleur de l’icône d’une Boîte d’icône) et l’onglet Avancé, commun à tous les widgets : Arrière-plan (parfois traduit « Fond » selon la version de la traduction), Bordure, Masque (Mask) et Effets de mouvement (chapitre 20). Beaucoup de widgets classiques proposent aussi deux sous-onglets Normal et Au survol.

17.2 — Arrière-plans : couleur, image, dégradé, couches

La section Arrière-plan rythme la page : une page vitrine se lit mieux quand ses sections alternent des fonds légèrement différents, blanc, blanc cassé, blanc, puis une section sombre pour l’appel à l’action. Trois types de fond existent, et l’Éditeur atomique permet de les empiler.

La couleur

C’est le fond le plus simple et le plus sain. On choisit une couleur dans le sélecteur, ou mieux une variable de couleur (chapitre 18). Pour la Menuiserie Roche, les sections alternent le blanc et le blanc cassé #FAF7F2, et la section d’appel à devis passe sur l’anthracite #2B2B2B avec un texte clair. Le sélecteur propose un curseur d’opacité : une couleur semi-transparente sert de voile sur une photo.

L’image

Le chapitre 14 a présenté l’image d’arrière-plan. Les réglages qui comptent : la position (où se cale l’image quand elle est recadrée), la taille (couvrir, pour remplir toute la boîte quitte à rogner ; contenir, pour la montrer entière), la répétition (à désactiver pour une photo) et l’attachement (fixe donne un effet de profondeur au défilement, mais se comporte mal sur beaucoup de téléphones).

Le dégradé

Un dégradé (gradient) est un passage progressif d’une couleur à une autre, linéaire (le long d’un angle) ou radial (depuis un centre), sans limite de nombre de couleurs en atomique. Un dégradé réussi est presque invisible : deux tons proches d’une même teinte, du bois #A8663C vers un bois plus sombre, donnent de la matière sans attirer l’œil. Un dégradé bleu-rose-jaune signe un site amateur.

Les couches

Le vrai apport de l’Éditeur atomique est que ces fonds s’empilent : une couleur, une image par-dessus, puis un voile coloré semi-transparent par-dessus l’image. L’ordre des couches dans le panneau est leur ordre d’affichage, la couche du haut de la liste étant dessinée au-dessus des autres ; on réordonne par glisser-déposer. C’est cette superposition qui rend un texte lisible sur une photo.

1. Sélectionnez le Flexbox du bandeau et ouvrez Style › Arrière-plan. Vérifiez que la photo est en taille « couvrir », position centre, sans répétition.
2. Ajoutez une couche de couleur au-dessus de l’image : anthracite #2B2B2B, opacité 45 %. Si elle apparaît sous l’image, remontez-la par glisser-déposer.
3. Passez le texte en clair : titre et paragraphe en blanc cassé #FAF7F2.
4. Testez en vue mobile (Ctrl+Shift+M) : le texte doit rester lisible là où la photo est la plus claire, car le recadrage n’est pas le même que sur ordinateur.

17.3 — Bordures et coins arrondis

La section Bordure règle deux choses distinctes : le trait qui entoure la boîte et l’arrondi de ses coins. Le trait a une largeur, réglable côté par côté grâce à l’icône qui lie ou délie les quatre valeurs (comme pour les marges au chapitre 10), un style (plein, tirets, pointillés, double) et une couleur. Une bordure de 1 pixel dans un ton très clair détache souvent mieux une carte du fond qu’une ombre : elle ne pèse rien et reste nette sur tous les écrans.

Le rayon (border radius) se règle coin par coin. Trois valeurs couvrent la quasi-totalité des besoins d’un site vitrine : 0 pour un style strict, 8 à 16 pixels pour les cartes et les images, et une valeur très grande (999 pixels) pour un bouton en pilule quelle que soit sa taille. Pour une image parfaitement ronde, il faut qu’elle soit carrée et lui donner un rayon de 50 %.

17.4 — Effets : opacité, ombres, filtres, transformations, transitions

La section Effets regroupe tout ce qui modifie l’apparence d’un élément sans toucher à sa structure. Elle est puissante ; c’est précisément pour cela qu’il faut l’utiliser avec parcimonie.

Opacité

L’opacité (opacity) rend l’élément entier plus ou moins transparent, texte compris ; c’est la différence avec une couleur de fond semi-transparente. On l’utilise pour atténuer un élément secondaire ou comme point de départ d’une animation d’apparition (chapitre 20). Ne « grisez » jamais ainsi un texte que le visiteur doit lire.

Ombre portée

L’ombre portée (box shadow) se définit par un décalage horizontal, un décalage vertical, un flou, un étalement et une couleur ; l’Éditeur atomique accepte plusieurs ombres empilées. Une ombre réussie ne se voit pas, elle se devine : décalage horizontal 0, vertical 8, flou 24, étalement 0, couleur anthracite à 8 ou 10 % d’opacité. Une ombre noire opaque de 10 pixels est le second signe du site amateur, juste après le dégradé arc-en-ciel.

Filtres et modes de fusion

Les filtres (filters) transforment le rendu comme une retouche photo : flou, luminosité, contraste, saturation, niveaux de gris. Ils servent surtout aux images : une photo de réalisation légèrement désaturée au repos, qui retrouve ses couleurs au survol, est un classique discret. Les modes de fusion (blend modes) décident comment un élément se mélange avec ce qui se trouve derrière lui ; c’est un outil de graphiste, rarement utile sur un site vitrine.

Transformations

Les transformations (transform) déplacent, tournent ou agrandissent un élément sans modifier la place qu’il occupe : les voisins ne bougent pas. Trois usages raisonnables : un léger agrandissement au survol (échelle 1.03), une remontée de quelques pixels d’une carte survolée, la rotation d’un élément purement décoratif. Faire pivoter un titre ou un paragraphe nuit à la lecture.

Transitions

Une transition (transition) est le temps que met un élément pour passer d’un état à un autre. Sans transition, un bouton change de couleur instantanément au survol ; avec 250 millisecondes, le passage est fluide. La transition se règle sur l’état normal, pas sur l’état de survol : elle décrit le voyage, pas la destination. Le chapitre 18 explique comment définir l’état de survol lui-même.

17.5 — Cinq recettes à garder sous la main

Les réglages qui suivent servent de point de départ pour le site de la Menuiserie Roche ; ajustez-les, mais ne les multipliez pas. Chaque recette s’applique à un élément atomique depuis l’onglet Style.

Les valeurs exactes de couleur (bois sombre, voile) sont fixées au chapitre 18 dans le tableau du système de design ; ici, l’important est la structure de chaque recette.

17.6 — Trois règles avant d’aller plus loin

Première règle, la cohérence : un site vitrine n’a besoin que d’un rayon, d’une ombre et d’une durée de transition, qui deviendront des variables ou des classes. Deuxième règle, le contraste : tout texte posé sur une image ou un dégradé doit rester lisible dans le pire cas, sur mobile, avec l’image recadrée. Troisième règle, ne pas empiler : un flou sur une grande zone, plusieurs ombres multicouches et des filtres animés demandent du travail au navigateur, sensiblement plus sur un téléphone d’entrée de gamme ; les couleurs, bordures et ombres simples ne coûtent rien.

Le visiteur ne doit jamais remarquer un effet ; il doit seulement trouver la page agréable et claire.