Realizzare forme senza consistenza in CSS

Avete presente le gocce di mercurio che si fondono insieme per crearne una più grossa? Ecco cosa succede quando si cerca di ricreare lo stesso effetto con il solo CSS.
Realizzare forme senza consistenza in CSS

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “Shape Blobbing in CSS” di Chris Coyier. Abbiamo reinterpretato lo shape morphing in SVG, in cui una forma si trasformava in un’altra. Un pò come l’effetto, che si vede in questo video, delle gocce di mercurio che si fondono l’una nell’altra.

La paternità

Non sono sicuro chi abbia scoperto questa tecnica. l’ho visto per la prima volta sul blog di Lucas Bebber:

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

Poi ancora da Felix Hornoiu:

See the Pen Bubble Trouble by Felix Hornoiu (@felixhornoiu) on CodePen.

Dai commenti al post viene segnalato che l’inventore di questa tecnica è un certo Bali Balo che ha pubblicato un pen sulle sue Metaballs, ecco la risposta a Chris:


Il trucco

Il trucco è abbastanza semplice, utilizzare un filtro per aggiungere all’elemento sia sfocatura che contrasto. Il filtro blur ovviamente rende l’elemento sfocato, il contrasto si contrappone al blur, preferendo cambiamenti netti nel colore. Se provi a contrastare abbastanza, otterrai una forma dai contorni netti e ben definiti.

blur-vs-contrast

La parte bizzarra sta nel fatto che quando due elementi sfocati si avvicinano, le loro sfocature creano sufficiente contrasto cromatico che fa sembrare le forme come connesse tra di loro.

blur-shape

Trovo più facile farlo funzionare se provi a sfocare le forme, aggiungendo contrasto a tutta la zona. Cosi:

.stage {
  /* must be explicit, for contrast to work */
  background: white;
  
  /* weirdness happens when edges hit, also consider hiding overflow */
  padding: 30px;
  
  -webkit-filter: contrast(20);
  filter: contrast(20);
}
.dot {
  border-radius: 50%;
  width: 50px;
  height: 50px;

  /* needs to be very contrasty color. E.g. light gray on white won't work */
  background: black;

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

Il vero divertimento arriva quando aggiungi un po di animation al tutto. Qui di seguito una demo con cui puoi giocare con i valori di sfocatura, contrasto e luminosità:

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

Browser Support

Non solo WebKit e Blink! Firefox 35 supporterà i filtri senza flag o altro. Aurora, la versione beta di Firefox, è alla versione 35 e funziona alla grande. Solo IE non supporta ancora i filtri.

Conclusioni

Non sembra essere molto pratico e funzionale!!! Vado a letto.

la mia demo mette a dura prova il mio processore e la ventola si fa sentire. L’altra demo con i due cerchi che si fondono l’uno nell’altro sembra andar bene, basta poco per sovraccaricare il tutto.

  • Gaetano Miccio

    Simpatico articolo sul cSS3

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github