La Cascade

Rechercher

Backgrounds Pop-Art avec SVG et Blend Modes

par Dudley Storey, 19 juillet 2015, svg, design, article original paru le 19 juillet 2015 dans the new code

Dudley Storey nous a appris à dessiner avec SVG. Ces lignes peuvent devenir complexes, on peut les mélanger à des images via Blend Modes pour créer des backgrounds “pop art


Dans un précédent article, j’ai présenté l’utilisation de SVG dans des backgrounds “carrelés”. Ces simples lignes et rayures peuvent devenir des formes complexes, et on peut les mélanger à des images bitmap via CSS Blend Modes pour créer des backgrounds “pop art”. Ces techniques permettent de créer des effets visuels plus riches avec un code plus simple et plus de flexibilité que mon essai précédent qui faisait appel aux dégradés CSS.

Motif en échiquier

Pour créer un échiquier avec SVG, il suffit d’utiliser deux éléments carrés disposés diagonalement :

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <g fill="#ccc">
    <rect width="25" height="25" />
    <rect x="25" y="25" width="25" height="25" />
  </g>
</svg>

Ce qui produit :


Appliqué par-dessus une image bitmap :
section#grid {
  background-image: url(checkerboard.svg), url(grace-kelly.jpg);
  background-size: 100px 100px, cover;
  background-blend-mode: overlay;
}

Cela nous donne ce bel effet :

L’image bitmap est dimensionnée pour couvrir la surface de l’élément. Le motif en échiquier se répète tous les 100px à la fois horizontalement et verticalement. Mais plutôt que de recouvrir l’image, il se mélange avec elle dans le mode overlay ( NdT : en fait ici dans le mode multiply qui est plus doux.)

Motif à pois

La même idée peut être utilisée pour recouvrir une image d’un motif à pois, à l’aide de cinq cercles SVG : un au centre exact de la viewbox et les quatre autres ayant leur centre à chaque coin.

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<style type="text/css">
  circle { fill: #f99; }
</style>
<circle cx="0" cy="0" r="100"/>
<circle cx="300" cy="0" r="100"/>
<circle cx="0" cy="300" r="100" />
<circle cx="300" cy="300" r="100"/>
<circle cx="150" cy="150" r="100"/></svg>

Ce qui crée ce pattern :

On sauvegarde ce code comme circle-grid.svg et on applique le SVG sur l’image bitmap dans le background de l’élément :

section#circles {
  background-image: url(kelly-brook-as-gilda.jpg), url(circle-grid.svg);
  background-size: cover, 100px 100px;
  background-blend-mode: multiply;
  }

Conclusion

J’espère que cela vous a donné une idée de la façon dont vous pouvez mettre en œuvre vos propres idées. Il y a bien d’autres possibilités de designs de ce genre, nous les verrons dans de futurs articles.

Voir la liste des articles de Dudley Storey traduits dans La Cascade.
article original paru le 19 juillet 2015 dans the new code
Traduit avec l'aimable autorisation de the new code et de Dudley Storey.
Copyright the new code © 2015