Explication de la page @page GeOverture
Je vais vous expliquer à quoi correspond chaque élément dans le CSS pour la page GeOuverture (cf. image ci-dessous).
La page se nomme @page GeOverture dans le CSS.
Dans un premier temps nous allons nous intéresser aux éléments de cette partie :
/* 4. Le design du livre grâce à Paged.js ——————— */
/* j. Nos pages geoformat : l’introduction —————*/
La légende de la photo correspond à @bottom-center. Vous pouvez inscrire votre propre légende dans content entre les guillemets (content : “” ; ).
@page GeOverture {
@bottom-center {
content : “” ;
color : black ;
font-style : italic ;
font-size : 0.58em ;
position : absolute ;
left : 20px ;
bottom : 16px ;
}
}
Regardons maintenant les éléments de cette partie :
/* 6. Les éléments de nos pages ——————————————————– */
/* d. Les éléments des pages geoformat : .geoformat, .intro et .section ——————————*/
Le nom du porteur du projet (en haut à gauche de la page) correspond à section.intro p.
section.intro p {
text-align : justify !important ;
max-width : 118mm ;
hyphens : none ;
color : var(–couleur-deux)
}
L’image de fond correspond à section.intro figure.img-cover et figure.img-cover img. J’ai réglé son opacité (opacity : 0.3 ; ), ses proportions (width, height et width) et sa position (top, left et margin-left ).
section.intro figure.img-cover {
position : absolute ;
width : 138mm ;
height : 200mm ;
top : -5mm ;
left : -15mm ;
z-index : -100 ;
overflow : hidden ;
opacity : 0.3 ;
}
figure.img-cover img {
width : auto ;
height : 100 % ;
margin-left : -50 % ;
}
