Effet vignettage sur un site : assombrir les bords

Le vignettage pousse les bords de l’image vers l’ombre et laisse le centre dans la lumière. L’œil va là où c’est clair : sans s’en rendre compte, le visiteur revient au milieu de l’écran, sur le titre, sur le geste filmé, sur le plat. C’est la plus discrète des matières, et l’une des plus utiles, parce qu’elle gagne du contraste sans toucher à la vidéo.

Sans

Vignettage

D’où vient l’effet

En photographie, le vignettage est d’abord un accident d’optique. Canon le décrit comme une baisse de l’éclairage en périphérie : selon l’objectif et les conditions de prise de vue, les quatre coins de l’image sortent plus sombres. Une partie de la lumière qui entre dans l’objectif est arrêtée par son fût, ou par le pare-soleil.

Les fabricants s’emploient à l’effacer. Sur ses boîtiers EOS récents, Canon corrige l’éclairage périphérique dans l’appareil même, et la correction est activée par défaut. Le même fabricant rappelle pourtant que le vignettage peut être un choix délibéré, en portrait notamment, pour attirer le regard vers le sujet ; on l’ajoute alors au développement, sur l’ordinateur.

C’est ce second usage que reprend le calque de l’atelier : une ombre voulue, posée par-dessus la page, qui encadre le contenu comme un tirage encadre son sujet.

Quand le poser

Le vignettage sert les pages qui ont un sujet au centre et beaucoup de matière autour :

• un atelier filmé de près, où l’établi, les copeaux et les outils se bousculent dans les coins ;
• un lieu de production, une ferme, un domaine, une torréfaction, dont le décor déborde du cadre ;
• un bien immobilier montré en grand, où l’œil doit s’arrêter sur la pièce ;
• une salle de sport ou un terrain filmés en lumière dure, où les bords brûlés distraient.

Quatre des vingt-quatre mises en page de l’atelier le posent d’office. La mise en page Atelier d’artisan et la mise en page Producteur l’associent au grain de film : le grain travaille la surface, le vignettage la lumière. La mise en page Club sportif et la mise en page Immobilier le portent seul.

Quand s’en passer. Une page claire et aérée, faite d’aplats et de beaucoup de blanc, n’a rien à encadrer : le calque ne ferait que délaver ses coins. Évitez-le aussi quand une information importante est posée dans un angle, un numéro de téléphone en bas de l’écran par exemple : c’est précisément là qu’il pèse.

Le bon dosage

Le vignettage se règle par une seule valeur : la part de la couleur du fond de la page mêlée à l’image au bout du dégradé, 55 % par défaut. Le dégradé reste transparent sur toute la moitié centrale, puis se charge vers l’extérieur.

Deux détails le rendent plus doux qu’il n’y paraît. Son centre est placé un peu au-dessus du milieu de l’écran, à 42 % de la hauteur : le bas s’assombrit davantage que le haut, comme sous une lumière qui tombe d’en haut. Et l’ellipse déborde largement de l’écran, si bien que même les coins ne reçoivent qu’une ombre légère. On le remarque surtout quand on l’enlève.

Comme toutes les matières, il laisse le premier écran tranquille : la vidéo d’accueil reste nue, et le calque se lève à mesure qu’on descend.

Une règle tient pour toutes les matières : deux calques au plus. Le vignettage fait un bon second calque, puisqu’il touche à la lumière quand les autres touchent à la texture. Au troisième, l’image se salit.

Ce qu’il coûte

Presque rien. Le calque est un dégradé, dessiné une fois par le navigateur, sans fichier à télécharger. Il est posé en position fixe par-dessus la page et laisse passer les clics et le défilement.

Il ne s’anime jamais. La seule chose qui varie, pendant le premier défilement, est son opacité. Or l’opacité et les transformations sont les deux propriétés qu’un navigateur sait faire varier sans repeindre l’écran (web.dev). Le mouvement vient du film dessous.

L’accessibilité

• Le contraste. Sur une page sombre, le vignettage aide : il assombrit le fond derrière un texte clair posé près des bords. Les règles d’accessibilité demandent un contraste d’au moins 4,5 pour 1 entre un texte courant et son fond (WCAG 2.2, critère 1.4.3). Mesurez-le à l’endroit le moins favorable de la page, jamais au seul centre.
• Le mouvement réduit. Quand un visiteur demande moins d’animations à son système (prefers-reduced-motion), le grain et le givre disparaissent de la page. Le vignettage reste, parce qu’il est immobile.
• Aucun clignotement. Le calque ne change jamais de lui-même : seul le défilement du visiteur le fait apparaître, et il reste ensuite en place.

Comment il est fait

Un dégradé radial, radial-gradient(), en ellipse : transparent au centre, puis mêlé à la couleur du fond de la page grâce à la fonction color-mix(). Le calque tire donc les bords vers le fond du site. Sur une palette sombre, ils s’assombrissent ; sur une palette claire, ils pâlissent. Le vignettage reste ainsi dans les couleurs de la page.

.m.m--vignette {
  opacity: var(--m-voile, 1);
  background: radial-gradient(130% 110% at 50% 42%,
    transparent 50%,
    color-mix(in srgb, var(--bg) calc(var(--vignette, 55) * 1%), transparent) 100%);
}

--m-voile vaut zéro sur le premier écran et monte jusqu’à un quand on descend ; --vignette porte l’intensité. Le préfixe .m garantit que la règle ne s’applique qu’au calque prévu pour elle : posée ailleurs, elle reste sans effet.

Dans l’atelier

Le vignettage fait partie des dix matières de la bibliothèque. On le choisit à l’étape « La matière », après le fond, seul ou avec une seconde matière.