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.