Termes CSS clés employés : linear-gradient.
Compatibilité navigateurs : IE10+, Firefix22.0+, Chrome28.0+, Safari5.1+ avec préfixe, Opera16+.
Si vous avez bien compris l’exemple précédent, nous allons passer à un tissu bien plus complexe, un tartan vert. Nous retrouvons le principe de rayures croisées, mais celles-ci sont de largeur différentes. En outre, des rayures diagonales doivent accentuer le réalisme du tissu.
C’est encore la propriété linear gradient de background-image qui va être employée. Compte-tenu de la complexité accrue du motif, nous allons employer un fond élémentaire de plus grande taille. Nous aurons ici quatre composants pour l’arrière plan : un fond vert, un linear-gradient horizontal semi-transparent, le même orienté à 90 degrés, puis un dernier dégradé orienté à 125 degrés.
Le code HTML se limite ici aussi à l’élément auquel va être appliquée l’image d’arrière plan.
<DIV class=tartan></div>
Nous gardons dans le code CSS pratiquement le même élément, carré cette fois pour changer, avec ses propriétés génériques :
DIV.tartan {
width:200px;
height:200px;
border: 5px solid grey;
}
Le motif étant plus complexe, nous allons retenir ici une base carrée de 100 pixels de côté. Le fond sera vert.
DIV.tartan {
…
background-color: rgb(0,100,0);
background-size:100px 100px;
}
Pour définir le motif, il faut bien comprendre sa structure. Un tartan se compose de façon unitaire d’une moitié sombre et d’une moitié claire. Deux paires de fines rayures, sombres dans la partie claire et claires dans la partie sombre, délimitent une surface de largeur sensiblement égale à celle des moitiés. Nous allons employer la teinte de base pour le sombre et un blanc transparent pour le clair.
Pour rendre plus « portable » le motif, il va être exprimé en pourcentages et non en pixels. Commençons par les bandes alternées foncées et claires, occupant chacune 50% de la surface totale :
DIV.tartan {
…
background-image: linear-gradient(transparent, transparent 50%, rgba(255,255,255,.2) 51%, rgba(255,255,255,.2))
}
Nous ajoutons ensuite les fines rayures, larges de 2% et espacées de 3%, débutant à 13% de chaque bande :
DIV.tartan {
…
background-image: linear-gradient(transparent, transparent 12%, rgba(255,255,255,.4) 13%, transparent 15%, transparent 17%, rgba(255,255,255,.4) 18%, transparent 20%, transparent 50%,
rgba(255,255,255,.2) 51%, rgba(255,255,255,.2) 62%,transparent 63%, rgba(0,0,0,.4) 64%, rgba(255,255,255,.2) 65%, rgba(255,255,255,.2) 67%, rgba(0,0,0,.4) 68%, rgba(0,0,0,.4) 69%, rgba(255,255,255,.2) 70%, rgba(255,255,255,.2))
}
Pour obtenir le motif perpendiculaire, il suffit de répéter ce motif en le faisant pivoter de 90 degrés :
DIV.tartan {
…
background-image: linear-gradient(transparent, transparent 12%, rgba(255,255,255,.4) 13%, transparent 15%, transparent 17%, rgba(255,255,255,.4) 18%, transparent 20%, transparent 50%,
rgba(255,255,255,.2) 51%, rgba(255,255,255,.2) 62%,transparent 63%, rgba(0,0,0,.4) 64%, rgba(255,255,255,.2) 65%, rgba(255,255,255,.2) 67%, rgba(0,0,0,.4) 68%, rgba(0,0,0,.4) 69%, rgba(255,255,255,.2) 70%, rgba(255,255,255,.2))
, linear-gradient(90deg, transparent, transparent 12%, rgba(255,255,255,.4) 13%, transparent 15%, transparent 17%, rgba(255,255,255,.4) 18%, transparent 20%, transparent 50%,
rgba(255,255,255,.2) 51%, rgba(255,255,255,.2) 62%,transparent 63%, rgba(0,0,0,.4) 64%, rgba(255,255,255,.2) 65%, rgba(255,255,255,.2) 67%, rgba(0,0,0,.4) 68%, rgba(0,0,0,.4) 69%, rgba(255,255,255,.2) 70%, rgba(255,255,255,.2))
}
Enfin, il faut ajouter les fines rayures obliques. Elles sont définies en pixels et déclarées à l’aide de repeating-linear-gradient de façon à être automatiquement répétées :
DIV.tissus4 {
…
…, repeating-linear-gradient(125deg, transparent, transparent 1px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);
}
Vous voyez ci-dessous le résultat obtenu à chaque étape.
Nous avons créé ici un tartan fondé sur des déclinaisons de vert, plutôt homogène, mais si vous avez compris le principe de construction vous pouvez concevoir n’importe quel tissu écossais, avec n’importe quel motif et n’importe quelles couleurs… même les plus improbables…
|
|---|