Card con animazione liquida in CSS.

Oggi ho realizzato una card in CSS, utilizzando un tipo di animazione che che definisco “liquida” per via di una serie di accortezze che aumentano la percezione di morbidezza e organicità.

L’esempio è stato realizzato semplicemente utilizzando 2 layers diversi (blu e giallo) con un border-radius irregolare, ovvero con quantità di raggio diverse per lato destro o sinistro.

border-radius: 44%/45%;

In questo modo la figura di partenza, ovvero un quadrato, avrà delle sembianze irregolari tendenti sempre di piu al cerchio, che ha border-radius 50%.

Vedere il codice d’esempio per i dettagli implementativi.