Vai al contenuto

Blob animato con funzione blur() e mix-blend-mode.

Scritto da:

carlopeluso

Oggi ho realizzato un’idea per una landing page, puramente immaginata. Tralasciando la composizione artistica, la scelta dei colori e del font, mi vorrei concentrare sulle potenzialità di due funzionalità importanti in CSS:

  • blur(), funzione che permette di sfocare il contenuto, utilizzabile all’interno della proprietà filter.
  • mix-blend-mode, proprietà che consente di specificare in che modo due contenuti sono miscelati. Chi ha familiarità con software di grafica come Illustrator, Photoshop ed altri, ha gia incontrato il termine blend mode, che viene utilizzato in contesti diversi ma con la stessa finalità (miscela di due layer sovrapposti).

Dalla documentazione ufficiale di blend-mode, leggiamo i seguenti valori possibili:

normal This is default. Sets the blending mode to normal
multiply Sets the blending mode to multiply
screen Sets the blending mode to screen
overlay Sets the blending mode to overlay
darken Sets the blending mode to darken
lighten Sets the blending mode to lighten
color-dodge Sets the blending mode to color-dodge
color-burn Sets the blending mode to color-burn
difference Sets the blending mode to difference
exclusion Sets the blending mode to exclusion
hue Sets the blending mode to hue
saturation Sets the blending mode to saturation
color Sets the blending mode to color
luminosity Sets the blending mode to luminosity

Nel caso di sopra ho utilizzato blend-mode: difference, che opera in modo molto interessante, ma anche imprevedibile, poiche miscela i colori dei layer “quasi” in maniera opposta. Provate a “giocare” modificando i colori di entrambi i layer e avrete un effetto veramente sorprendente.

Articolo precedente

Realizzare un grafico Gantt senza Javascript.

Articolo successivo

Parametric CSS, animazioni e forme generate.

Unisciti alla discussione

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *