Creazione di un modulo di accesso ad effetto carta impilata

Questo articolo è parte del nostro "Serie di tutorial HTML5 / CSS3" - dedicato a farti diventare un designer e / o sviluppatore migliore. Clicca qui per vedere più articoli della stessa serie.

I moduli di accesso sono una parte essenziale di qualsiasi sito web dinamico. Forniscono un meccanismo per gli utenti del sito Web di accedere a contenuti limitati. In questo tutorial, esploreremo molte delle funzionalità di CSS3 come text-shadow, box-shadow, gradienti lineari e transizioni per creare un modulo di login semplice ed elegante con un aspetto di carta impilata.

L'immagine sopra mostra un'anteprima del modulo di login che costruiremo. Pronto per tuffarti? Iniziamo!

1. Marcatura HTML di base

Il markup HTML che useremo è molto semplice, dopo la dichiarazione del Doctype HTML5, abbiamo il e </code> tag. All'interno del <code><body></code> tag, abbiamo a <code><section></code> tag con una classe di 'stacked'. Questo <code><section></code> il tag viene utilizzato per definire la larghezza del riquadro del contenuto e per allinearlo al centro della pagina. Useremo anche il nome della classe di questo tag per indirizzare questo tag usando CSS. UN <code><form></code> tag segue <code><section></code> etichetta. Il tag form non ha un valore valido per l'attributo 'action', poiché è usato solo a fini di dimostrazione. All'interno del campo modulo sono presenti le dichiarazioni per le etichette e-mail e password e il campo di inserimento, seguito da un pulsante di invio. Il punto importante da notare qui è che abbiamo usato un campo di input con un tipo di 'email'. Questo ci viene fornito dalla dichiarazione HTML5 e si degrada dolcemente in un normale campo di inserimento di testo nei browser più vecchi.</p> <p>Ecco l'intero markup HTML:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Modulo di accesso semplice

  Accesso
   E-mail  
   Parola d'ordine

     Ed ecco un'anteprima di ciò che abbiamo creato finora:
  
 2. Aggiunta di stili di base
 Crea un nuovo file css chiamato master.css e aggiungi un collegamento a questo file nel tuo file HTML principale. Inizieremo il nostro file CSS con un reset rapido per ottenere uniformità su diversi browser. Aggiungiamo anche una bella immagine di sfondo alla nostra pagina. L'immagine che ho usato è stata presa da SubtlePatterns. Sentiti libero di navigare nel sito per trovare un'immagine di sfondo che si adatta ai tuoi gusti. Possiamo aggiungere l'immagine di sfondo con l'aiuto della seguente dichiarazione. Si noti inoltre che sto usando il Apri Sans carattere da Google Web Font per il corpo del testo.
  / * -------- Stili di base --------- * / body, html margin: 0; padding: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") left top repeat; font: 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap width: 400px; margine: 80px auto; 
 3. Effetto carta impilata
 Ora che abbiamo il layout di base attivo e funzionante, iniziamo con la progettazione del modulo. Per ottenere l'effetto carta impilata, faremo uso del :dopo e :prima pseudo-elementi. Questi pseudo-elementi sono principalmente usati per aggiungere effetti visivi a qualsiasi selettore. 
 Il :prima lo pseudo-elemento è usato per aggiungere il contenuto prima del contenuto del selettore e del :dopo pseudo-elemento per dopo il contenuto di un selettore. 
 Inizieremo dando la sezione, con una classe di 'stacked', una larghezza di 400 px e un'altezza di 300 px. Inoltre, daremo a questa casella un colore di sfondo di # f6f6f6 e un bordo di 1 pixel di spessore con il colore #bbb. Le cose fondamentali da notare qui sono la dichiarazione raggio-raggio e la dichiarazione box-ombra. Qui, i prefissi del browser "-moz-" e "-webkit-" sono stati utilizzati per garantire che questo funzioni nei browser basati su gecko e webkit. 
 La dichiarazione border-radius è molto semplice e viene utilizzata per creare angoli arrotondati, con 3px che rappresenta la curvatura. La sintassi della dichiarazione box-shadow potrebbe sembrare complicata, ma cerchiamo di scomporla in blocchi più piccoli per capirlo meglio. 
  / * -------- Raggio di bordo --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; / * -------- Box Shadow --------- * / -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2);
 I primi due zero indicano l'offset xe l'offset y e il 3px indica la sfocatura. La prossima è la dichiarazione del colore. Ho usato i valori di rgba qui; rgba sta per rosso blu verde e alfa (opacità). Quindi i 4 valori all'interno della parentesi indicano la quantità di rosso, verde, blu e il suo alfa (opacità).
  .stacked background: # f6f6f6; border: 1px solid #bbb; altezza: 300 px; margine: 50px auto; posizione: relativa; larghezza: 400 px; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; 
 Ora che abbiamo creato il bounding box di base per il modulo, iniziamo con :dopo e :prima pseudo-elementi. 
  .impilato: dopo, .stacked: before background: # f6f6f6; border: 1px solid #aaa; fondo: -8px; contenuto: "; height: 250px; left: 2px; position: absolute; width: 394px; z-index: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; - moz-border-radius: 3px; border-radius: 3px; .stacked: before bottom: -14px; left: 5px; width: 388px; -webkit-border-radius: 3px; -moz-border-radius: 3px ; border-radius: 3px; -webkit-box-shadow: 0 0 15px rgba (0,0,0,0,5); -moz-box-shadow: 0 0 15px rgba (0,0,0,0,5); -ombra: 0 0 15px rgba (0,0,0,0,5);
 Il codice per: after e: before pseudo-elementi sono quasi esattamente simili a quelli del bounding box discusso sopra. L'unica cosa importante da notare qui è che questi pseudo-elementi sono posizionati assolutamente rispetto al riquadro di delimitazione. Ciascuno degli pseudo-elementi viene progressivamente abbassato di alcuni pixel per dargli un aspetto di carta impilata.
 4. Campi di input
 Nel markup HTML, abbiamo aggiunto una classe di "input di testo" sia al campo email che al campo password per permetterci di indirizzare facilmente questi elementi con le nostre dichiarazioni CSS. Ecco la dichiarazione CSS che viene applicata a entrambi i campi di input.
  form input.text-input outline: 0; blocco di visualizzazione; larghezza: 330 px; imbottitura: 8px 15px; bordo: 1px grigio fisso; font-size: 16px; font-weight: 400; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; box-shadow: inset 0 2px 8px rgba (0,0,0,0,3); 
 Qui, ancora una volta abbiamo fatto uso delle dichiarazioni border-radius e box-shadow. Nel caso di campi di testo, il raggio del bordo viene assegnato ad un valore più elevato per garantire una maggiore curvatura. Nel caso di una dichiarazione box-shadow, l'inserto parola chiave è stato usato per specificare che l'ombra sarà all'interno del campo di testo. Qui, l'offset verticale per l'ombra è 2px e ha una sfocatura di 8px, il colore viene dichiarato usando il formato rgba.
 Per aggiungere un po 'di interattività ai campi di input, cambieremo la proprietà box-shadow per il campo di input sullo stato' hover '. La nuova dichiarazione box-shadow ha zero x e y offset ma ha una sfocatura di 5px, con il colore dichiarato in formato rgba.
 5. Pulsante Invia
 La parte finale di questo modulo che dobbiamo completare è il pulsante di invio. Simile al campo di input, daremo al pulsante di invio un raggio di 25px usando la proprietà border-radius. È stata aggiunta anche una proprietà box-shadow con un offset y di 1px per dare il pulsante a “Ombra interiore” effetto.
  modulo input [type = 'submit'] float: right; imbottitura: 10px 20px; blocco di visualizzazione; cursore: puntatore; font-size: 16px; font-weight: 700; colore: #fff; text-shadow: 0 1px 0 # 000; background-color: # 0074CC; border: 1px solid # 05C; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background-image: -moz-linear-gradient (in alto, # 08C, # 05C); background-image: -ms-linear-gradient (in alto, # 08C, # 05C); background-image: -webkit-linear-gradient (in alto, # 08C, # 05C); background-image: linear-gradient (in alto, # 08C, # 05C); -webkit-box-shadow: inset 0 1px 0px rgba (255, 255, 255, 0.5); -moz-box-shadow: inset 0 1px 0px rgba (255, 255, 255, 0.5); box-shadow: inset 0 1px 0px rgba (255, 255, 255, 0.5); 
 La cosa importante da notare qui è la dichiarazione per aggiungere il gradiente a questo pulsante. I gradienti CSS3 sono un argomento abbastanza ampio e noi scaleremo solo la superficie. Per questo pulsante di invio, aggiungeremo un gradiente lineare che va da # 08C a # 05C. Come con tutte le altre proprietà CSS3 che abbiamo utilizzato fino ad ora, aggiungeremo i prefissi "-moz", "-webkit" e "-ms" per garantire che il gradiente funzioni tra diversi browser.
 6. Demo e download
 Il nostro modulo di accesso è ora completo. Guarda la demo per vedere come appare il modulo completato. Se ti perdi in qualsiasi momento o non riesci a seguire il tutorial, non ti preoccupare, basta scaricare i file sul desktop e armeggiare con il codice CSS esistente per capire come funziona.
 Spero ti sia piaciuto questo tutorial. Sentiti libero di sperimentare queste caratteristiche e non dimenticare di condividere i tuoi pensieri.
 dimostrazione
 Scaricare files
 
Nota dell'editore: Questo post è scritto da Bharani M per Hongkiat.com. Bharani è un designer / sviluppatore di New Delhi, in India. Sta attualmente lavorando su Resumonk.com - un costruttore di curriculum online che ti aiuta a creare un curriculum professionale e bello in pochi minuti. Controlla anche il suo progetto parallelo - Quotescube.com - la tua dose giornaliera di citazioni.