Termes CSS clés employés : linear-gradient.
Compatibilité navigateurs : IE10+, Firefix22.0+, Chrome28.0+,
Safari5.1+ avec préfixe, Opera16+.
Créer différentes trames d’arrière plan représentant des pages de cahier.
Des pages de cahier sont constituées de lignes : il sera donc fait appel à la propriété
linear-gradient, avec une complexité croissante.
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
|
|---|