Nous avons déjà vu les encadrements un peu plus haut dans la Zone d'apprentissage — une utilisation simple comme la définition de leur couleur et de leur style. Dans cet article, nous allons faire une brève récapitulation, puis donner une idée de ce qu'il est encore possible de faire, comme les coins arrondis et les images d'encadrement.

Prérequis : Notions de HTML (voir Introduction à HTML) et une idée du fonctionnement des CSS (voir Introduction aux CSS.)
Objectif : Tout savoir sur la mise en forme des encadrements.

Encadrements : récapitulatif

Comme nous l'avons vu plus haut dans le cours, les éléments ont un encadrement situé fonctionnellement entre le remplissage et la marge de l'élément. Par défaut, l'encadrement a une taille de 0 — ce qui la rend invisible — mais vous pouvez en définir l'épaisseur, le style et la couleur pour la faire apparaître.

Forme abrégée de « border »

La propriété de forme abrégée border vous permet de définir les quatre côtés de l'encadrement en une seule ligne, par exemple :

<p>Mon encadrement est rouge !</p>
p {
  padding: 10px;
  background: yellow;
  border: 2px solid red;
}

Options : forme longue

border se décline en plusieurs propriétés de forme longue pour des besoins de style plus précis :

Vous vous demandez peut-être pourquoi il y a tant d'options de forme longue — il est utile, voyez‑vous, de les avoir sous la main pour pouvoir remplacer ou désactiver des éléments de style individuellement au besoin sans avoir à tout redéfinir constamment ; cela peut vous faire économiser beaucoup de lignes de code à long terme. Il est également intéressant de savoir que la bordure prend la couleur du texte par défaut et une largeur de 3px, lorsqu'aucune valeur n'est explicitement définie.

Dans cette optique, examinons un exemple de plan d'avancement de rédaction d'un livre fictif. Chaque chapitre est représenté par un élément <div> de largeur fixe contenant le numéro et le titre du chapitre. La progression de la rédaction est indiquée avec le code suivant :

  • les chapitres non commencés ou incomplets sont marqués par un encadrement en pointillé.
  • les chapitres écrits, mais nécessitant une relecture sont marqués par un encadrement tireté.
  • les chapitres complets (écrits et relus) sont encadrés en trait plein.
  • les chapitres en cours d'écriture ou de relecture sont marqués d'un encadrement épais en trait plein de couleur rouge.

Voyons une CSS que nous pourrions utiliser pour mettre en œuvre ceci :

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 220px;
  padding: 20px;
  margin: 10px;
  line-height: 2;
  background-color: yellow;
  text-align: center;
  display: inline-block;
}

.complete {
  border-style: solid;
}

.written {
  border-style: dashed;
}

.incomplete {
  border-style: dotted;
}

.writing, .review {
  border-bottom: 6px solid red;
}

Voici le résultat :

Il n'y a pas vraiment beaucoup de figures de style utilisées pour réaliser cela. Aucun style d'encadrement n'est déclaré dans la règle div ; nous n'avons utilisé que des classes données pour caractériser les différents points d'avancement de l'ouvrage. Nous avons retenu la largeur et la couleur par défaut pour les encadrements ; nous avons simplement défini un style pour .complete, .written et .incomplete. Ensuite, dans les chapitres pour lesquels .writing (écriture) ou .review (relecture) sont activement en cours, nous avons redéfini l'ensemble des propriétés pour le côté inférieur du cadre. C'est bien plus efficace que d'avoir à définir un encadrement avec la forme abrégée de border pour chaque type de boîte.

Vous pouvez trouver cet exemple sur Github sous le nom border-longhand.html (voir aussi le code source).

Coins arrondis

Les coins de boîtes arrondis sont une autre fonctionnalité terriblement à la mode sur les sites Web — tellement répandue que l'on a implémenté dans les navigateurs une propriété spécifique pour leur mise en œuvre facile : border-radius. Avant cette implémentation (et la prise en charge de plusieurs images d'arrière-plan), les développeurs devaient imbriquer chaque boîte pour laquelle on souhaitait des coins arrondis dans trois <div> supplémentaires et attacher un graphique de coin arrondi à chacun de ces quatre éléments. S'ils voulaient de la souplesse pour leurs boîtes ...

Note : Vous pourriez encore avoir à opérer de la sorte si vous devez garder exactement le même aspect pour les anciens navigateurs — border-radius est pris en charge par Internet Explorer 9 et suivants. Mais une absence de coins arrondis n'est pas de nature à arrêter des utilisateurs capables de lire vos contenus et les utilisateurs d'anciens navigateurs peuvent très bien vivre sans.

C'est maintenant beaucoup plus facile — utilisez simplement la propriété :

border-radius: 20px;

Pour mettre différentes tailles de rayon sur différents coins, vous pouvez donner deux, trois ou quatre valeurs, exactement comme avec padding et margin :

/* 1ère valeur est pour les coins haut-gauche et bas‑droite,
   la 2e pour les coins haut-droite et bas-gauche  */
border-radius: 20px 10px;
/* 1ère value est pour le coin haut-gauche, la 2e pour les
   haut-droite et bas-gauche, la 3e pour le bas-droite */
border-radius: 20px 10px 50px;
/* haut-gauche, haut-droite, bas-droite, bas-gauche */
border-radius: 20px 10px 50px 0;

Pour terminer, vous pouvez également créer des arrondis elliptiques (où le rayon x est différent du rayon y). Les deux rayons différents sont indiqués séparés par une barre inclinée (/) ; vous pouvez combiner ceci avec n'importe quel arrangement de valeurs, comme indiqué ci-dessus. Par exemple :

border-radius: 10px / 20px;
border-radius: 10px 30px / 20px 40px;

Note : vous pouvez utiliser n'importe quelle unité de longueur pour définir les rayons des arrondis, par ex. pixels, rems, pourcentages.

Note : des propriétés sous forme longue sont également disponibles pour définir individuellement le rayon d'arrondi de chaque angle de la boîte : border-top-left-radius, border-top-right-radius, border-bottom-left-radius et border-bottom-right-radius.

Apprentissage actif : jouons avec les arrondis de cadres

Pour cet apprentissage actif, nous souhaitons que vous mettiez en œuvre les divers types d'arrondis sur l'élément donné. Ajoutez :

  • le même coin arrondi aux quatre angles,
  • le même coin arrondi elliptique aux quatre angles,
  • un coin arrondi circulaire et elliptique à chaque angle,
  • des coins arrondis à chaque angle avec la syntaxe à trois paramètres,
  • un coin arrondi à l'angle inférieur gauche,
  • des coins arrondis en utilisant des unités différente, pour voir le comportement associé. Les pourcentages sont interessants  — pourquoi ?

Si vous faites une erreur, vous pouvez toujours tout réinitialiser avec le bouton de même nom.

Encadrement avec des images

Enfin, regardons l'ajout le plus récent (et complexe) aux CSS pour manipuler les encadrements — border-image. L'idée ici est que parfois la création d'une fonctionnalité d'interface utilisateur complexe nécessitera un design complexe pour le cadre ne se cantonnant pas à une couleur unie. Ceci pourrait être créé en superposant un élément exactement au centre d'un élément plus grand et en appliquant une image de fond à l'élément inférieur, en simulant une bordure complexe. Ou dans les cas extrêmes, vous pourriez même avoir à créer une grille 3 x 3 de neuf éléments, avec l'élément central comme contenu et les huit éléments périmètriques ayant les éléments d'encadrement appliqués à eux.

Les images border-image facilitent énormément la réalisation d'encadrements à motifs complexes, mais uniquement dans les navigateurs modernes (Internet Explorer 11+ le prend en charge, de même que plusieurs autres navigateurs récents). Regardons comment cela fonctionne.

Premièrement, vous avez besoin d'avoir une image à appliquer pour votre navigateur. Ce sera typiquement un dessin tramé 3 x 3, 4 x 4, 5 x 5 (etc.), comme le suivant :

quand une telle image est utilisée comme image d'encadrement, le navigateur coupe l'image en 8 parties, comme indiqué sur l'image suivante :

Les images d'angle seront insérées dans les angles de l'encadrement et les morceaux haut, bas, droite et gauche seront utilisés pour dessiner les côtés correspondants du cadre (en les étirant ou en les répétant). Nous devons indiquer au navigateur de faire des découpes de bonne dimension — cette image par exemple est un carré de 160 pixels dans une trame de 4 × 4, donc chaque coupe nécessitera 40px.

Pour débuter, il nous faut une boîte à encadrer. Il faut avoir défini un encadrement, sinon l'image n'aurait pas de place pour s'afficher. Nous utiliserons aussi background-clip pour que la couleur de fond ne remplisse que la zone sous le contenu et le remplissage sans s'étendre sous l'encadrement (vous pouvez ne pas souhaiter cela pour votre design, mais cela est utile dans notre cas).

border: 30px solid black;
background-clip: padding-box;

Note : il faut toujours inclure une définition de border quand on utilise border-image — cette définition sert de recours dans le cas où l'image d'encadrement ne peut pas être affichée, par exemple si le navigateur ne prend pas en charge la fonctionnalité.

Ensuite, nous utiliserons border-image-source pour définir la source de l'image à utiliser en tant qu'image d'encadrement. Cela fonctionne exactement de la même façon que background-image en acceptant pour valeur soit une fonction url(), soit un gradient.

border-image-source: url(border-image.png);

Maintenant nous utilisons border-image-slice pour définir la taille voulue des morceaux découpés, comme ceci :

border-image-slice: 40;

Cette propriété peut prendre une seule valeur si toutes les parties de la découpe sont de même taille ou bien un plusieurs valeurs si les découpes ont des tailles différentes, de la même manière que pour padding et margin :

  • deux valeurs : haut et bas, droite et gauche.
  • trois valeurs : haut, droite et gauche, bas.
  • quatre valeurs : haut, droite, bas, gauche.

Si l'image est un graphique matriciel (comme un .png ou .jpg), le nombre sera interprété en tant que pixels. Si l'image est un graphique vectoriel (comme un .svg), le nombre sera interprété comme étant une coordonnée dans le graphique. Les pourcentages peuvent aussi être utilisés (avec l'unité  %). Revoyez la page border-image-slice pour plus d'options et de détails.

Note : Par défaut, la neuvième partie — la partie centrale — est totalement omise et le contenu de l'élément apparaît dans le vide laissé. Si vous voulez que l'image centrale soit conservée, il convient d'inclure le mot-clé fill comme valeur de border-image-slice ou border-image : dans ce cas, elle s'étirera pour s'adapter à la zone de fond.

Finalement, nous utilisons border-image-repeat pour indiquer la manière dont les images rempliront les côtés de l'encadrement. Les options sont :

  • stretch : valeur par défaut ; les images des côtés sont étirées de manière à remplir le cadre. C'est généralement pas terrible et pixellisé, ce n'est donc pas recommandé.
  • repeat : les images des côtés sont répétées jusqu'à ce que le cadre soit rempli. Selon le cas, cela donne un bel aspect, mais il peut rester des fragments d'image non visibles.
  • round : les images des côtés sont répétées jusqu'à ce que le cadre soit rempli et elles sont légérement étirées de façon qu'aucun fragment n'apparaisse.
  • space : Les images des côtés sont répétées jusqu'à ce que le cadre soit rempli et un petit espace est ajouté entre chaque copie de l'image pour faire en sorte qu'aucun fragment n'apparaisse. Cette valeur n'est prise en charge que dans Safari (9+) et Internet Explorer (11+).

Nous nous déciderons pour la valeur round, puisqu'elle semble être la plus utile et la plus souple :

border-image-repeat: round;

Mettons tout ensemble

Rassemblons tout ce code pour afficher un exemple fonctionnel. Primo, un simple HTML :

<div>
  <p>Image d'encadrement</p>
</div>

Secundo, la CSS :

div {
  width: 300px;
  padding: 20px;
  margin: 10px auto;
  line-height: 3;
  background-color: #f66;
  text-align: center;
  /* border-related properties */
  border: 20px solid black;
  background-clip: padding-box;
  border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png);
  border-image-slice: 40;
  border-image-repeat: round;
}

Tertio, voici le résultat :

Quelque chose d'intéressant, peut-être l'avez vous remarqué : l'épaisseur de l'encadrement est fixé à 20px, alors que les parties d'image en ont 40 — dans ce cas, le navigateur ne fait que redimensionner les tranches à 20px de largeur pour qu'elles s'ajustent.

Vous trouvrez cet exemple dans Github sous le nom border-image.html (voir aussi le  code source). Faites une copie locale et amusez‑vous bien.

Autres propriétés

Deux autres propriétés des images d'encadrement sont moins utilisées. Ce sont :

  • border-image-width : redimensionne l'image d'encadrement uniquement, et non le cadre lui-même — si sa valeur est inférieure à celle de border-width, il sera placé contre la bordure extéreure de l'encadrement, sans la remplir. Si sa valeur est supérieure, il débordera de l'encadrement et commencera à se superposer au remplissage, puis au contenu.
  • border-image-outset : définit la taille d'un espacement supplémentaire entre la bordure interne de l'encadrement et le remplissage — une sorte de « remplissage d'encadrement». C'est le moyen facile de déplacer légèrement l'image d'encadrement vers l'extérieur.

Forme abrégée

Comme vous deviez vous y attendre, il y a une forme abrégée de la propriété qui est disponible, border-image ; elle vous permet de fixer l'ensemble des paramètres relatifs à la propriété en une ligne. Les lignes suivantes :

border-image-source: url(border-image.png);
border-image-slice: 40;
border-image-repeat: round;

peuvent être remplacées par celle‑ci :

border-image: url(border-image.png) 40 round;

Résumé

Maintenant les cadres n'ont plus de secrets pour vous, n'est-ce pas ? Les cadres de vos éléments bien sûr, et non celui de votre environnement. Il est utile de bien les comprendre et d'en connaître les nombreux usages différents. Dans l'article qui suit, nous allons avancer et explorer les meilleures pratiques de style pour les tableaux — nous montrerons une application utile de quelqu'unes des techniques déjà examinées dans ce module.

Dans ce module

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Dralyab
Dernière mise à jour par : Dralyab,