Vai al contenuto

Card con animazione liquida in CSS.

Scritto da:

carlopeluso

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.

Articolo precedente

Menu con shapes animate.

Articolo successivo

Realizzare un grafico a nodi con Less e SVG path

Unisciti alla discussione

Lascia un commento

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