In questa lezione vedremo come dare forma ad una finestra modale che conterrà al suo interno un codice sconto oltre alle altre informazioni che vogliamo siano presenti. L'obiettivo è imparare a creare un pop-up personalizzato attraverso le regole CSS, in maniera da poterlo inserire all'interno di pagine Web e fornire una migliore esperienza utente ai visitatori.
Le finestre modali sono usate per diversi obiettivi e soluzioni, permettono infatti di risparmiare spazio all'interno della pagina, migliorare le interazioni, aumentare il coinvolgimento o semplicemente di lanciare un messaggio specifico. Vediamo una rapida anteprima di quello che realizzeremo all'interno di questa guida:
Come creare un pop-up animato con CSS
Partendo da una semplice CTA (Call To Action) consentiremo di aprire una finestra pop-up oltre che permetterne con estrema facilità la chiusura. La nostra finestra modale sarà personalizzata per essere utilizzata come contenitore di un codice sconto, quindi adattabile ai siti e-commerce per la vendita online, ma ovviamente il contenuto del pop-up potrà essere variato in base alle specifiche esigenze di ogni Web designer.
La pagina HTML
Partiamo dalla creazione di un nuovo documento di tipo HTML ed impostiamo la struttura della pagina Web in modo corretto.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sviluppo di una finestra modale per codice sconto in CSS</title>
</head>
<body>
</body>
</html>Iniziamo quindi con la creazione della struttura fisica della nostra finestra e della CTA che avrà il compito di aprire il pop-up a seguito di un click che scatenerà l'animazione. Andiamo all'interno del <body></body> e creiamo il contenitore generale:
<div class="wrapper"></div>Al suo interno inseriamo un elemento <a> con all'interno il testo che useremo per avviare l'animazione (nel nostro caso facciamo riferimento al codice sconto) avendo cura di includere nella proprietà href un nome specifico che richiameremo per avviare apertura del pop-up.
<div class="wrapper">
<a href="#custom-modal">OTTIENI IL TUO CODICE SCONTO</a>
</div>
Il codice CSS
Passiamo alla definizione del codice CSS in modo da stilizzare quanto creato fino ad ora. Apriamo il tag <style></style>, richiamiamo tutti i primi elementi impostando il loro aspetto ed iniziamo a dare forma alla pagina HTML:
body{
margin: 0px;
}
.wrapper {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color:#222;
}
.wrapper a {
display: inline-block;
text-decoration: none;
padding: 25px 40px;
background-color: #fff;
border-radius: 100px;
text-transform: uppercase;
color: #111;
font-family: helvetica;
font-weight: bold;
font-size: 20px;
}
Abbiamo impostato un colore di sfondo, un allineamento generale centrato grazie alle proprietà display:flex;, align-items: center;, justify-content: center; e realizzato il pulsante che ha il compito di far partire l'animazione del pop-up.
Come avrai notato è stato assegnato un valore #custom-modal all'interno della proprietà href in quanto ci servirà per attivare l'apertura del pop-up in seguito.
Procediamo ora con la creazione del pop-up vero e proprio e scriviamo il seguente codice:
<div id="custom-modal" class="modal">
<div class="content-modal">
</div>
</div>Associamo un ID al contenitore esterno in modo da individuare facilmente l'elemento ed assegniamo inoltre una classe chiamata .modal che useremo per mostrare e/o nascondere la finestra.
Impostiamo ora l'aspetto del contenitore avendo cura di inserire all'interno delle proprietà anche visibility: hidden; e opacity: 0; che avranno il compito di mantenere nascosto il pop-up fino a che non sarà richiesta l'apertura.
.modal {
visibility: hidden;
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: #222;
transition: all .5s;
}Definiamo a questo punto le regole di switch ovvero le proprietà che dovranno essere attivate al click della CTA
.modal:target {
visibility: visible;
opacity: 1;
}
Bene, l'animazione inizia a prendere forma, ora dobbiamo proseguire con la creazione dello stile estetico della modale, quindi procediamo nel seguente modo o personalizzando a piacimento la finestra:
.content-modal {
border-radius: 4px;
position: relative;
width: 600px;
background: #fff;
padding: 80px 10px;
text-align: center;
font-family: helvetica;
border: 15px solid #111;
}
Ora che abbiamo creato la forma e definito l'aspetto della modale, possiamo provvedere all'inserimento di un elemento che consenta di chiudere il pop-up a seguito del click e di reimpostare i valori di partenza. Inseriamo perciò un nuovo elemento dedicato alla chiusura della modale al quale assegneremo la classe .close-modal che imposteremo appunto per rimuovere la finestra.
<a href="#" class="close-modal"><img src="icon-close.png"></a>
A questo punto non ci rimane che impostare il contenuto del pop-up inserendo il testo o le immagini che preferiamo all'interno del <div> chiamato .content-modal e personalizzare a piacimento lo stile CSS ottenendo il risultato finale desiderato.
.content-modal h1{
margin: 0px;
margin-bottom: 20px;
}
.content-modal p{
margin: 0px;
}
.content-modal p.bold{
font-size: 30px;
margin-bottom: 20px;
}
.content-modal p.codice_sconto{
font-size: 40px;
margin: 0px;
background-color: #111;
color: #fff;
padding: 5px;
display: inline-block;
}
