Il problema principale nell'utilizzo delle card è la quantità di informazioni che possiamo inserire al loro interno: mai abbastanza.
Se osserviamo i vari template disponibili troviamo sempre delle rappresentazioni in cui il titolo è spesso Questo è un titolo e descrizioni Questa è una descrizione. Se per il titolo la lunghezza non è un problema, lo è di certo per la descrizione: è difficile ricapitolare, in poche parole, quello che la card rappresenta.
Possiamo però creare una trasformazione gestita interamente da CSS che, tramite un effetto ottico, farà sembrare la carta tridimensionale e ne mostrerà il lato B.
Il CSS di seguito, una volta settate le dimenioni e gli stili delle carte, ne imposta la proprietà backface-visibility a nascosta, in modo che l'elemento una volta girato non sia mostrato a video. Infine predispone una carta a faccia in su e una a faccia in giù. All'hover la prima carta ruoterà di 180, andando dunque a scomparire, la seconda ruoterà con un ritardo di 0.6s, dando appunto l'effetto di rotazione della carta.
<div class="flip-card"> <div class="flip-card-inner"> <div class="card flip-card-front"> <!-- Contenuto A --> </div> <div class="card flip-card-back"> <!-- Contenuto B --> </div> </div> </div>
.flip-card { background-color: transparent; width: 300px; height: 350px; perspective: 1000px; } .flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; } .flip-card-back { transform: rotateY(180deg); } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Introduzione ai web component HTML
Rendere i propri workflow e le GitHub Action utilizzate più sicure
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
Migliorare l'organizzazione delle risorse con Azure Policy
Ottimizzare le pull con Artifact Cache di Azure Container Registry
Utilizzare l nesting nativo dei CSS
Filtering sulle colonne in una QuickGrid di Blazor
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Creare una libreria CSS universale: Immagini
Utilizzare Container Queries nominali
Combinare Container Queries e Media Queries
Utilizzare il trigger SQL con le Azure Function