Crea un modulo di accesso rapido ed elegante

Oggi andremo a codificare l'Elegant Login Form di Orman Clark usando CSS3 e HTML5, oltre ad alcune animazioni CSS di Dan Eden per abbellire l'esperienza.

Questo tutorial presuppone una certa comprensione di HTML / CSS da parte tua; ci stiamo muovendo abbastanza velocemente. Ok andiamo!

Passaggio 1: il markup HTML

Iniziamo collegandoci ai nostri fogli di stile all'interno della testa del nostro documento. Abbiamo un resettaggio del foglio di stile per riportare tutto a zero, animate.css di Dan Eden che useremo per animazioni divertenti in seguito e il nostro styles.css in cui porteremo la maggior parte del nostro lavoro.

      Accesso

La carne dell'HTML comprende un contenitore, una forma e alcuni input.

      Nome utente:  Parola d'ordine: Hai dimenticato la password?
   Resta collegato

Step 3: Posizionamento degli elementi

Ora che abbiamo scritto il nostro markup HTML, possiamo passare al css. Per prima cosa specificheremo le basi, posizionando il nostro elemento contenitore al centro della pagina.

 / * Nozioni di base * / html, body width: 100%; altezza: 100%; font-family: "Helvetica Neue", Helvetica, sans-serif; colore: # 444; -webkit-font-smoothing: antialiased; sfondo: # f0f0f0;  #container position: fixed; larghezza: 340 px; altezza: 280 px; superiore: 50%; a sinistra: 50%; margin-top: -140px; margin-left: -170px;

Ora aggiungeremo uno stile strutturale agli input e ad altri elementi:

 forma margine: 0 auto; margin-top: 20px;  label color: # 555; display: blocco in linea; margin-left: 18px; padding-top: 10px; font-size: 14px;  p a font-size: 11px; colore: #aaa; float: giusto; margin-top: -13px; margin-right: 20px;  p a: hover color: # 555;  input font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; contorni: nessuno;  input [type = text], input [type = password] color: # 777; padding-left: 10px; margine: 10px; margin-top: 12px; margin-left: 18px; larghezza: 290 px; altezza: 35px;  #lower background: # ecf2f5; larghezza: 100%; altezza: 69px; margin-top: 20px;  input [type = checkbox] margin-left: 20px; margin-top: 30px;  .check margin-left: 3px;  input [type = submit] float: right; margin-right: 20px; margin-top: 20px; larghezza: 80 px; altezza: 30 px;

Step 4: Disegnare gli elementi

Gli elementi sono posizionati perfettamente. Ora è il momento di renderli belli! Per prima cosa modificheremo il contenitore dandogli angoli leggermente arrotondati e un'ombra di scatola per la profondità.

 #container position: fixed; larghezza: 340 px; altezza: 280 px; superiore: 50%; a sinistra: 50%; margin-top: -140px; margin-left: -170px; sfondo: #fff; border-radius: 3px; border: 1px solid #ccc; box-shadow: 0 1px 2px rgba (0, 0, 0, .1);

Quindi gli input ricevono un trattamento simile, con qualche raggio di confine e ombre di riquadri. Daremo al pulsante di invio uno sfondo sfumato, con un solido colore di sfondo per soddisfare IE9 e precedenti. Nota che stiamo prendendo di mira ogni tipo di input individualmente con selettori di attributi css.

 forma margine: 0 auto; margin-top: 20px;  label color: # 555; display: blocco in linea; margin-left: 18px; padding-top: 10px; font-size: 14px;  p a font-size: 11px; colore: #aaa; float: giusto; margin-top: -13px; margin-right: 20px;  p a: hover color: # 555;  input font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; contorni: nessuno;  input [type = text], input [type = password] color: # 777; padding-left: 10px; margine: 10px; margin-top: 12px; margin-left: 18px; larghezza: 290 px; altezza: 35px; border: 1px solid # c7d0d2; border-radius: 2px; box-shadow: inset 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # f5f7f8;  #lower background: # ecf2f5; larghezza: 100%; altezza: 69px; margin-top: 20px; box-shadow: inset 0 1px 1px #fff; border-top: 1px solid #ccc; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;  input [type = checkbox] margin-left: 20px; margin-top: 30px;  .check margin-left: 3px; font-size: 11px; colore: # 444; text-shadow: 0 1px 0 #fff;  input [type = submit] float: right; margin-right: 20px; margin-top: 20px; larghezza: 80 px; altezza: 30 px; font-size: 14px; font-weight: bold; colore: #fff; background-color: # acd6ef; / * IE fallback * / background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# acd6ef), a (# 6ec2e8)); background-image: -moz-linear-gradient (in alto a sinistra 90 gradi, # acd6ef 0%, # 6ec2e8 100%); background-image: linear-gradient (in alto a sinistra 90 gradi, # acd6ef 0%, # 6ec2e8 100%); border-radius: 30px; border: 1px solid # 66add6; box-shadow: 0 1px 2px rgba (0, 0, 0, .3), inset 0 1px 0 rgba (255, 255, 255, .5); cursore: puntatore;

Successivamente, per aiutare il feedback degli utenti, potremmo fare con alcuni hover e stati attivi:

 forma margine: 0 auto; margin-top: 20px;  label color: # 555; display: blocco in linea; margin-left: 18px; padding-top: 10px; font-size: 14px;  p a font-size: 11px; colore: #aaa; float: giusto; margin-top: -13px; margin-right: 20px; -webkit-transition: all .4s facilità; -moz-transition: all .4s facilità; transizione: tutti i .4s facilità;  p a: hover color: # 555;  input font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; contorni: nessuno;  input [type = text], input [type = password] color: # 777; padding-left: 10px; margine: 10px; margin-top: 12px; margin-left: 18px; larghezza: 290 px; altezza: 35px; border: 1px solid # c7d0d2; border-radius: 2px; box-shadow: inset 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # f5f7f8; -webkit-transition: all .4s facilità; -moz-transition: all .4s facilità; transizione: tutti i .4s facilità;  input [type = text]: hover, input [type = password]: hover border: 1px solid # b6bfc0; box-shadow: inset 0 1.5px 3px rgba (190, 190, 190, .7), 0 0 0 5px # f5f7f8;  input [tipo = testo]: focus, input [tipo = password]: focus border: 1px solid # a8c9e4; box-shadow: inset 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # e6f2f9;  #lower background: # ecf2f5; larghezza: 100%; altezza: 69px; margin-top: 20px; box-shadow: inset 0 1px 1px #fff; border-top: 1px solid #ccc; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;  input [type = checkbox] margin-left: 20px; margin-top: 30px;  .check margin-left: 3px; font-size: 11px; colore: # 444; text-shadow: 0 1px 0 #fff;  input [type = submit] float: right; margin-right: 20px; margin-top: 20px; larghezza: 80 px; altezza: 30 px; font-size: 14px; font-weight: bold; colore: #fff; background-color: # acd6ef; / * IE fallback * / background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# acd6ef), a (# 6ec2e8)); background-image: -moz-linear-gradient (in alto a sinistra 90 gradi, # acd6ef 0%, # 6ec2e8 100%); background-image: linear-gradient (in alto a sinistra 90 gradi, # acd6ef 0%, # 6ec2e8 100%); border-radius: 30px; border: 1px solid # 66add6; box-shadow: 0 1px 2px rgba (0, 0, 0, .3), inset 0 1px 0 rgba (255, 255, 255, .5); cursore: puntatore;  input [type = submit]: hover background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# b6e2ff), a (# 6ec2e8)); background-image: -moz-linear-gradient (in alto a sinistra 90 gradi, # b6e2ff 0%, # 6ec2e8 100%); background-image: linear-gradient (in alto a sinistra 90 gradi, # b6e2ff 0%, # 6ec2e8 100%);  input [type = submit]: active background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# 6ec2e8), a (# b6e2ff)); background-image: -moz-linear-gradient (in alto a sinistra 90 gradi, # 6ec2e8 0%, # b6e2ff 100%); background-image: linear-gradient (in alto a sinistra 90 gradi, # 6ec2e8 0%, # b6e2ff 100%);

Step 5: i tocchi finali

Il nostro modulo di login sembra buono, ma spingiamo la barca fuori e aggiungiamo all'esperienza. Ora aggiungeremo alcune animazioni e transizioni CSS per eliminarle. Abbiamo già fatto riferimento a animate.css di Dan Eden nella nostra testa - ora possiamo usare i suoi tipi di animazione predefiniti, come bounceIn, insieme ai prefissi del browser appropriati.

Innanzitutto, l'animazione del contenitore:

 #container position: fixed; larghezza: 340 px; altezza: 280 px; superiore: 50%; a sinistra: 50%; margin-top: -140px; margin-left: -170px; sfondo: #fff; border-radius: 3px; border: 1px solid #ccc; box-shadow: 0 1px 2px rgba (0, 0, 0, .1); -webkit-animation-name: bounceIn; -webkit-animation-fill-mode: entrambi; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: lineare; -moz-animation-name: bounceIn; -moz-animation-fill-mode: entrambi; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: lineare; nome-animazione: bounceIn; animation-fill-mode: entrambi; durata animazione: 1s; animazione-iterazione: 1; animazione-temporizzazione-funzione: lineare;

Quindi, transizioni per gli elementi interattivi:

 p a font-size: 11px; colore: #aaa; float: giusto; margin-top: -13px; margin-right: 20px; -webkit-transition: all .4s facilità; -moz-transition: all .4s facilità; transizione: tutti i .4s facilità;  input [type = text], input [type = password] color: # 777; padding-left: 10px; margine: 10px; margin-top: 12px; margin-left: 18px; larghezza: 290 px; altezza: 35px; border: 1px solid # c7d0d2; border-radius: 2px; box-shadow: inset 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # f5f7f8; -webkit-transition: all .4s facilità; -moz-transition: all .4s facilità; transizione: tutti i .4s facilità;

Passaggio 6: Codice finale

Sono stati fatti! Di seguito troverai il codice finale per il nostro elegante modulo di accesso, che dovrebbe darti qualcosa di molto simile a questo:

HTML:

      Accesso           Nome utente:  Parola d'ordine: Hai dimenticato la password?
   Resta collegato

CSS:

 / * Nozioni di base * / html, body width: 100%; altezza: 100%; font-family: "Helvetica Neue", Helvetica, sans-serif; colore: # 444; -webkit-font-smoothing: antialiased; sfondo: # f0f0f0;  #container position: fixed; larghezza: 340 px; altezza: 280 px; superiore: 50%; a sinistra: 50%; margin-top: -140px; margin-left: -170px; sfondo: #fff; border-radius: 3px; border: 1px solid #ccc; box-shadow: 0 1px 2px rgba (0, 0, 0, .1); -webkit-animation-name: bounceIn; -webkit-animation-fill-mode: entrambi; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: lineare; -moz-animation-name: bounceIn; -moz-animation-fill-mode: entrambi; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: lineare; nome-animazione: bounceIn; animation-fill-mode: entrambi; durata animazione: 1s; animazione-iterazione: 1; animazione-temporizzazione-funzione: lineare;  forma margine: 0 auto; margin-top: 20px;  label color: # 555; display: blocco in linea; margin-left: 18px; padding-top: 10px; font-size: 14px;  p a font-size: 11px; colore: #aaa; float: giusto; margin-top: -13px; margin-right: 20px; -webkit-transition: all .4s facilità; -moz-transition: all .4s facilità; transizione: tutti i .4s facilità;  p a: hover color: # 555;  input font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; contorni: nessuno;  input [type = text], input [type = password] color: # 777; padding-left: 10px; margine: 10px; margin-top: 12px; margin-left: 18px; larghezza: 290 px; altezza: 35px; border: 1px solid # c7d0d2; border-radius: 2px; box-shadow: inset 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # f5f7f8; -webkit-transition: all .4s facilità; -moz-transition: all .4s facilità; transizione: tutti i .4s facilità;  input [type = text]: hover, input [type = password]: hover border: 1px solid # b6bfc0; box-shadow: inset 0 1.5px 3px rgba (190, 190, 190, .7), 0 0 0 5px # f5f7f8;  input [tipo = testo]: focus, input [tipo = password]: focus border: 1px solid # a8c9e4; box-shadow: inset 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # e6f2f9;  #lower background: # ecf2f5; larghezza: 100%; altezza: 69px; margin-top: 20px; box-shadow: inset 0 1px 1px #fff; border-top: 1px solid #ccc; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;  input [type = checkbox] margin-left: 20px; margin-top: 30px;  .check margin-left: 3px; font-size: 11px; colore: # 444; text-shadow: 0 1px 0 #fff;  input [type = submit] float: right; margin-right: 20px; margin-top: 20px; larghezza: 80 px; altezza: 30 px; font-size: 14px; font-weight: bold; colore: #fff; background-color: # acd6ef; / * IE fallback * / background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# acd6ef), a (# 6ec2e8)); background-image: -moz-linear-gradient (in alto a sinistra 90 gradi, # acd6ef 0%, # 6ec2e8 100%); background-image: linear-gradient (in alto a sinistra 90 gradi, # acd6ef 0%, # 6ec2e8 100%); border-radius: 30px; border: 1px solid # 66add6; box-shadow: 0 1px 2px rgba (0, 0, 0, .3), inset 0 1px 0 rgba (255, 255, 255, .5); cursore: puntatore;  input [type = submit]: hover background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# b6e2ff), a (# 6ec2e8)); background-image: -moz-linear-gradient (in alto a sinistra 90 gradi, # b6e2ff 0%, # 6ec2e8 100%); background-image: linear-gradient (in alto a sinistra 90 gradi, # b6e2ff 0%, # 6ec2e8 100%);  input [type = submit]: active background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# 6ec2e8), a (# b6e2ff)); background-image: -moz-linear-gradient (in alto a sinistra 90 gradi, # 6ec2e8 0%, # b6e2ff 100%); background-image: linear-gradient (in alto a sinistra 90 gradi, # 6ec2e8 0%, # b6e2ff 100%);

Conclusione

Spero vi sia piaciuto seguirlo mentre abbiamo creato qualcosa che non solo ha un bell'aspetto, ma funziona magnificamente e ha quel qualcosa in più in più. Grazie per aver letto!

Web design