Habiller la page en CSS ‐ les fonds

Pascal FurlanCSS

Retour au codage avec un exercice pour ajouter et créer des fonds CSS. Pour cela, nous avons construit la page HTML en nous servant des raccourcis Emmet de Brackets.

Puis nous avons mis en forme la page web en utilisant le CSS pour obtenir le résultat suivant (menu et section 1 seulement visible) :

Le code CSS ci-dessous :

* {
box-sizing: border-box;
}.entete-page::before {
content: "";
display: table;
}




.entete-page::after {
content: "";
display: table;
clear: both;
}

body {
margin: 0;
padding: 0;
font-family: "Roboto", Helvetica, sans-serif;
background-color: black;
}

.enveloppe {
max-width: 1280px;
margin: auto;
background-color: white;
}

.entete-page {
position: fixed;
background-color: white;
width: 100%;
max-width: 1280px;
top: 0;
box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
}

.entete-page h1 {
margin: 0;
float: left;
font-size: 1rem;
padding: .2em .5em;
}

.navigation-principale {
float: right;
}

.navigation-principale ul {
padding: 0;
margin: 0;
list-style: none;
}

.navigation-principale li {
float: left;
}

.navigation-principale a {
display: block;
border-left: 1px solid white;
padding: .2em .4em;
color: white;
text-decoration: none;
font-weight: bold;
background-color: black;
}

.navigation-principale a:hover {
color: black;
background-color: white;
}

.page-virtuelle {
height: 100vh;
padding: 4rem 2rem 2rem 2rem;
}

.page-virtuelle h1 {
font-size: 5rem;
font-weight: 300;
color: white;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
margin: 0;
}

.page-virtuelle p {
font-size: 1.5rem;
font-weight: 300;
color: white;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
margin: 0 0 0 30%;
line-height: 1.6;
}

Pour illustrer l’exercice, voici les 9 premières sections mises en formes avec le CSS :

Section 1 :

#section1 {
background: url(http ://placeimg.com/960/540/animals/grayscale/3) center/contain no-repeat #25a;
}

Section 2 :

#section2 {
background: url(http ://placeimg.com/1920/1080/nature/color/1) center/cover no-repeat fixed;
}

Section 3 :

#section3 {
background: url(images/triangle_rouge.svg) no-repeat bottom right/200px, url(http ://placeimg.com/960/540/people/sepia/2) center/cover no-repeat fixed;
}

Section 4 :

#section4 {
background: url(images/triangle_blanc.svg) 0 center/100px repeat-y, url(images/triangle_blanc.svg) center/150px repeat-x, url(images/triangle_rouge.svg) no-repeat bottom right/200px, #cb8;
}

Section 5 :

#section5 {
background: url(images/triangle_blanc.svg) 0 0/50px repeat-y, url(images/triangle_blanc.svg) 50px 50px/100px repeat-y, url(images/triangle_blanc.svg) 150px 150px/200px repeat-y, url(images/triangle_blanc.svg) 350px 350px/400px repeat-y, url(images/triangle_blanc.svg) 750px 750px/800px repeat-y, #a00;
}

Section 6 :

#section6 {
background: url(images/triangle_blanc.svg) center 50px/50px fixed, url(images/triangle_blanc.svg) center 0/50px fixed, #6a2;
}

Section 7 :

#section7 {
background: url(images/triangle_blanc.svg) 100% center/50px no-repeat, url(images/triangle_blanc.svg) calc(100% – 50px) center/100px no-repeat, url(images/triangle_blanc.svg) calc(100% – 150px) center/200px no-repeat, #26c;
}

Section 8 :

#section8 {
background: url(images/triangle_blanc.svg) 100% bottom/25% no-repeat, url(images/triangle_blanc.svg) 66.66% bottom/25% no-repeat, #c69;
}

Section 9 :

#section9 {
background: url(images/cubes.svg) center/400px, #8b8;
}