Rayures et motifs en CSS3 avec gradient

2 mars 2011

Si vous êtes familier avec la propriété gradient de CSS3, vous arriverez facilement à créer toutes sortes de motifs (rayures, carreaux, etc) sur vos éléments HTML sans utiliser d’image ! C’est Lea Verou, une développeuse web grecque, qui nous partage son travail.

Comment ça marche ?

Par exemple, le gradient pour les rayures horizontales se fait de la manière suivante. On commence par créer un background avec une couleur de fond. Puis on ajoute la propriété background-image pour générer la rayure. Pourquoi utiliser background-color et background-image ? Pour plus de flexibilité ! Ici, la propriété CSS background-color a deux rôles :

  • faire office de background pour les rayures qui sont ajoutées ensuite avec background-image
  • proposer une solution de repli pour les navigateurs qui ne comprennent pas la propriété CS3 gradient
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

Par exemple, sur Internet Explorer 9 qui n’implémente pas la propriété CSS3 gradient, on obtiendra un bloc HTML avec un background uni, en l’occurence de couleur #0ae. Cela permet d’éviter d’avoir un bloc HTML avec un fond transparent. Cependant, avec le code précédent, vous obtiendrez le résultat suivant car le gradient occupera la totalité du conteneur :

Pour rectifier cela, il faut utiliser la propriété CSS3 background-size qui permet de spécifier la taille du contenu d’un background. La première valeur détermine la largeur horizontale, la deuxième la largeur verticale.

-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;

Ainsi, vous obtiendez le résultat suivant :

Vous l’aurez compris, il est possible de créer de nombreux motifs générés uniquement avec des propriétés CSS3. À votre tour de jouer !

Requis : Navigateur compatible CSS3
Démonstration : http://lea.verou.me/demos/css3-patterns.html
Licence : libre

Commentaires

  • Erabany

    Pas mal ! Très pratique pour mon portfolio HTML5 :D

  • rdomingue

    Faut faire grandement attention avec le background-size: 50px 50px; ca fait clairement laggé Firefox si la zone où c’est utilisé est trop grande et si le size est petit. Tout fonctionne très bien pour Chrome et IE mais Firefox ne le gère pas bien. Je l’ai expérimenté sur mon blogue http://beta.rdsign.net/code/ J’ai dù faire un hack pour ne pas l’avoir sur firefox sinon mes tutoriels et le navigateur au complet lagguait.

  • Katryne Chauvigne-Bourlaud

    Tout le monde cite leaverou.me, mais le domaine est à vendre, ya plus personne. Un autre lien peut-être ? Merci

    • Effectivement, le site a changé de nom de domaine. J’ai mis à jour l’article avec la nouvelle URL.

  • OKKKKK

    OK