Termes CSS clés employés : linear-gradient, radial-gradient.
Compatibilité navigateurs : IE10+, Firefix22.0+, Chrome28.0+, Safari5.1+ avec préfixe, Opera16+.
Les propriétés d’image d’arrière-plan linear-gradient et radial gradient permettent de réaliser des trames complexes sans recourir à des images. Notre but est ici de créer un simple tissu à carreaux vichy.
Comme dit ci-dessus, tout va être réalisé à l’aide des propriétés de background-image, ici linear gradiant. Un tissu vichy est composé d’un tissu blanc sur lequel se croisent à angle droit des rayures rouges. Nous aurons donc trois composants pour l’arrière plan : un fond blanc, un linear-gradiant horizontal rouge semi-transparent et le même orienté à 90 degrés.
Pour l’affichage, le code HTML est simpliste :un élément auquel va être appliquée l’image d’arrière plan.
<DIV class=vichy></div>
Le code CSS commence par définir les propriétés génériques de l’élément. Ici :
DIV.vichy {
width:200px;
height:200px;
border: 5px solid grey;
border-radius:105px;
}
Nous définissons la couleur de fond et fixons la largeur de l’élément unitaire de fond à 50 x 50 pixels :
DIV.vichy {
…
background-color:white;
background-size:50px 50px;
}
Puis nous définissons un dégradé linéaire de rouge semi-transparent sur 25px et transparent sur le reste…
DIV.vichy {
…
background-image: linear-gradient(rgba(200,0,0,.5) 25 px, transparent 25px);
}
… et enfin le même dégradé linéaire orienté à 90°.
DIV.vichy {
…
, linear-gradient(90 deg, rgba(200,0,0,.5) 25px, transparent 25px);
}
La copie d’écran suivante montre le résultat obtenu à chaque étape.
|
|---|