Editions ENI Livres | Vidéos | e-Formations
La mise en forme CSS3 des boîtes
Les nouvelles propriétés CSS3
Parmi toutes les nouveautés des CSS3, les nouvelles propriétés de mise en forme des boîtes sont celles qui ont déclenché le plus d’enthousiasme et le plus de réactions enjouées de la part des designers web. Tous ont poussé un « ouf » de soulagement : ils vont enfin pouvoir créer des coins arrondis, des dégradés, des ombres portées et gérer de la transparence dans les boîtes <div>.
La largeur des boîtes
1. Avec les CSS 2.1
Vous le savez, avec les CSS 2.1, la largeur nécessaire à l’affichage d’une boîte prend en compte les marges (margin), les bordures (border), le remplissage (padding) et le contenu (width).
2. Avec les CSS3
La propriété box-sizing est définie dans le module CSS Basic User Interface Module Level 3 (CSS3 UI) qui est en Recommendation au 21 juin 2018 : https://www.w3.org/TR/css-ui-3/.
Avec les CSS3, avec la propriété box-sizing, vous pouvez indiquer que les valeurs de border et de padding sont incluses dans la largeur width.
La propriété accepte deux valeurs :
-
content-box : la largeur de la boîte se calcule avec la largeur du contenu, la bordure et le remplissage, comme en CSS 2.1. C’est la valeur par défaut.
-
border-box : la largeur calculée de la boîte inclut la largeur du contenu, la bordure et le remplissage.
Voici deux boîtes avec des largeurs de contenu (width), des remplissages (padding) et des bordures identiques (border). La boîte <div id="maBoite3"> possède en plus la propriété box-sizing: border-box.
#maBoite2 {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 90px;
padding: 10px;
border: 10px...Le débordement du contenu
Les CSS 2.1 nous permettent d’utiliser la propriété overflow pour gérer le contenu quand il est plus important que le conteneur. C’est le principe bien connu du « débordement du contenu ».
La propriété CSS3 overflow est définie dans le module CSS Overflow Module Level 3 qui est en Working Draft au 31 juillet 2018 : https://www.w3.org/TR/css-overflow-3/.
Les CSS3 nous proposent deux nouvelles propriétés pour gérer le débordement :
-
overflow-x : pour gérer le débordement horizontal.
-
overflow-y : pour gérer le débordement vertical.
Les valeurs acceptées sont les mêmes qu’en CSS 2.1 :
-
visible : le contenu est toujours visible.
-
hidden : le contenu est toujours masqué.
-
scroll : le contenu est visible par l’intermédiaire d’une barre de défilement qui est toujours visible.
-
auto : le contenu est visible par l’intermédiaire d’une barre de défilement qui est affichée uniquement si cela est nécessaire.
Voici l’exemple de deux boîtes ; la deuxième, #maBoite2, utilise la propriété overflow-x: scroll et la propriété white-space: nowrap indispensable pour afficher la barre de défilement.
#maBoite1 {
width: 250px;
height: 100px; ...Les couleurs d’arrière-plan
1. Le module des couleurs
Le W3C édite un module CSS3 spécial pour la gestion des couleurs : https://www.w3.org/TR/css3-color/. Ce module est finalisé, il est donc en Recommendation au 19 juin 2018.
Les deux nouveautés sont le mode TSL et la transparence.
2. Le mode TSL
Le mode TSL permet de réunir dans un seul et même graphique (souvent appelé roue chromatique) les modèles colorimétriques RVB et CMJN. En anglais c’est le mode HSL.
-
Le T veut dire Teinte (Hue en anglais) : c’est la couleur. Son unité est le degré. Par définition le rouge est à 0°.
-
Le S veut dire Saturation : c’est la « pureté » de la teinte, c’est-à-dire la quantité de gris qu’il y a dans une teinte. Plus une couleur est saturée, plus elle est éclatante, vive, car elle a très peu de gris. Plus une couleur est désaturée, plus elle est terne, fade, car elle a beaucoup de gris. L’unité est le %. Une teinte à 0 % est totalement grise (désaturée), une teinte à 100 % est totalement « pure » (saturée), sans une once de gris.
-
Le L veut dire Luminosité : c’est la quantité de lumière. L’unité varie de 0 % de lumière (noir), à 100 % de lumière...
L’état des lieux des arrière-plans et des bordures
Ce module concerne : les arrière-plans, les bordures, les coins arrondis et les ombres portées.
Les propriétés sont définies dans le module CSS Backgrounds and Borders Module Level 3 qui est en Candidate Recommendation au 17 octobre 2017 : https://www.w3.org/TR/css3-background/.
Les coins arrondis
1. Des coins identiques
Les « conteneurs » (<div>, <section>, <header>...) acceptent maintenant les coins arrondis. La valeur de l’arrondi exprimée en pixels peut être identique pour les quatre coins ou différente pour chaque coin. Cette valeur indique le rayon du « rond » placé à chaque angle du conteneur ou de la boîte.
Voilà le style CSS d’une boîte <div> aux quatre coins identiques avec un arrondi à 10 pixels :
#coins-egaux {
border-radius: 10px;
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 90px;
background-color: lightblue;
} Notez qu’Opera et IE reconnaissent nativement la propriété border-radius.
Voilà l’aperçu :
2. Des coins arrondis différents
Voilà maintenant une boîte avec des coins arrondis différents pour chaque angle :
#coins-diff {
border-radius: 10px 30px 20px 40px;
position: absolute;
top: 130px;
left: 10px;
width: 200px;
height: 90px;
background-color: lightblue;
} Vous notez l’utilisation de deux syntaxes...
Les bordures fantaisistes
1. La syntaxe du W3C
La propriété border-image qui permet d’appliquer des bordures fantaisistes est aussi définie dans le module CSS Backgrounds and Borders Module Level 3 : https://www.w3.org/TR/css3-background/#the-border-image.
Les CSS3 nous permettent maintenant d’appliquer des images dans les bordures. Cette image sera répétée dans la bordure selon un motif défini par le concepteur.
Créez une image qui sera répétée dans la bordure, selon un motif qui va permettre de définir les quatre angles et les quatre côtés.
Dans cet exemple, c’est une image de 60 pixels de côté présentant un rond pour chaque angle et un triangle orienté différemment pour les quatre côtés. Chaque « motif » fait donc 20 pixels de côté.
Utilisez la propriété border-image.
Voilà la syntaxe courte avec les préfixes des navigateurs :
#bordure {
position: absolute;
top: 10px;
left: 10px;
width: 300px;
height: 100px;
border-width: 20px;
border-image : url(motif.png) 20 round;
background-color: lightyellow;
} Vous notez bien la présence de la propriété...
Les ombres portées
1. L’état des lieux
La propriété box-shadow qui permet d’appliquer des ombres portées est aussi définie dans le module CSS Backgrounds and Borders Module Level 3 : https://www.w3.org/TR/css3-background/#the-box-shadow
2. Créer une ombre portée
C’est la propriété box-shadow qui permet de créer une ombre portée à un élément, à une boîte <div>. Les attributs sont :
-
la distance horizontale de l’ombre portée,
-
la distance verticale de l’ombre portée,
-
la taille du flou de l’ombre portée (cet attribut est facultatif ; s’il est omis, c’est la valeur 0 qui est utilisée),
-
la taille de l’étendue de l’ombre portée. Cela permet de placer le « point médian » du dégradé, point à partir duquel l’ombre s’estompe. Une valeur positive étend l’ombre, une valeur négative la contracte. Cet attribut est facultatif ; s’il est omis, c’est la valeur 0 qui est utilisée.
-
La couleur de l’ombre portée,
-
la position de l’ombre portée (inset à l’intérieur, ou outset à l’extérieur, qui est la valeur par défaut).
Voici un exemple simple :
#maBoite {
position: absolute; ...Les dégradés
1. L’état des lieux
Le module CSS Image Values and Replaced Content Module Level 3, pour les images et les dégradés est en Candidate Recommendation au 17 avril 2012 : https://www.w3.org/TR/css3-images/
2. Les dégradés linéaires
Voici l’URL du chapitre consacré aux dégradés linéaires, sur le site du W3C : https://www.w3.org/TR/css3-images/#linear-gradients.
Les dégradés linéaires s’appliquent en ligne dans la boîte concernée et ils utilisent la notation linear-gradient(). Cette notation s’utilise avec la propriété background. Nous avons plusieurs valeurs à indiquer :
-
angle : angle en degrés du dégradé. Ou,
-
to : position du début du dégradé. Avec les mots-clés : top, right, bottom ou left.
-
color-stop : une ou plusieurs couleurs du dégradé, avec si besoin est, une valeur en pourcentage pour définir son application.
Premier exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Dégradé linéaire</title>
<meta charset="UTF-8" />
<style>
.degrade-trois-couleurs {
background: linear-gradient(to top, blue, white, red);
border: 1px solid #333;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="degrade-trois-couleurs"> </div>
</body>
</html> Voici l’affichage de la boîte :
Deuxième...
Les arrière-plans multiples
1. L’objectif
Avec les CCS2.1 nous ne pouvons appliquer qu’une image en arrière-plan d’un élément. Avec les CSS3, nous avons la possibilité d’en appliquer plusieurs, ce qui offre des perspectives très intéressantes.
Nous allons utiliser la très classique propriété d’arrière-plan, dans sa syntaxe courte background. Elle est définie dans le module CSS Backgrounds and Borders Module Level 3 : https://www.w3.org/TR/css-backgrounds-3/.
2. Un exemple simple
Nous allons utiliser la propriété background. La différence est simple : chaque image d’arrière-plan est séparée d’une virgule. Dans cet exemple, je suis allé à la ligne pour chaque image, pour plus de clarté dans le code. Chaque image est un chiffre.
#imagesMultiples {
position: absolute;
top: 10px;
left: 10px;
width: 150px;
height: 80px;
border: 1px solid #333;
background: url("un.png") top left no-repeat,
url("deux.png") top right no-repeat,
url("trois.png") bottom left no-repeat,
...Les autres propriétés d’arrière-plan
1. Les propriétés
Les nouvelles propriétés background-origin, background-clip et background-size sont elles aussi définies dans le module CSS Backgrounds and Borders Module Level 3 : https://www.w3.org/TR/css-backgrounds-3/.
Dans ce module, vous retrouvez les propriétés classiques :
-
background-color,
-
background-image,
-
background-repeat,
-
background-attachment.
2. L’origine d’une image
La propriété background-origin permet de définir la position d’origine d’une image en arrière-plan d’une boîte. Cette propriété accepte trois valeurs :
-
padding-box : l’image est placée sur la limite du remplissage de la boîte ; c’est la valeur par défaut.
-
border-box : l’image est placée sur la limite de la bordure de la boîte.
-
content-box : l’image est placée sur la limite du contenu de la boîte.
Vous devez encore utiliser les préfixes propriétaires et des valeurs propriétaires (border, padding et content).
Voilà un exemple :
#origine {
width: 250px;
height: 150px;
border: 10px dotted; #333;
padding: 10px;
background: url("suricate.jpg")no-repeat;
background-clip: border-box; ...Des générateurs CSS3 en ligne
1. L’objectif
Nous avons déjà vu quelques générateurs en ligne pour les nouvelles propriétés CSS3. Voici quelques outils « tout en un », dans lesquels vous trouverez presque toutes les propriétés. Notez que certains de ces sites, qui commencent un peu à dater, utilisent encore les préfixes, alors qu’ils ne sont plus nécessaires.
2. WestCIV
Ce site (http://www.westciv.com/tools/box-properties/index.html) propose, en une seule interface, de travailler :
-
les dégradés linéaires et radiaux,
-
le texte (ombre portée et colonnes),
-
les boîtes (couleur d’arrière-plan, coins arrondis, colonnes et ombre portée),
-
les transformations (que nous verrons dans un prochain chapitre).
3. CSS 3.0 Maker
Ce site (http://www.css3maker.com/index.html) vous propose, dans une interface très sombre, de travailler :
-
les coins arrondis,
-
les dégradés,
-
les transformations, les animations et les transitions (que nous verrons dans un prochain chapitre),
-
la couleur d’arrière-plan en rgba(),
-
l’ombrage du texte,
-
l’ombrage des boîtes,
-
la rotation du texte,
-
la gestion des polices incorporées avec @font-face.
4. CSS3 Playground
Ce site (http://css3.mikeplate.com/) à l’interface simpliste permet de travailler :
-
les coins arrondis,
-
les ombres...
Exemple d’un tableau aux coins arrondis
1. L’objectif
Nous allons étudier la création d’un tableau aux coins arrondis proposés par la Red Team Design : https://catalin.red/practical-css3-tables-with-rounded-corners
2. La structure du tableau
Le tableau (qui utilise une classe nommée .bordered) est structuré de manière très classique avec <table>, <thead>, <tr>, <th> et <td>.
<table class="bordered">
<thead>
<tr>
<th>#</th>
<th>IMDB Top 10 Movies</th>
<th>Year</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>The Shawshank Redemption</td>
<td>1994</td>
</tr>
<tr>
<td>2</td>
<td>The Godfather</td>
<td>1972</td>
</tr>
...
</table> Voilà l’aperçu initial :
3. La mise en forme du tableau
Le tableau ne devra pas avoir d’espace entre les cellules...
Exemple d’ombre sur la page
Voici une astuce toute simple pour donner de la profondeur à vos pages web : le principe est d’utiliser la pseudo-classe :before sur le body.
Voilà le style :
body:before {
/* Contenu vide */
content: "";
/* Positionnement */
position: fixed;
z-index: 100;
top: -10px;
left: -10px;
/* Largeur et hauteur */
width: 110%; Le contenu est vide : content: "", mais pour le navigateur, il y a quand même un élément, même s’il est vide. Il n’y a donc rien à afficher.
Ce contenu vide est positionné en position fixe pour ne pas être déplacé avec l’utilisation de la barre de défilement. Il est placé à -10 pixels qui sera la taille du flou.
position: fixed;
z-index: 100;
top: -10px;
left: -10px; Ensuite sa largeur est plus grande que la page et sa hauteur est de 10 pixels.
width: 110%;
height: 10px; L’ombre est placée à 0 pixel horizontalement et verticalement, la taille du flou est de 10 pixels et la couleur est noire avec une légère transparence :
box-shadow: 0px 10px rgba(0,0,0,.8); Voilà le rendu sur le fond blanc de la page :
