Shape blobbing en CSS

Le shape blobbing c'est cet effet d'aspiration d'une goutte par une autre, réalisable en CSS à partir de filtres pour le flou et le contraste. Tutoriel clair de Chris Coyier.

Par

Nous avons vu récemment le morphing en SVG, c’est à dire une forme qui se mue en une autre. Aujourd’hui, nous allons voir des formes qui se phagocytent entre elles ! C’est le shape bobbling, vous savez, cet effet d’aspiration qu’on peut voir par exemple dans cette vidéo de gouttes de mercure ou, à l’inverse, dans les images de division cellulaire.

une goutte de mercure en aspire une autre

Je ne sais pas qui a découvert le premier que cet effet était réalisable sur le web, mais la première démo que j’en aie jamais vu était de Lucas Bebber :

See the Pen Gooey Pagination by Lucas Bebber (@lbebber) on CodePen.

Puis celle-ci, de Felix Hornoiu (GIF ralenti pour mieux observer l’effet) :

deux cercles fusionnent
Démo [visible ici](http://codepen.io/chriscoyier/pen/lIBAg?editors=110).

Une astuce simple, à partir de filtres pour le flou et le contraste

Le flou rend l’élément... flou, et le contraste lutte contre le flou. Si vous contrastez suffisamment, votre forme retrouve (à peu près) ses contours :

tableau flou (en x) et contraste (en y)

Là où ça devient intéressant, c’est que lorsque deux éléments floutés (mais forcés à ne pas apparaître comme tels) s’approchent l’un de l’autre, leurs flous “potentiels” créent suffisamment de contraste couleur “potentiel” pour que l’on ait l’impression que les formes se connectent et se mélangent.

image
Démo [visible ici](http://codepen.io/chriscoyier/pen/lIBAg?editors=110).

Je trouve qu’il est plus aisé de faire fonctionner l’effet en floutant la forme, mais en ajoutant le contraste sur le contexte, c’est à dire sur le container de l’effet (ci-dessous .stage).

//CSS
.stage {
  /* doit être explicite, pour que le contraste fonctionne */
  background: white;

  /* des trucs bizarres arrivent au contact des bords, cachez éventuellement l’overflow */
  padding: 30px;

  -webkit-filter: contrast(20);
  filter: contrast(20);
}
.dot {
  border-radius: 50%;
  width: 50px;
  height: 50px;

  /* doit être une couleur très contrastante, p.ex. gris clair sur blanc ne marchera pas */
  background: black;

  -webkit-filter: blur(15px);
  filter: blur(15px);
}

Et ça devient vraiment drôle quand on ajoute une animation pour déclencher la danse des phagocytes. Voici une démo dans laquelle vous pouvez jouer avec les valeurs de flou, de contraste et de luminosité (cette dernière a un effet sur le flou) :

See the Pen Blobbing Playground by Chris Coyier (@chriscoyier) on CodePen.

Compatibilité navigateurs

Aujourd’hui, à peu près tout le monde, WebKit/Blink, Firefox à partir de FF35, donc : Chrome / Safari / Opera / Firefox / iOS / Android. Pas mal. Le seul qui manque à l’appel est IE.

NdT : Pour voir une superbe application de cet effet, voyez l’effet Gooey de Lucas Bebber.


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


original paru le dans CSS-Tricks.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d’oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d’inspiration pour vos propres designs.

Traduit avec l’aimable permission de CSS-Tricks et de l’auteur.
Copyright CSS-Tricks © 2014.