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

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:

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.