Régler la taille, les bordures et les effets

Cet article décrit les réglages de l’onglet Styles qui donnent sa forme à un bloc : sa taille et sa position, ses bordures et ses angles, son ombre, ses effets et ses transitions. Vous saurez les régler pour chaque état et chaque écran.

Avant de commencer

• Les réglages de cet article se trouvent dans l’onglet Styles de la barre latérale, quand un bloc est sélectionné. Ils se répartissent entre les panneaux Taille et espacement, Bordures, Effets et Transitions.
• Tant que vous ne touchez à rien, le bloc garde son rendu naturel. Les valeurs affichées dans les champs vides ne sont pas appliquées au bloc.
• Les marges intérieures et extérieures du panneau Taille et espacement sont décrites dans Espacer vos blocs.

Choisir où le réglage s’applique

En haut de l’onglet Styles, deux rangées décident de ce que vous réglez. Tous les panneaux de cet article écrivent dans l’état et l’écran choisis.

Un point de couleur marque chaque écran qui porte une valeur pour l’état en cours. Les écrans ne se recopient pas entre eux : une tablette sans valeur propre affiche celle de Ensemble, pas celle du bureau.

Quand le bloc porte un style enregistré, un champ qui en hérite s’affiche atténué. Selon la situation, un bouton placé à côté du champ rend la valeur du style, en supprime l’héritage ou efface votre valeur locale.

Régler la taille d’un bloc

La section Dimensions personnalisées du panneau Taille et espacement fixe la largeur et la hauteur du bloc.

1. Sélectionnez le bloc, ouvrez l’onglet Styles, puis le panneau Taille et espacement.
2. Pour un conteneur centré, cliquez sur une valeur de Largeur du conteneur, par exemple 1024. Le bloc prend cette largeur maximale et se centre.
3. Pour une contrainte précise, saisissez une valeur dans l’un des six champs et choisissez son unité.

Cliquer une seconde fois sur la valeur choisie de Largeur du conteneur ne l’annule pas. Pour la retirer, cliquez sur le bouton de remise à zéro placé à côté du libellé.

Le bouton ƒ, à côté du libellé d’un champ, combine deux valeurs, par exemple 100dvh − 92px pour une section qui remplit l’écran sous un en-tête de 92 px. Le bouton du milieu passe de l’addition à la soustraction.

Dans un carrousel, une unité de plus s’ajoute : cqi, une part de la largeur du carrousel. Une carte réglée sur 33.333cqi − 16px en montre trois côte à côte, quel que soit l’écran.

Les proportions se règlent par écran : une image en 21 / 9 sur ordinateur peut passer en 4 / 5 sur téléphone.

Masquer un bloc sur un écran

L’interrupteur Masquer ce bloc retire le bloc de la page pour l’écran choisi. Pour adapter une section au téléphone, dupliquez-la, adaptez la copie, puis masquez chaque version sur l’écran où elle ne convient pas.

L’interrupteur suivant passe le bloc en ligne, à côté de ses voisins. Son libellé suit la disposition du bloc : Bloc en ligne, Flex en ligne ou Grille en ligne.

Le réglage Visibilité du panneau Effets masque aussi un bloc, mais lui garde sa place dans la page.

Positionner un bloc

Le menu Position sort un bloc du flux normal de la page. Il se règle par état et par écran : un panneau collé sur ordinateur peut redevenir normal sur téléphone.

Dès qu’une position autre que Par défaut est réglée sur l’écran affiché, la section Décalage apparaît avec quatre champs : Haut, Droite, Bas et Gauche. Ils acceptent les mêmes unités et le même bouton ƒ que les dimensions.

Un bloc Collante ou Fixe en haut de l’écran ne cache rien. Un lien vers une ancre, l’élément atteint au clavier et l’étape d’un formulaire s’arrêtent 16 px sous lui. Le site mesure sa hauteur à chaque changement de taille ou d’écran.

Le réglage Flottement fait flotter un bloc à gauche ou à droite. Le texte voisin coule autour de lui.

Gérer ce qui dépasse

Le réglage Débordement décide de ce que devient un contenu plus grand que son bloc. Les choix sont des icônes, avec leur nom au survol.

Poser une bordure

1. Dans l’onglet Styles, ouvrez le panneau Bordures. Un aperçu du bloc s’affiche en haut du panneau.
2. Sous Bordure, saisissez une Épaisseur en pixels. Le style et la couleur deviennent disponibles.
3. Choisissez le Style parmi Pleine, Tirets, Pointillés ou Double.
4. Cliquez sur la pastille et choisissez la couleur.

Le bouton Séparer, à droite de la rangée, donne à chaque côté sa propre bordure : Haut, Droite, Bas et Gauche. Le bouton Fusionner revient à une bordure unique. Une épaisseur de 0 efface la bordure.

Arrondir les angles

Le champ Rayon des angles est une liste déroulante des rayons de votre design system, chacun affiché par sa valeur. Choisissez un rayon pour l’appliquer à tous les angles, ou Aucun pour retirer l’arrondi. Le bouton Séparer donne une liste à chaque angle.

Le design choisi dans le catalogue peut changer ces valeurs. Les boutons, les champs de formulaire et leurs listes déroulantes prennent le rayon de 4 px : modifier ce cran les arrondit tous d’un coup.

Le bouton + crée un rayon et le crayon modifie celui qui est appliqué. Seuls les administrateurs du site voient ces deux boutons. Le formulaire ne demande qu’une valeur et une unité (px, em, rem ou %). Une modification vaut pour tous les blocs qui utilisent ce rayon. Une valeur n’existe qu’une fois : un second rayon de 8 px est refusé.

Le bouton Passer en mode avancé affiche huit champs à unités libres, pour des angles elliptiques : un rayon horizontal et un rayon vertical par angle.

Quand un rayon est réglé sans que le débordement soit masqué, le panneau affiche Les images peuvent ne pas suivre l’arrondi des coins. Cliquez sur Passer le débordement à Masqué. pour que l’image suive l’arrondi.

Le champ Forme des angles change la forme d’un angle arrondi : Arrondi, Creux, Encoche, Biseau ou Squircle, entre le carré et le cercle. Il reste grisé tant qu’aucun rayon n’est réglé.

Ajouter une ombre portée

Une ombre est une entrée de votre design system, comme une couleur. Vous la créez une fois et la posez sur autant de blocs que vous voulez. La modifier la modifie sur tous les blocs qui la portent.

1. Dans le panneau Bordures, ouvrez la liste Ombre portée et choisissez une ombre, par exemple Élévation 2.
2. Pour la retirer, choisissez Aucun. Le bloc reprend l’ombre de son style enregistré s’il en porte une.

Chaque site reçoit cinq ombres, Élévation 1 à Élévation 5. Chacune superpose une ombre nette noire à 30 % et une ombre diffuse noire à 15 %. Elles s’éloignent et s’adoucissent à mesure que le niveau monte.

Vous pouvez modifier les couches d’une ombre livrée : votre version vaut pour votre site. Une ombre livrée ne se renomme pas et ne se supprime pas.

Créer une ombre

1. À droite de la liste Ombre portée, cliquez sur +. Le formulaire s’ouvre avec une couche.
2. Saisissez un Nom. Ce champ est obligatoire, car le nom désigne l’ombre dans la liste.
3. Dans la carte Couche 1, réglez le décalage X et Y, le Flou et l’Étalement, en pixels, puis la couleur.
4. Pour superposer une seconde ombre, cliquez sur Ajouter une couche.
5. Cliquez sur Enregistrer. L’ombre est posée sur le bloc.

Une ombre compte jusqu’à huit couches. La première est peinte au-dessus des suivantes : les flèches Monter et Descendre changent leur ordre. L’enregistrement est refusé si le nom est vide, ou si une couche ne règle ni décalage, ni flou, ni étalement, ni couleur.

Le crayon, à côté de +, modifie l’ombre choisie. Le formulaire affiche Vos changements s’appliqueront à tous les blocs qui s’en servent. Pour un effet propre à un bloc, créez plutôt une ombre.

Soulever une carte au survol

1. Sur l’état Par défaut, choisissez Élévation 1 dans Ombre portée.
2. Passez sur l’état Survol et choisissez Élévation 3.
3. Revenez sur l’état Par défaut et ajoutez une transition de 200 ms comme dans la section « Adoucir un changement d’état ».

La carte se soulève sous le pointeur et redescend en douceur.

Transformer un bloc

Avec le panneau Effets, vous faites tourner, déplacer, agrandir ou incliner un bloc sans changer la place qu’il occupe dans la page. Il s’ouvre de lui-même quand un effet est déjà réglé.

Les transformations restent appliquées pendant les animations du bloc : une carte inclinée glisse en restant inclinée.

Régler l’apparence d’un bloc

Un filtre et une découpe se créent avec le bouton + de leur champ et se modifient avec le crayon. Ces boutons, comme ceux des ombres et des rayons, sont réservés aux administrateurs du site : les autres rôles choisissent dans la liste. Comme une ombre, ils servent à tous les blocs qui les portent. Le filtre du panneau Effets agit sur le bloc lui-même. Le filtre d’arrière-plan agit sur ce qui se trouve derrière le bloc : il est décrit dans Colorer un bloc.

Découper un bloc dans une forme

Le constructeur de découpe demande d’abord une Forme. Toutes les valeurs sont en pourcentages de la taille du bloc : la même découpe convient à une bannière comme à une petite carte.

Une opacité, un filtre ou une découpe réglés sur le bloc ne se combinent pas avec une animation d’apparition, qui les anime elle-même. Réglez chacun d’un seul côté.

Garder l’anneau de focus

Un visiteur qui navigue au clavier voit où il se trouve grâce à l’anneau de focus. Les liens, les boutons, les champs de formulaire, les interrupteurs, les cases à cocher et les questions d’accordéon reçoivent un anneau de 2 px quand ils prennent le focus au clavier. Sa couleur suit celle du texte de l’élément. Il n’apparaît pas à la souris.

Le réglage Contour du panneau Effets dessine un trait autour du bloc sans changer sa taille, contrairement à une bordure. Il demande une Épaisseur en pixels, un Style et une couleur. Le champ Décalage, de −99 à 99 px, apparaît dès qu’une épaisseur est réglée.

Pour remplacer l’anneau de focus par le vôtre, réglez le contour sur l’état Focus. Votre contour s’affiche à la place de l’anneau.

Adoucir un changement d’état

Avec le panneau Transitions, un changement d’état glisse au lieu de sauter : une couleur, une ombre ou une bordure qui change au survol, au focus ou quand une case est cochée. Sans transition, le changement est instantané.

1. Sélectionnez le bloc, choisissez l’état Par défaut et ouvrez le panneau Transitions.
2. Cliquez sur Ajouter une transition. Une ligne apparaît.
3. Sous Propriétés, laissez Toutes, ou choisissez Personnalisées pour nommer les propriétés concernées.
4. Réglez la Durée (ms), la Fonction de progression et l’Attente (ms).
5. Survolez la barre d’aperçu pour voir le rythme choisi.

Plusieurs lignes peuvent s’empiler : la couleur en 200 ms et l’ombre en 500 ms, chacune à son rythme.

Un visiteur peut demander moins de mouvement, dans les réglages de son appareil ou avec un sélecteur d’animations. Il ne voit alors rien bouger au survol ni au focus. La rotation, la translation, l’échelle et l’inclinaison des états Survol et Focus ne s’appliquent pas. Les changements de couleur, de fond, de bordure, d’ombre, d’opacité et de filtre restent visibles, en douceur.

Voir aussi

• Espacer vos blocs
• Enregistrer le style d’un bloc
• Animer un bloc
• Colorer un bloc