Des hachures en full CSS pour les backgrounds de vos pages

stripes

De nos jours, les hachures sont assez faciles à faire en CSS3 avec la propriété gradients associés au background de la page.

On va référencer dans cet article, les différents cas possibles de hachure réalisable en CSS sans images ajoutées.

Hachure diagonale avec couleur unie

Des rayures diagonales sont faciles à mettre en place grâce à repeating-linear-gradient () :

Hachure diagonale avec couleur dégradée

Pour le dégradé on utilisera la propriété linear-gradient (), puis afin de rendre la moitié des bandes transparent on utilisera repeating-linear-gradient () et du coup avec l’effet de superposition on aura qu’un seul élément :

Hachure diagonale dégradée avec motif

Vous voulez mettre une texture image par-dessus les hachures, c’est possible de réaliser cela avec la technique de multiple background l’un couleur et l’autre image.

Hachure verticale

Pour les bandes verticales, il suffit d’utiliser simplement la propriété repeating-linear-gradient () :

Pour rendre compatible le repeat-linear gradient sur un grand nombre de navigateurs, vaut mieux utiliser les versions préfixer des propriétés CSS, il existe des outils tel que please qui fera le boulot à votre place.

Hachure radiale

On était habitué avec des hachures de type droit, mais on peut aussi utiliser les hachures de type radial avec la propriété CSS repeating-linear-gradients() :

Une réponse à “Des hachures en full CSS pour les backgrounds de vos pages”

  1. Eric

    belle explication !

    Répondre

Répondre