Iniziamo una nuova Rubrica interamente dedicata alle regole di CSS, grazie alle quali potremo formattare e modellare a piacimento elementi HTML e creare effetti ed animazioni personalizzate inserendole in pagine Web e siti Internet.
In questa lezione vedremo infatti come creare un wallet o porta tessere utilizzando CSS, inserendo inoltre un "effetto tasca" per simulare la tridimensionalità dell'oggetto.
Vedremo infine come creare una piccola animazione, sempre utilizzando CSS, in modo da ottenere un oggetto digitale ancor più realistico.
Il risultato atteso è il seguente:
Ora vediamo passo a passo come fare per realizzare questo elemento su misura utilizzando solamente codice CSS.
Strutturiamo la pagina
Per prima cosa apriamo il code editor che preferiamo, in una scorsa guida ho parlato dei benefici di Brackets, per tale motivo continuerò ad utilizzarlo anche per questo tutorial.
Creiamo un nuovo documento di tipo HTML e generiamo la struttura di base della pagina.
Se decidessi di utilizzare Brackets, ti consiglio di installare l'estensione chiamata Emmet in quanto grazie a questo componente è possibile accorciare il tempo di lavoro con semplici scorciatoie da tastiera. In questo caso potremo precompilare la struttura di una pagina Web usando ! + tasto tab.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Creare un wallet con effetto tasche e animazione in CSS</title>
</head>
<body>
</body>
</html>Creata la struttura HTML della pagina passiamo al contenitore principale:
<body>
<main></main>
</body>Aggiungiamo le prime regole di codice che definiamo all'interno del tag <style></style>:
<style>
body {
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
margin: 0px;
}
</style>Diamo ora le disposizioni al body in modo da non avere i margini di default e centrare il contenuto che sarà presente all'interno, ovvero l'elemento <main></main>. Definiamo quindi anche l'elemento <main></main>, impostando la dimensione, il colore e arrotondando gli angoli.
main {
position: relative;
background-color: saddlebrown;
border-radius: 15px;
height: 220px;
width: 450px;
}Il risultato provvisorio è il seguente:
Creiamo le carte di pagamento
Fatto ciò proseguiamo, e creiamo il primo elemento interno che conterrà la prima carta di pagamento ed anche la prima sfumatura che darà forma all'effetto taglio.
<body>
<main>
<div class="container-1">
<div class="shadow"></div>
<div class="card-1"></div>
</div>
</main>
</body>Diamo ad ognuno di questi nuovi elementi una forma ed un design all'interno del tag <style></style>:
.shadow{
height: 5px;
width: 96%;
background: linear-gradient(to bottom, #111, #444, #111, #444, #111);
filter: blur(6px);
position: absolute;
top: 0px;
left:2%;
z-index: 3;
}
.container-1 {
background-color: inherit;
align-items: center;
justify-items: center;
width: 100%;
height: 80px;
position: relative;
}
.card-1{
width: 90%;
background-color: silver;
height: 30px;
position: absolute;
left: 5%;
top:-30px;
z-index: 1;
border-radius: 10px 10px 0px 0px;
}Analizzando quanto fatto notiamo che il nostro elemento si trova a ridosso del contenitore <main> </main> e l'effetto ombra non si evince molto bene in quanto rimane a filo dell'estremità superiore, per questo motivo aggiungiamo un padding-top al contenitore <main> </main> così da migliorare il risultato.
main {
padding: 20px 0px 0px 0px;
width: 450px;
height: 200px;
position: relative;
background-color: saddlebrown;
border-radius: 15px;
}
Grazie alla creazione di una sfumatura e di una leggera sfocatura applicata all'elemento .shadow abbiamo dato forma all'effetto tasca, simulando l'inserimento della carta di pagamento all'interno del wallet.
Una cosa molto importante è assegnare all'elemento .shadow una proprietà z-index maggiore rispetto agli altri elementi del suo gruppo, nel nostro caso diamo un valore di 3.
Grazie alla proprietà z-index è infatti possibile definire l'ordine a livello di posizione e nel nostro caso per ottenere l'effetto desiderato occorre avere l'ombra in sovraimpressione rispetto agli altri oggetti.
Ora non resta che inserire altre carte di pagamento duplicando gli elementi e ripetendo l'operazione. Creiamo quindi i nuovi oggetti.
<body>
<main>
<div class="container-1">
<div class="shadow"></div>
<div class="card-1"></div>
</div>
<div class="container-2">
<div class="shadow"></div>
<div class="card-2"></div>
</div>
<div class="container-3">
<div class="shadow"></div>
<div class="card-3"></div>
</div>
</main>
</body>Assegniamo poi lo stile ed evolviamo il nostro macro elemento.
.container-2 {
background-color: inherit;
align-items: center;
justify-items: center;
width: 100%;
height: 80px;
position: relative;
}
.card-2{
width: 90%;
background-color: gold;
height: 30px
position: absolute;
left: 5%;
top:-30px;
z-index: 1;
border-radius: 10px 10px 0px 0px;
}
.container-3 {
align-items: center;
justify-items: center;
width: 100%;
height: 80px;
position: relative;
}
.card-3{
width: 90%;
background-color: silver;
height: 30px;
position: absolute;
left: 5%;
top:-30px;
z-index: 1;
border-radius: 10px 10px 0px 0px;
}
Inseriamo delle banconote
Proseguiamo aggiungendo delle banconote all'interno del nostro wallet in modo da aumentare l'effetto del risultato finale, cerchiamo dunque l'immagine di una banconota e la tagliamo alla base per appoggiarla perfettamente sopra il nostro wallet.
Ora creiamo un nuovo elemento interamente dedicato alla banconota e incorporiamo l'immagine.
<div id="cash1"> <img src="money.png" alt="Money here"> </div>Successivamente assegniamo le regole di stile adatte ad inserire l'elemento nel modo migliore.
#cash1{
width: 80%;
height: 120px;
position: absolute;
top: -120px;
left: 10%;
display: grid;
justify-items: center;
align-items: end;
}
#cash1 img{
width: 100%;
height: auto;
}
Ora aggiungiamo una seconda banconota per aumentare ancora di più l'effetto del risultato finale
<div id="cash2"> <img src="money.png" alt="Money here"> </div>Ed anche a questa assegniamo uno stile.
#cash2 {
width: 75%;
height: 110px;
position: absolute;
top: -100px;
left: 20%;
display: grid;
justify-items: center;
align-items: end;
}
#cash2 img{
width: 100%;
height: auto;
}
A questo punto miglioriamo ulteriormente il risultato creando un'animazione che simulerà l'uscita delle banconote dal wallet.
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}Aggiungiamo le due regole .animated e .slideInUp all'elemento #cash1 e ricaricando la pagina otterremo il risultato dell'animazione.
Assegniamo le stesse classi anche alla seconda banconota alla quale assegniamo inoltre anche un piccolo delay:
.animation_delay {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
<div id="cash2" class="animated slideInUp animation_delay"> <img src="money.png" alt="Money here"> </div>
Ora non rimane che aggiungere i dettagli di stile che preferiamo al nostro wallet ed il gioco è fatto.
<div id="logo"> </div>
#logo{
width: 30px;
height: 30px;
background-color: lightgoldenrodyellow;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -15px;
z-index: 3;
border-radius: 100%;
}