Trucs et Astuces CSS
Chapitre 6 : Arrière-plans

Retour Accueil CSS

56 Effets d’arrière-plan : trames complexes (III)

Termes CSS clés employés : linear-gradient.
Compatibilité navigateurs : IE10+, Firefix22.0+, Chrome28.0+,
Safari5.1+ avec préfixe, Opera16+.

Problématique

Créer différentes trames d’arrière plan représentant des pages de cahier.

Résolution théorique

Des pages de cahier sont constituées de lignes : il sera donc fait appel à la propriété linear-gradient, avec une complexité croissante.

Résolution pratique

Nous ne parlerons pas ici du code HTML, puisqu’un seul élément est concerné par le fond. Le cas le plus simple est celui de simples lignes tracées sur fond blanc :
div.lignes { … background-color: white; background-image: linear-gradient(transparent 23px, rgba(220,220,200,.8) 24px, transparent 24px); background-size: 100% 24px; }
Nous ajoutons un texte, placé dans un élément p auquel est affecté la propriété font-family:
p.m {font-family:Script Normal, Segoe Script, cursive;}
pour obtenir l’aspect d’un texte manuscrit.

Cahier de SVT

Pour obtenir des carreaux, on répète de motif en le faisant pivoter de 90° et en modifiant en conséquence la taille de l’arrière-plan concerné :
div.grandcarreau { … background-image: linear-gradient(transparent 23px, rgba(220,220,200,.8) 24px, transparent 24px), linear-gradient(90deg, transparent 23px, rgba(220,220,200,.8) 24px, transparent 24px); background-size: 100% 24px, 24px 100%; }

Cahier de SVT

Vous pouvez ajuster facilement la dimension des carreaux, pour obtenir une feuille à petits carreaux :
div.petitcarreau { … background-image: linear-gradient(transparent 11px, rgba(220,220,200,.8) 12px, transparent 12px), linear-gradient(90deg, transparent 11px, rgba(220,220,200,.8) 12px, transparent 12px); background-size: 100% 12px, 12px 100%; }

Cahier de SVT

En réalité, une feuille à grands carreaux comporte des lignes supplémentaires : ajoutons-les :
div.grandcarreau2 { … background-image: linear-gradient(transparent 5px, rgba(220,220,200,.3) 6px, transparent 6px, transparent 11px, rgba(220,220,200,.3) 12px, transparent 12px, transparent 17px, rgba(220,220,200,.3) 18px, transparent 18px, transparent 23px, rgba(220,220,200,.8) 24px, transparent 24px), … }

Cahier de SVT

De même, il serait bien de posséder une ligne de marge. C’est un nouveau linear-gradient. Attention à penser à définir sa taille…
div.lignemarge { … background-image: linear-gradient(90deg, transparent 10%, rgb(200,0,0) 10.5% transparent 11%), … background-size: 100% 24px, 100% 24px, 24px 100%; }

Cahier de SVT

Dernier raffinement, il conviendrait d’ajouter une marge en haut, sans quadrillage, et d’éliminer les lignes secondaires dans la marge de gauche. Cela va nécessiter l’emploi de deux nouveaux dégradés linaires, ainsi que de la propriété background-repeat (dont la valeur est fixée par défaut à repeat, entraînant une répétition dans les deux sens).
Il faut également se souvenir que les images d’arrière-plan sont empilées en sens inverse de leur déclaration : a première déclarée sera la dernière dessinée et figurera en avant plan. Ici, nous allons tracer le quadrillage de fond, puis la marge de gauche, puis le filet de marge et enfin la marge supérieure. Le quadrillage de fond et le filet de marge sont identiques à ceux de l’exemple précédent. Leur propriété background-repeat restera fixée à repeat, mais cette fois explicitement.
Les deux marges supérieures et gauche sont identiques dans leur déclaration : du blanc opaque, avec la ligne du dernier pixel transparente :
linear-gradient(white 23px, transparent 24px)
Nous obtenons donc ce qui suit pour la propriété background-image :
background-image: linear-gradient(white 23px, transparent 24px), linear-gradient(90deg, transparent 23px, rgb(200,0,0) 23px, transparent 24px), linear-gradient(white 23px, transparent 24px), linear-gradient(transparent 5px, rgba(220,220,200,.3) 6px, transparent 6px, transparent 11px, rgba(220,220,200,.3) 12px, transparent 12px, transparent 17px, rgba(220,220,200,.3) 18px, transparent 18px, transparent 23px, rgba(220,220,200,.8) 24px, transparent 24px), linear-gradient(90deg, transparent 23px, rgba(220,220,200,.8) 24px, transparent 24px);

Il reste à définir la taille des nouvelles images d’arrière-plan : la marge haute doit occuper toute la largeur, la marge gauche être uniquement un carré de 24 x 24 pixels (selon les dimensions retenues ailleurs).
background-size: 100% 24px, 100% 24px, 24px 24px, 100% 24px, 24px 100%;
Puis à interdire toute répétition pour la marge haute et une répétition uniquement sur l’axe vertical pour la marge gauche :
background-repeat:no-repeat, repeat, repeat-y, repeat, repeat;


Cahier de SVT


Retour Accueil CSS

© 1999-2014 Fabrice "Fyndhorn Elder" Lemainque