Backgrounds Pop-Art avec SVG et Blend Modes

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”.

Par

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, 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 :

//CSS
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 :

//CSS
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 avancer avec vos propres idées. Il y a bien d’autres possibilités de designs de ce genre, nous les verrons dans de futurs articles.


Intéressé par SVG ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur SVG parus dans la Cascade.

Tous les articles sur Blend Modes parus dans la Cascade.


Du même auteur dans La Cascade :

Image révélée au grattage avec SVG et CSS Blend Modes
Créer de superbes diagrammes avec SVG et CSS Blend Modes
Backgrounds Pop-Art avec SVG et CSS Blend Modes
Motifs SVG japonais
Contraste de texte automatique avec CSS Blend Modes
Backgrounds SVG, les rayures
Diagonales et motifs SVG en background
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, the new code.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.