Formation Apprendre le CSS : Style de fond et bordure

Dans ce chapitre, on va découvrir comment styliser l'arrière-plan et les contours d'un élément. Ce sont des propriétés très utilisées en CSS car elles permettent rapidement de donner du relief à une interface, de structurer visuellement une zone et de mieux faire ressortir certains éléments.

Les fonds avec background

La propriété background sert à définir ce qui se trouve derrière le contenu d'un élément. Dans le cas le plus simple, on l'utilise pour appliquer une couleur de fond.

nav {
  background: black;
}

nav a {
  color: white;
}

Ici, la navigation passe en noir. On précise aussi une couleur blanche sur les liens pour conserver un bon contraste.

Comme pour font, background est en réalité une propriété raccourcie. Elle regroupe plusieurs sous-propriétés comme background-color, background-image, background-repeat, background-position ou encore background-size.

background-color

Si on veut simplement appliquer une couleur, on peut utiliser background-color directement :

nav {
  background-color: black;
}

Dans la pratique, on utilisera souvent background à la place, mais il est important de comprendre que cette propriété ne fait que regrouper plusieurs réglages.

background-image

Un fond n'est pas forcément une couleur. On peut aussi utiliser une image :

body {
  background-image: url("./img/plat-fiasco.jpg");
}

La fonction url() permet d'indiquer le chemin vers le fichier image. Ce chemin est relatif au fichier CSS.

Par défaut, si l'image est plus petite que l'élément, elle se répète automatiquement sur les deux axes. C'est le comportement initial de CSS.

background-repeat

La propriété background-repeat permet justement de contrôler cette répétition :

body {
  background-image: url("./img/plat-fiasco.jpg");
  background-repeat: no-repeat;
}

Les valeurs les plus utiles sont :

• repeat : répétition sur les deux axes
• repeat-x : répétition sur l'axe horizontal
• repeat-y : répétition sur l'axe vertical
• no-repeat : aucune répétition

Il existe aussi des valeurs plus spécifiques comme space, mais dans la majorité des cas, ce sont surtout repeat, repeat-x, repeat-y et no-repeat que l'on rencontrera.

⚠️ Les propriétés de background ne sont pas héritées. Si on applique un fond à un élément parent, ses enfants n'en héritent pas automatiquement.

background-position

Quand une image de fond n'est pas répétée, on a souvent besoin de choisir précisément sa position :

body {
  background-image: url("./img/plat-fiasco.jpg");
  background-repeat: no-repeat;
  background-position: right bottom;
}

Ici, l'image est placée en bas à droite de l'élément.

On peut utiliser des mots-clés :

• left, center, right
• top, center, bottom

Par exemple :

background-position: center center;
background-position: center bottom;

On peut aussi utiliser des longueurs :

background-position: 30px 500px;

La première valeur correspond à l'axe horizontal, la seconde à l'axe vertical.

Enfin, on peut mélanger un bord de référence et un décalage :

background-position: right 30px bottom 30px;

Ici, l'image sera positionnée à 30px du bord droit et à 30px du bas.

background-size

Par défaut, l'image conserve sa taille d'origine. Avec background-size, on peut la redimensionner :

body {
  background-image: url("./img/plat-fiasco.jpg");
  background-repeat: no-repeat;
  background-size: 200px 100px;
}

Ici, l'image fera 200px de large sur 100px de haut. Attention cependant : si le ratio ne correspond pas à l'image d'origine, elle sera déformée.

On peut aussi utiliser des pourcentages :

background-size: 100% 100%;

Dans ce cas, la taille est relative à l'élément sur lequel le fond est appliqué.

Les deux valeurs les plus intéressantes restent cependant :

• contain : l'image est agrandie au maximum sans être coupée ni déformée
• cover : l'image remplit toute la zone sans être déformée, quitte à être recadrée

background-size: contain;
background-size: cover;

En pratique, cover est particulièrement utile pour les grands bandeaux ou les sections héro.

La propriété raccourcie background

Comme souvent en CSS, on peut combiner plusieurs informations dans une seule déclaration :

body {
  background: url("./img/plat-fiasco.jpg") top left / 600px 100px no-repeat #ccc;
}

Dans cet exemple :

• on définit l'image avec url(...)
• on positionne l'image en top left
• on précise sa taille après le /
• on désactive la répétition avec no-repeat
• on ajoute une couleur de fond de secours avec #ccc

Cette syntaxe peut paraître un peu dense au début, mais elle devient vite pratique quand on maîtrise les différentes composantes.

Plusieurs fonds sur un même élément

Un élément peut avoir plusieurs images de fond. Il suffit de les séparer par des virgules :

body {
  background-image:
    url("./img/plat-fiasco.jpg"), url("./img/banniere-restaurant-fiasco.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position:
    top left,
    bottom right;
}

La première image est dessinée au premier plan, puis la suivante en dessous.

Cette technique est très utile pour ajouter des éléments décoratifs sans toucher au HTML.

Les dégradés

Les dégradés sont aussi considérés comme des images de fond. On peut donc les utiliser avec background-image ou background.

Le cas le plus simple est linear-gradient() :

body {
  background-image: linear-gradient(black, white);
}

Par défaut, le dégradé va du haut vers le bas. On peut préciser une direction :

body {
  background-image: linear-gradient(to right, black, white);
}

On peut aussi utiliser des angles, combiner plusieurs couleurs ou superposer un dégradé à une image.

body {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent),
    url("./img/plat-fiasco.jpg");
}

Les dégradés permettent de créer des effets très riches. On peut même générer des motifs entiers uniquement en CSS en combinant plusieurs gradients.

Les bordures avec border

La propriété border permet d'ajouter une bordure autour d'un élément. Comme background, c'est une propriété raccourcie.

Elle repose sur trois composantes principales :

• border-width : l'épaisseur
• border-style : le style
• border-color : la couleur

Par exemple :

nav {
  border: 3px solid #333;
}

Ici, on crée une bordure de 3px, pleine (solid) et gris foncé.

Les styles de bordure

La valeur border-style est indispensable. Sans elle, la bordure n'apparaît pas.

Les styles les plus courants sont :

• solid : trait continu
• dashed : tirets
• dotted : pointillés

border: 3px dashed black;
border: 3px dotted black;

Cibler un côté précis

On peut appliquer une bordure sur un seul côté :

border-bottom: 3px solid black;
border-top: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;

On retrouve la même logique pour les sous-propriétés plus fines, comme border-top-width ou border-right-color.

Une valeur différente par côté

Comme pour margin ou padding, on peut préciser jusqu'à quatre valeurs :

border-width: 10px 3px 2px 1px;

L'ordre est toujours le même :

1. haut
2. droite
3. bas
4. gauche

Le même principe fonctionne pour la couleur :

border-color: red green blue yellow;

Quand des bordures de couleurs différentes se rencontrent, le navigateur crée une jonction en biseau. Ce détail visuel peut sembler anodin, mais il sert parfois dans certaines astuces CSS.

La couleur par défaut

Si on ne précise pas border-color, la bordure utilise la valeur currentColor.

Cela signifie qu'elle prendra la couleur courante du texte :

nav {
  color: #666;
  border-width: 10px;
  border-style: solid;
}

Ici, la bordure sera grise, car currentColor récupère la couleur définie sur l'élément.

Arrondir les angles avec border-radius

La propriété border-radius permet d'arrondir les coins :

nav {
  border: 3px solid #333;
  border-radius: 10px;
}

Plus la valeur est grande, plus l'arrondi est marqué.

On peut aussi utiliser des pourcentages :

border-radius: 100%;

Sur un élément carré, cela permet par exemple d'obtenir un cercle.

outline, une bordure extérieure

La propriété outline ressemble à border, mais son comportement est différent : elle se dessine à l'extérieur de l'élément.

nav {
  outline: 3px solid red;
}

Contrairement à border, outline ne prend pas de place dans le modèle de boîte. Elle ne décale donc pas les autres éléments autour.

C'est pour cette raison qu'on l'utilise souvent pour les états de focus :

a:focus {
  outline: 3px solid red;
}

Si on utilisait border à la place, l'élément changerait légèrement de taille au focus et pourrait provoquer un décalage de la mise en page.

⚠️ outline est plus limitée que border : on ne peut pas cibler un côté précis comme avec outline-bottom ou outline-left, ces propriétés n'existent pas.

Les ombres avec box-shadow

Pour donner du relief à un élément, on peut utiliser box-shadow.

nav {
  box-shadow: 10px 10px 0 green;
}

Les valeurs correspondent à :

1. décalage horizontal
2. décalage vertical
3. flou
4. couleur

Ici, on obtient une ombre nette, décalée vers la droite et vers le bas.

Si on ajoute du flou :

nav {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
}

On obtient une ombre beaucoup plus naturelle.

Une ombre plus discrète

Dans la pratique, on préférera souvent une ombre peu marquée, avec une couleur semi-transparente :

img {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}

Quand une valeur vaut 0, on n'est pas obligé de préciser l'unité. 0, 0px et 0% reviennent au même.

La quatrième longueur

box-shadow accepte aussi une quatrième longueur avant la couleur : la valeur d'extension.

box-shadow: 0 0 15px 20px rgba(0, 0, 0, 0.2);

Cette valeur agrandit encore la zone couverte par l'ombre avant l'application du flou.