Etape 5 – Mise en forme de la page
Dans cette étape, nous allons ajouter :
1) Un gradient en arrière-plan de la page ;
2) Un espace à droite de chaque carte pour obtenir un écartement régulier, horizontalement et verticalement ;
3) Un titre au-dessus des cartes.
Le gradient est défini avec la propriété CSS3 linear-gradient. Cette propriété n’étant pas encore finalisée, il est nécessaire d’utiliser les préfixes –ms (pour Internet Explorer), -moz (pour Firefox), -o (pour Opera) et –webkit (pour Chrome et les autres navigateurs WebKit).
La propriété linear-gradient admet trois arguments :
- Le point de départ du gradient ;
- La couleur de départ ;
- La couleur de fin.
Pour que l’arrière-plan utilise la propriété linear-gradient, il suffit de l’affecter à la propriété background-image de l’élément body :
body {
background-image: -ms-linear-gradient(left, #FFFFFF, #00A3EF);
background-image: -moz-linear-gradient(left, #FFFFFF, #00A3EF);
background-image: -o-linear-gradient(left, #FFFFFF, #00A3EF);
background-image: -webkit-linear-gradient(left, #FFFFFF, #00A3EF);
}
Voyons maintenant comment ajouter un espace à droite de chaque image. Pour cela, il suffit de définir la propriété margin-right des éléments img :
img {
margin-right: 5px;
}
Enfin, pour ajouter un titre au-dessus des cartes, vous insèrerez une balise <h1> juste après la balise <body> :
<body>
<h1>Memory – Evaluez votre mémoire</h1>
…
</body>
