Les motifs CSS3

La galerie de motifs CSS3 de Lea Verou a fait le tour du web. Lea explique ici dans le détail comment ces motifs sont créés, avec la technique des dégradés.

Par

Peut-être avez-vous déjà visité ma galerie de motifs CSS3. Elle a connu une certaine popularité cette année et elle a montré à de nombreux développeurs web la puissance des dégradés css. Mais combien comprennent réellement comment ces motifs sont créés ? Le principal avantage des backgrounds générés en CSS est qu'ils peuvent être modifiés directement dans la feuille de style. Cet avantage se révèle nul si l'on se contente de copier-coller un code qu'on ne comprend pas et nous pourrions tout aussi bien utiliser un lien URI.

Remarque importante

Dans les exemples qui suivent, j'utiliserai les dégradés sans préfixe vendeur, pour la lisibilité et la brièveté. Cependant, il faudra garder à l'esprit que tous ces préfixes doivent être utilisés (-moz-, -ms-, -o-, -webkit- ) car aucun navigateur ne les met en oeuvre à ce jour (1) sans préfixe. Si vous préférez, vous pouvez utiliser -prefix-free et avoir le préfixe vendeur attaché en cours d'exploitation, seulement lorsque nécessaire.

La syntaxe décrite ici est celle qui est acceptée aujourd'hui par les navigateurs. La spécification a changé depuis, mais aucun navigateur n'a mis en oeuvre les changements. Si vous êtes intéressés par ce qui va advenir, je vous suggère de jeter un coup d'oeil à la version de développement du spec.

Si les dégradés CSS ne vous sont pas encore familiers, vous pouvez lire ces tutoriels excellent de John Allsopp (en anglais) et revenir ici ensuite. (NdT : pour un tutoriel en français, voir cet exemple). Je pars du principe que vous connaissez déjà les bases des dégradés CSS :

L'idée principale

Je suis sûre que vous voyez très bien l'image d'arrière-plan que ce code génère :

background: linear-gradient(left, white 20%, #8b0 80%);

c'est un simple dégradé d'une couleur à l'autre, qui ressemble à cela :

dégradé simple

Comme vous le savez, dans ce cas les premiers 20% de la largeur du conteneur sont blanc et les derniers 20% sont vert. les 60% restant forment un dégradé d'une couleur à l'autre. Rapprochons maintenant ces deux couleurs :

background: linear-gradient(left, white 30%, #8b0 70%);

dégradé simple qui se réduit

background: linear-gradient(left, white 40%, #8b0 60%);

le dégradé se réduit encore

background: linear-gradient(left, white 50%, #8b0 50%);

le dégradé a disparu, il ne reste plus que les deux couleurs entières

Remarquez comment le dégradé se réduit petit à petit et les couleurs solides prennent plus de place jusqu'à éliminer totalement le dégradé dans le dernier exemple. Nous pouvons ajuster la position des stops de ces deux couleurs pour contrôler l'endroit où chaque couleur change abruptement.

background: linear-gradient(left, white 30%, #8b0 30%);

deux couleurs, répartition 1

background: linear-gradient(left, white 90%, #8b0 90%);

deux couleurs, répartition 2

Ce que vous pouvez retenir de ces exemples c'est que lorsque deux stops couleurs sont à la même position, il n'y a pas de dégradé. Même sans approfondir, cette astuce est utile pour certains cas d'usage, comme les fausses colonnes, ou bien l'effet que j'ai essayé de réaliser sur ma page d'accueil, ou sur la page de -prefix-free, où le background n'est montré que d'un côté, et caché de l'autre :

Header du site de Lea Verou, sur la gauche un effet avec dégradés. Il faut cliquer sur le lien pour voir cet effet en action lorsqu'on modifie la largeur de la page


Combinons cette idée avec le background-size

Nous pouvons faire des merveilles cependant, si nous combinons ce qui précède avec la propriété background-size :

background: linear-gradient(left, white 50%, #8b0 50%);
background-size: 100px 100px;

rayures verticales

Et voilà ! Nous venons de créer le plus simple des motifs : des rayures (verticales). Nous pouvons supprimer le premier paramètre (left) ou le remplacer par top et nous aurons des rayures horizontales. Mais avouons-le : horizontales ou verticales, les rayures sont ennuyeuses. La plupart des backgrounds rayés que l'on voit sur le web sont en diagonale, voyons comment faire.

Essayons de changer l'angle du dégradé à 45deg.

background: linear-gradient(45deg, white 50%, #8b0 50%);
background-size: 100px 100px;

Le résultat est plutôt moche :

tentative de rayures diagonales

Avant de poursuivre votre lecture, prenez une seconde pour vous interroger sur ce résultat. Avez-vous trouvé la raison ?

La voici : l'angle du dégradé fait tourner le dégradé à l'intérieur de chaque carreau, il ne fait pas tourner le background dans son ensemble. En fait, chaque rayure doit être incluse deux fois, comme cela :

jolies rayures diagonales, celles qui sont sur le site de Lea Verou

Essayons de créer cet effet avec les dégradés CSS. En gros, c'est ce que nous avons fait précédemment, mais avec plus de stops couleurs :

background: linear-gradient(45deg, white 25%,
    #8b0 25%, #8b0 50%, 
    white 50%, white 75%, 
    #8b0 75%);
background-size: 100px 100px;

jolies rayures diagonales

Et voilà nos rayures ! Pour se rappeler l'ordre des couleurs et pourcentages, il suffit de se dire qu'il y en a toujours deux identiques à la suite, excepté la première et la dernière couleur.

Note : Firefox pour Mac a besoin d'un stop couleur supplémentaire de 100% à la fin de tout motif contenant plus de deux stops, comme ceci : ..., white 75%, #8b0 75%, #8b0); Ce bug a été repéré en février 2011 et vous pouvez suivre son évolution sur bugzilla. (NdT : Bug réparé début décembre 2013 !)

Mais CSS3 nous offre une autre manière de déclarer ces backgrounds, qui non seulement résout le problème mais aussi raccourcit notre code :

background: repeating-linear-gradient(60deg, white, white 35px, #8b0 35px, #8b0 70px);
min-height: 100%;

jolies rayures diagonales, identique au précédent

Dans ce cas, la taille doit être déclarée dans les positions des stops couleurs au lieu de background-size , puisque le dégradé est supposé couvrir le contenant entier. Remarquez que la taille déclarée est différente de celle spécifiée précédemment. En effet, la taille des rayures est mesurée différemment : dans le premier exemple, nous spécifions les dimensions du carreau, dans le second, la largeur des rayures (35px), qui est mesurée diagonalement.

Backgrounds multiples

Avec un dégradé unique, vous pouvez créer des rayures et c'est à peu près tout. Il y a quelques autres motifs que vous pouvez créer avec un seul dégradé (linéaire ou radial), mais ils sont plus ou moins ennuyeux et laids. Presque tous les motifs dans ma galerie contiennent plusieurs backgrounds différents. Par exemple, créons un motif à pois :

background: radial-gradient(circle, white 10%, transparent 10%), radial-gradient(circle, white 10%, black 10%) 50px 50px;
background-size: 100px 100px;

motif à pois blancs sur fond noir

Notez bien que les deux dégradés donnent à peu près la même image, mais positionnée différemment pour créer l'effet à pois (polka dot). La seule différence entre eux est que le premier est transparent au lieu de black. Si ce n'était pas le cas, cela serait effectivement à un seul dégradé, avec le premier (celui du dessus) qui obscurcirait tout ce qui est en-dessous.

Il y a un problème avec ce background. Savez-vous lequel ?

Ce background est parfait pour les navigateurs qui supportent les dégradés CSS, mais pour les autres il sera transparent puisque la déclaration sera entièrement ignorée. Nous avons deux manières de fournir une solution de rechange (fallback), chacune pour des cas d'utilisation différents. Soit on déclare un autre background avant le dégradé :

background: black;
background: radial-gradient(circle, white 10%, transparent 10%), radial-gradient(circle, white 10%, black 10%) 50px 50px;
background-size: 100px 100px;

Soit on déclare chaque propriété de background séparément :

background-color: black;
background-image: radial-gradient(circle, white 10%, transparent 10%), radial-gradient(circle, white 10%, transparent 10%);
background-size: 100px 100px;
background-position: 0 0, 50px 50px;

Dans ce dernier exemple, vous aurez remarqué un autre changement dans notre code : nous avons modifié le deuxième dégradé qui a une région transparente comme la première. De cette façon, background-color sert à deux choses : il fixe à la fois la couleur du fallback et la couleur du motif à pois, ce qui fait que nous pouvons le modifier en une seule fois. Il faut toujours tendre vers un code modifiable le plus simplement possible. On pense souvent que tel ou tel aspect ne sera pas changé mais, presque toujours, on a tort.

Nous pouvons appliquer exactement la même technique aux dégradés linéaires, pour créer un motif en damier à partir de triangles rectangles :

background-color: white;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%);
background-size: 100px 100px;
background-position: 0 0, 50px 50px;

motif en damier


Utiliser les bonnes unités

N'utilisez pas les pixels pour les tailles sans peser le pour et le contre. Dans certains cas, les em sont plus appropriés. Par exemple, si vous voulez réaliser un background de papier à lignes, vous voudrez que les lignes suivent effectivement le texte. Si vous utilisez des pixels, vous devrez changer la taille à chaque fois que vous modifierez votre font-size. Si vous utilisez des em dans votre background, il suivra naturellement le texte et vous n'aurez à l'adapter que si vous changez votre line-height.

Est-ce possible ?

Les formes qui peuvent être réalisées avec un seul dégradé sont :

  • les rayures
  • les triangles rectangles
  • les cercles et ellipses
  • les demis cercles et autres formes obtenues en découpant des ellipses horizontalement ou verticalement.

Vous pouvez les combiner pour créer des carrés et des rectangles (à partir de deux triangles rectangles), des losanges et autres parallélogrammes (quatre triangles rectangles), des courbes à partir d'ellipses, et bien d'autres formes.

Ce n'est pas parce que vous le pouvez que vous le devez

Techniquement, on peut tout faire à partir de ces techniques. Cependant, tous les motifs ne doivent pas être réalisés ainsi. Les principaux avantages de cette technique sont :

  • pas de requêtes http supplémentaires
  • concision du code
  • code lisible par des humains (contrairement à des URI) qui peut être modifié sans quitter le fichier CSS

Pour les motifs complexes qui font appel à un grand nombre de dégradés, il vaut certainement mieux utiliser des SVG ou des images bitmap, car cette complexité va à l'encontre de tous les avantages de cette technique :

  • Ils ne sont pas plus courts
  • ils ne sont pas vraiment compréhensibles, et les modifier demande plus d'effort que l'utilisation d'un éditeur d'image.

J'ai inclu quelques motifs très complexes dans ma galerie, parce que je pense que même s'ils ne devraient pas être utilisés en production (sauf dans des conditions très exceptionnelles), comprendre leur fonctionnement et leur codification aide à comprendre plus profondément cette technique.

Une autre règle générale est que si votre motif a besoin de formes pour obscurcir tout ou partie d'autres formes, comme dans le motif en étoile ou le motif yin yang, alors vous ne devriez sans doute pas utiliser cette technique. Dans ces motifs, tout changement de background color vous obligera à modifier la couleur de ces motifs, ce qui sera long et ennuyeux.

Si un motif n'est pas réalisable avec un CSS raisonnable, cela ne signifie pas que vous devrez vous résoudre à utiliser une image bitmap. SVG est une excellente alternative, bien supportée par les navigateurs modernes.

Compatibilité navigateurs

Les dégradés CSS sont compatibles avec Firefox 3.6+, Chrome 10+, Safari 5.1+, Opera 11.60+ (dégradés linéaires à partir de la version 11.10), IE10. Les dégradés sont compatibles avec les versions Webkit plus anciennes (dont la plupart des navigateurs pour mobiles) en utilisant -webkit-gradient(), si vous en avez vraiment besoin.

Épilogue

J'espère que vous trouverez un intérêt pour ces techniques dans vos propres designs. Si vous inventez un motif très différent de ceux inclus dans la galerie, en particulier s'ils démontrent une nouvelle technique, n'hésitez pas à ajouter une requête au repo github de la galerie de motifs. Et je suis toujours fascinée de voir ces techniques mises en pratique, alors si vous avez réalisé quelque chose de cool avec les motifs CSS, faites-le moi savoir !

Bonnes vacances !


(1) NdT : Pour savoir où en est la compatibilité des navigateurs, le mieux est de se rendre sur le site Can I Use, toujours à jour. Pour les dégradés CSS, cliquer ici.
Et pour vous épargner les maux de tête, le mieux est d'utiliser Autoprefixer, qui fera le travail pour vous (vous pouvez lire l'article sur Autoprefixer ici-même).
(Retour à l'article)


Intéressé par CSS ? Sur la Cascade, retrouvez des articles et ressources.

Autres articles sur les dégradés dans la Cascade


Autres ressources en Français :

Mettre un motif en fond de page du site - The Rapid Page
Mettre un fond en CSS à l'aide des patterns - Paperblog
Arrière-plans avec CSS3 Backgrounds - Alsacreations
Les dégradés CSS (en français), par Chris Coyier.


original paru le dans 24 Ways.

Sur l'auteur : est développeur web principal et designer chez Fresset Ltd, qu'elle a co-fondé en 2008. Elle a une passion de longue date pour les standards de l'open web, en particulier CSS et JavaScript. Elle aime chercher de nouvelles manières de les utiliser et partage ses découvertes sur son blog, lea.verou.me. Elle intervient dans les principales conférences de développement web et écrit pour de nombreuses publications spécialisées. Lea a co-organisé l'unité de cours de développement web à l'université d'économie et de business d'Athènes. Vous pouvez la suivre sur Twitter.

Traduit avec l'aimable permission de 24 Ways et de l'auteur.
Copyright 24 Ways © 2011.