Share
Creiamo un modulo di accesso minimo e fluido utilizzando HTML5 di base, quindi migliorandolo con alcune tecniche CSS3. È ora di trasformare alcuni elementi semplici in qualcosa di bello ...
Se vuoi dei bellissimi moduli CSS3 per il tuo sito e non vuoi doverli creare da soli, non puoi sbagliare con CSS3 Form Pack su Envato Market. Per soli $ 5, ottieni:
Non c'è da stupirsi che sia uno degli articoli CSS3 più venduti su Envato Market.
CSS3 Form Pack sul mercato Envato I moduli Web sono parte integrante del design di un sito Web. Qualunque sia lo scopo, i moduli sono pensati per essere un modo semplice per gli utenti di inserire valori e inviare dati. Avere HTML5 e CSS3 a nostra disposizione, ci consente di creare forme intuitive da usare e visivamente accattivanti.
Credo che il web design dovrebbe essere pulito ed efficiente. Il design del modulo che stiamo per codificare segue quei principi, inclusi solo tre elementi: un input di username, un input di password e un input di invio. Poiché il markup è così semplice, consente una maggiore flessibilità quando lo codifichiamo in HTML e CSS.
Ecco alcuni elementi del design che dovremo tenere a mente per la codifica:
La maggior parte degli elementi sono in stile CSS, ma verificheremo il segnaposto attributo anche, dal momento che ciò suggerirà ai nostri utenti che tipo di dati dovrebbero inserire.
Iniziamo creando un modello HTML5 pulito con un modulo e tre input:
accesso rapido
Al momento, non abbiamo nulla di troppo speciale, solo un modulo, tre input e un documento vuoto. Creiamo un file CSS chiamato style.css e collegalo alla nostra pagina HTML:
Ricorda, il file CSS si trova attualmente nella nostra directory principale; assicurati di utilizzare il percorso corretto se scegli di mettere il tuo file CSS in un'altra cartella, come la cartella 'Css'.
Prima di aggiungere uno qualsiasi dei nostri stili al file CSS, è sempre buona norma iniziare da una lavagna pulita. Inizieremo i nostri stili con il reset CSS di Eric Meyer che rimuove lo stile predefinito e ci consente di costruire le nostre regole dallo stesso punto in qualsiasi browser.
Iniziamo con la definizione di un font e il gradiente di sfondo per la nostra pagina di accesso. Inserisci questo codice dopo il reset del CSS:
body font-family: sans-serif; colore di sfondo: # 323B55; background-image: -webkit-linear-gradient (in basso, # 323B55 0%, # 424F71 100%); background-image: -moz-linear-gradient (in basso, # 323B55 0%, # 424F71 100%); background-image: -o-linear-gradient (in basso, # 323B55 0%, # 424F71 100%); background-image: -ms-linear-gradient (in basso, # 323B55 0%, # 424F71 100%); background-image: linear-gradient (in basso, # 323B55 0%, # 424F71 100%);
Ora che abbiamo aggiunto quel pezzo di codice, la nostra pagina ora dovrebbe avere uno sfondo sfumato lineare. Il gradiente inizia nella parte inferiore della pagina (0%) dove il colore è # 323B55 e termina nella parte superiore della pagina (100%) dove il colore è # 424F71. Basta incassare la pagina viene visualizzata da un browser che non supporta gradienti, è importante dichiarare a colore di sfondo, che ho impostato sullo stesso colore del gradiente allo 0%. Il bello dei gradienti CSS3 è che puoi aggiungere molte "fermate", ad esempio un altro cambio di colore al 25%. L'ultima cosa da aggiungere nel tag del corpo è il famiglia di font, Ho deciso di usare il tipo Sans Serif.
Ora che abbiamo le nostre fondamenta, è ora di iniziare ad aggiungere un po 'di stile!
Prima di iniziare lo stile CSS per il modulo di accesso, è necessario aggiungere alcune cose al nostro documento HTML. Innanzitutto, inizia con l'aggiunta di un id al modulo, lo chiameremo 'Chiazza di petrolio-login'. Quindi, aggiungere un segnaposto attributo in ciascuno dei tag di input. Ecco come dovrebbe apparire la pagina HTML finora:
accesso rapido
L'attributo segnaposto di input HTML5 è una grande aggiunta ai tag di input. Invece di avere un valore di input che l'utente deve sostituire, il segnaposto attributo ci consente di visualizzare il testo della guida e farlo sparire una volta che l'utente inizia a digitare nel campo. Non è ancora ampiamente supportato e dovrebbe quindi essere usato con cautela. Dì, per esempio, il segnaposto l'attributo non funziona in un browser, l'utente non saprà quali valori inserire. In seguito copriremo una tecnica di fallback, ma non vale neanche la pena che il testo segnaposto sia un suggerimento, piuttosto che etichettare l'input.
Ora che abbiamo la nostra pagina HTML aggiornata, possiamo iniziare ad aggiungere un po 'di stile ai moduli di accesso. Ecco il CSS per il nostro modulo id che abbiamo dichiarato prima.
# slick-login width: 220px; altezza: 155 px; posizione: assoluta; a sinistra: 50%; superiore: 50%; margin-left: -110px; margin-top: -75px;
Per questo modulo di login, ho deciso di allinearlo perfettamente (orizzontalmente e verticalmente) al centro della pagina. È abbastanza semplice posizionare elementi come questo. Come puoi vedere dal codice sopra, posiziona l'elemento al 50% da sopra e a sinistra, e poi usando i valori di margine, sposta indietro l'elemento metà della larghezza e dell'altezza. Questo è un ottimo metodo per allineare gli elementi al centro della pagina, ma non è eccezionale in termini di flessibilità. Ad esempio, se si desidera duplicare gli elementi, è necessario modificare i valori di larghezza, altezza e margine per mantenere l'elemento allineato. Anche se ho allineato il modulo al centro della pagina, sentiti libero di cambiare il codice in qualsiasi modo desideri!
Ora che abbiamo allineato il nostro modulo, è ora di passare allo stile degli input!
Ora, stiamo davvero arrivando alle cose divertenti. Iniziamo aggiungendo il CSS per gli input di testo e password:
# slick-login input [type = "text"], # slick-login input [type = "password"] larghezza: 100%; altezza: 40px; positon: relativo; margin-top: 7px; font-size: 14px; colore: # 444; contorni: nessuno; border: 1px solid rgba (0, 0, 0, .49); padding-left: 20px; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; sfondo-clip: padding-box; border-radius: 6px; background-color: #fff; background-image: -webkit-linear-gradient (in basso, #FFFFFF 0%, # F2F2F2 100%); background-image: -moz-linear-gradient (in basso, #FFFFFF 0%, # F2F2F2 100%); background-image: -o-linear-gradient (in basso, #FFFFFF 0%, # F2F2F2 100%); background-image: -ms-linear-gradient (in basso, #FFFFFF 0%, # F2F2F2 100%); background-image: linear-gradient (in basso, #FFFFFF 0%, # F2F2F2 100%); -webkit-box-shadow: inset 0px 2px 0px # d9d9d9; box-shadow: inset 0px 2px 0px # d9d9d9; # slick-login input [type = "text"]: focus, # input slick-login [type = "password"]: focus -webkit-box-shadow: inset 0px 2px 0px # a7a7a7; box-shadow: inset 0px 2px 0px # a7a7a7; # input slick-login: first-child margin-top: 0px;
Ricorda, il nostro obiettivo è rendere flessibile il modulo. Invece di dichiarare una larghezza di input fissa, ho deciso di rendere la larghezza relativa alla larghezza del modulo. In questo modo, se decidessimo di modificare la larghezza del modulo, tutti gli input cambieranno di conseguenza.
Perché abbiamo dichiarato un margin-top valore per tutti gli input, dobbiamo aggiungere un Primogenito selettore e assicurarsi che il margin-top del primo input è impostato su zero. In questo modo, il primo valore di input sarà sempre posizionato nella parte superiore del modulo.
Un'altra cosa da tenere a mente è impostare il schema proprietà su none, in modo che il browser non aggiunga profili indesiderati ai nostri input.
Per rendere il modulo più flessibile, aggiungeremo un bordo trasparente, in modo che qualunque sia lo sfondo del sito Web, il modulo cambierà per adattarlo. Perché il opacità l'attributo cambia l'opacità dell'intero elemento, ho deciso di cercare un metodo per cambiare solo l'opacità del bordo.
Se dichiari il colore del bordo in rgba, è possibile aggiungere un valore alfa. Come puoi vedere sopra, il nostro bordo è un solido bordo nero 1px, ma la sua opacità è del 47%.
Nel nostro design, il testo nel campo è spostato a destra. Per ottenere questo effetto nei CSS, possiamo semplicemente usare il padding-left proprietà e impostarlo su 20px. Quando eseguiamo il rendering del codice, si verifica un problema. Il valore di padding aggiunge 20 pixel alla larghezza di input, che non è ciò che vorremmo.
Per risolvere questo problema, possiamo aggiungere un background-clip di proprietà e imposta il valore su padding-box. Questo frammento di CSS fa in modo che il padding non influenzi la larghezza dell'input. Puoi saperne di più su background-clip di proprietà su Mozilla.
Un'altra proprietà CSS3 molto interessante è box-ombra. L'utilizzo del parametro inset ci consente di creare un'ombra interna sull'elemento di input. Usando il messa a fuoco selettore, possiamo facilmente modificare i valori e i colori intorno quando l'utente fa clic sul campo.
Il pulsante di invio è una parte molto importante di un modulo, quindi facciamolo risaltare! Ecco il CSS che useremo per l'input di invio:
# slick-login input [type = "submit"] width: 100%; altezza: 50 px; margin-top: 7px; colore: #fff; font-size: 18px; font-weight: bold; text-shadow: 0px -1px 0px # 5b6ddc; contorni: nessuno; border: 1px solid rgba (0, 0, 0, .49); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; sfondo-clip: padding-box; border-radius: 6px; colore di sfondo: # 5466da; background-image: -webkit-linear-gradient (in basso, # 5466da 0%, # 768ee4 100%); background-image: -moz-linear-gradient (in basso, # 5466da 0%, # 768ee4 100%); background-image: -o-linear-gradient (in basso, # 5466da 0%, # 768ee4 100%); background-image: -ms-linear-gradient (in basso, # 5466da 0%, # 768ee4 100%); background-image: linear-gradient (in basso, # 5466da 0%, # 768ee4 100%); cursore: puntatore; -webkit-box-shadow: inset 0px 1px 0px # 9ab1ec; box-shadow: inset 0px 1px 0px # 9ab1ec; # slick-login input [type = "submit"]: hover background-color: # 5f73e9; background-image: -webkit-linear-gradient (in basso, # 5f73e9 0%, # 859bef 100%); background-image: -moz-linear-gradient (in basso, # 5f73e9 0%, # 859bef 100%); background-image: -o-linear-gradient (in basso, # 5f73e9 0%, # 859bef 100%); background-image: -ms-linear-gradient (in basso, # 5f73e9 0%, # 859bef 100%); background-image: linear-gradient (in basso, # 5f73e9 0%, # 859bef 100%); -webkit-box-shadow: inset 0px 1px 0px # aab9f4; box-shadow: inset 0px 1px 0px # aab9f4; margin-top: 10px; # slick-login input [type = "submit"]: active background-color: # 7588e1; background-image: -webkit-linear-gradient (in basso, # 7588e1 0%, # 7184df 100%); background-image: -moz-linear-gradient (in basso, # 7588e1 0%, # 7184df 100%); background-image: -o-linear-gradient (in basso, # 7588e1 0%, # 7184df 100%); background-image: -ms-linear-gradient (in basso, # 7588e1 0%, # 7184df 100%); background-image: linear-gradient (in basso, # 7588e1 0%, # 7184df 100%); -webkit-box-shadow: inset 0px 1px 0px # 93a9e9; box-shadow: inset 0px 1px 0px # 93a9e9;
Il CSS per il nostro pulsante di invio è abbastanza semplice; stiamo usando bordi, sfumature e ombre interne per far risaltare il pulsante. Un'altra proprietà CSS3 che vedremo è text-shadow.
Per far risaltare un po 'di più il testo del pulsante, aggiungeremo un'ombra solida 1px sopra il testo. Usando un colore più scuro (# 5b6ddc), possiamo rendere il testo bianco più prominente sullo sfondo azzurro. Anche l'effetto più sottile, come l'aggiunta di un'ombra di testo, può aggiungere molto al tuo design, aiutando il testo a risaltare.
Sono andato avanti e ho aggiunto il codice per il librarsi e attivo selettori. Tutto ciò che è cambiato è il colore del gradiente e l'ombra interiore. Nota come il cambio di colore sia piuttosto sottile, ma aggiunge molto al design. Ho anche cambiato il valore di margin-top a tre pixel più in basso sullo stato al passaggio del mouse. Il cambiamento è naturale e contribuisce all'eleganza della forma.
Finora tutto sembra perfetto, ma se passi il mouse sopra e fai clic su alcuni elementi, sembra un po 'mosso. È ora di aggiungere qualche animazione!
Per far sì che le cose scorrano molto meglio, aggiungiamo questo bit di codice CSS ai nostri input:
-webkit-transition: all .1s easy-in-out; -moz-transition: all .1s easy-in-out; -o-transizione: all .1s easy-in-out; -ms-transition: all .1s easy-in-out; transizione: all .1s easy-in-out;
Utilizzando una transizione rapida e semplice, tutti i nostri elementi appaiono e si sentono molto meglio. Notare la transizione del colore dell'ombra interna sugli input di testo e l'animazione del pulsante di invio al passaggio del mouse; le transizioni fanno apparire la forma completa.
Anche se tutto sembra a posto, aggiungiamo un po 'di gadget prima di chiamarlo un giorno.
Per assicurarti che il nostro modulo sia correttamente accessibile, aggiungi questo bit di markup accanto al tuo ingresso tags:
Perché vogliamo rendere la nostra forma il più semplice possibile, abbiamo deciso di utilizzare il segnaposto attributo. Un altro modo in cui avrebbe potuto funzionare sarebbe aggiungere in a etichetta etichetta. Poiché non abbiamo bisogno del tag nel nostro design, piuttosto per l'accessibilità e gli scopi SEO, aggiungeremo questo codice CSS in:
# etichetta slick-login display: none;
Impostazione del display proprietà a nessuno raggiunge l'aspetto che vogliamo, che in questo caso non è affatto!
Ora, torniamo a quel potenziale problema che avremmo con il segnaposto attributo. Supponi che qualcuno stia visualizzando questo sito Web da un browser che non supporta segnaposto: i nostri input vuoti sarebbero piuttosto inutili. Per risolvere questo problema, utilizzeremo jQuery e Modernizr per rilevare il supporto e correggere le situazioni laddove non ce ne sono. Per iniziare, colleghiamo gli script alla nostra pagina HTML.
Rilascia i tag dello script nel file
del tuo HTML. Per ottenere prestazioni ottimali, dovresti farli seguire dopo i riferimenti al foglio di stile. Il motivo per cui consigliamo di collocare Modernizr in testa è duplice: l'HTML5 Shiv (che abilita gli elementi HTML5 in IE) deve essere eseguito prima del - Modernizr
Ora crea un nuovo file javascript chiamato placeholder.js. Metodo unico ha un ottimo modo di usare Modernizr per creare un fallback per il segnaposto attributo. Aggiungi questo codice nel file javascript:
Accentsconagua
$ (function () // controlla il supporto browser segnaposto if (! Modernizr.input.placeholder) // imposta valori segnaposto $ (this) .find ('[segnaposto]'). each (function () if ($ (this) .val () == ") // se il campo è vuoto $ (this) .val ($ (this) .attr ('placeholder'));); // focus e blur dei segnaposto $ ('[segnaposto]'). focus (function () if ($ (this) .val () == $ (this) .attr ('placeholder')) $ (this) .val ("); $ (this) .removeClass ('placeholder');). blur (function () if ($ (this) .val () == "|| $ (this) .val () == $ (this) .attr ('segnaposto')) $ (this) .val ($ (this) .attr ('placeholder')); $ (this) .addClass ('placeholder');); // rimuove i segnaposto su submit $ ('[segnaposto]'). closest ('form'). submit (function () $ (this) .find ('[segnaposto]'). each (function () if ($ (this). val () == $ (this) .attr ('placeholder')) $ (this) .val (");));); Collegheremo anche il file javascript alla nostra pagina HTML:
Per fare in modo che funzioni, dobbiamo aggiungere un segnaposto classe agli input sul campo:
Ora, aggiungiamo lo stile per il segnaposto classe nel nostro file CSS:
.segnaposto color: # 444;
Mentre ci siamo, aggiungiamo anche un utile snippet di CSS che assicurerà che le larghezze degli input rimangano le stesse, indipendentemente dal padding e dai bordi:
* -moz-box-dimensionamento: border-box; -webkit-box-dimensionamento: border-box; dimensionamento della scatola: border-box;
Per maggiori informazioni sul perché box-sizing è così grande, Paul Irish ha una grande spiegazione.
Per rendere la nostra forma ancora di più di fantasia, aggiungeremo una semplice animazione in aumento al modulo quando la pagina verrà caricata. Iniziamo con la dichiarazione dell'animazione e l'aggiunta di fotogrammi chiave:
@keyframes "login" 0% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"; filtro: alfa (opacità = 0); opacità: 0; margin-top: -50px; 100% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 100)"; filtro: alfa (opacità = 100); opacità: 1; margin-top: -75px; @ -moz-keyframes login 0% filter: alpha (opacity = 0); opacità: 0; margin-top: -50px; 100% filtro: alpha (opacità = 100); opacità: 1; margin-top: -75px; @ -webkit-keyframes "login" 0% filter: alpha (opacity = 0); opacità: 0; margin-top: -50px; 100% filtro: alpha (opacità = 100); opacità: 1; margin-top: -75px; @ -ms-keyframes "login" 0% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"; filtro: alfa (opacità = 0); opacità: 0; margin-top: -50px; 100% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 100)"; filtro: alfa (opacità = 100); opacità: 1; margin-top: -75px; @ -o-keyframes "login" 0% filter: alpha (opacity = 0); opacità: 0; margin-top: -50px; 100% filtro: alpha (opacità = 100); opacità: 1; margin-top: -75px;
Il CSS sopra dichiara una nuova animazione chiamata accesso e altera il margin-top e opacità valori in modo che la forma si apra e salga in posizione. Ora, aggiungiamo il CSS per il chiazza di petrolio-login id:
-webkit-animation: login 1s easy-in-out; -moz-animation: login 1s easy-in-out; -ms-animation: login 1s easy-in-out; -o-animation: login 1s easy-in-out; animazione: login 1s easy-in-out;
Ora, ogni volta che la pagina viene caricata, verrà eseguita l'animazione di un secondo. Ora che abbiamo stilizzato, fisso e animato, abbiamo finito!
Ecco uno sguardo all'HTML finale per questo modulo di login scorrevole:
Accesso rapido
E il CSS:
/ * CSS RESET http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licenza: nessuna (dominio pubblico) * / html, corpo, div, span, applet, oggetto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronimo, indirizzo, grande, citare, codice, del, DFN, em, img, ins, kbd, q, s, SAMP, piccolo, sciopero, forte, sub, sup, TT, var, b, U, I, centro, dl, dt, dd, ol, ul, li, fieldset, forma, etichetta, legenda, tavolo, didascalia, tbody, tfoot, thead, TR, th, td, articolo, a parte, tela, dettagli, incorporare, figura, figcaption, piè, intestazione, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video margin: 0; padding: 0; confine: 0; dimensione carattere: 100%; font: inherit; vertical-align: baseline; / * HTML5 display-role reset per i browser più vecchi * / article, a parte, dettagli, figcaption, figure, footer, header, hgroup, menu, nav, section display: block; body line-height: 1; ol, ul list-style: none; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0; / * CSS Animations * / @keyframes" login "0% -ms-filter:" progid: DXImageTransform.Microsoft.Alpha (Opacity = 0) "; filter: alpha (opacity = 0); opacity: 0; margin-top: -50px; 100% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 100)"; filter: alpha (opacity = 100); opacity: 1; margin-top: -75px; @ -moz-keyframes login 0 % filter: alpha (opacity = 0); opacity: 0; margin-top: -50px; 100% filter: alpha (opacity = 100); opacity: 1; margin-top: -75px; @ - webkit-keyframes "login" 0% filtro: alpha (opacity = 0); opacity: 0; margin-top: -50px; 100% filtro: alpha (opacità = 100); opacità: 1; margin-top : -75px; @ -ms-keyframes "login" 0% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacità = 0)"; filtro: alpha (opacità = 0); opacità: 0 ; margin-top: -50px; 100% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 100)"; filtro: alfa (opacità = 100); opacità: 1; margin-top: -75px; @ -o-keyframes "login" 0% filter: alpha (opacity = 0); opacità: 0; margin-top: -50px; 100% filtro: alpha (opacità = 100); opacità: 1; margin-top: -75px; / * Main CSS * / * -moz-box-dimensionamento: border-box; -webkit-box-dimensionamento: border-box; dimensionamento della scatola: border-box; body font-family: sans-serif; colore di sfondo: # 323B55; background-image: -webkit-linear-gradient (in basso, # 323B55 0%, # 424F71 100%); background-image: -moz-linear-gradient (in basso, # 323B55 0%, # 424F71 100%); background-image: -o-linear-gradient (in basso, # 323B55 0%, # 424F71 100%); background-image: -ms-linear-gradient (in basso, # 323B55 0%, # 424F71 100%); background-image: linear-gradient (in basso, # 323B55 0%, # 424F71 100%); # slick-login width: 220px; altezza: 155 px; posizione: assoluta; a sinistra: 50%; superiore: 50%; margin-left: -110px; margin-top: -75px; -webkit-animation: login 1s easy-in-out; -moz-animation: login 1s easy-in-out; -ms-animation: login 1s easy-in-out; -o-animation: login 1s easy-in-out; animazione: login 1s easy-in-out; # etichetta slick-login display: none; .placeholder color: # 444; # slick-login input [type = "text"], # slick-login input [type = "password"] width: 100%; altezza: 40px; positon: relativo; margin-top: 7px; font-size: 14px; colore: # 444; contorni: nessuno; border: 1px solid rgba (0, 0, 0, .49); padding-left: 20px; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; sfondo-clip: padding-box; border-radius: 6px; background-image: -webkit-linear-gradient (in basso, #FFFFFF 0%, # F2F2F2 100%); background-image: -moz-linear-gradient (in basso, #FFFFFF 0%, # F2F2F2 100%); background-image: -o-linear-gradient (in basso, #FFFFFF 0%, # F2F2F2 100%); background-image: -ms-linear-gradient (in basso, #FFFFFF 0%, # F2F2F2 100%); background-image: linear-gradient (in basso, #FFFFFF 0%, # F2F2F2 100%); -webkit-box-shadow: inset 0px 2px 0px # d9d9d9; box-shadow: inset 0px 2px 0px # d9d9d9; -webkit-transition: all .1s easy-in-out; -moz-transition: all .1s easy-in-out; -o-transizione: all .1s easy-in-out; -ms-transition: all .1s easy-in-out; transizione: all .1s easy-in-out; # slick-login input [type = "text"]: focus, # input slick-login [type = "password"]: focus -webkit-box-shadow: inset 0px 2px 0px # a7a7a7; box-shadow: inset 0px 2px 0px # a7a7a7; # input slick-login: first-child margin-top: 0px; # slick-login input [type = "submit"] width: 100%; altezza: 50 px; margin-top: 7px; colore: #fff; font-size: 18px; font-weight: bold; text-shadow: 0px -1px 0px # 5b6ddc; contorni: nessuno; border: 1px solid rgba (0, 0, 0, .49); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; sfondo-clip: padding-box; border-radius: 6px; colore di sfondo: # 5466da; background-image: -webkit-linear-gradient (in basso, # 5466da 0%, # 768ee4 100%); background-image: -moz-linear-gradient (in basso, # 5466da 0%, # 768ee4 100%); background-image: -o-linear-gradient (in basso, # 5466da 0%, # 768ee4 100%); background-image: -ms-linear-gradient (in basso, # 5466da 0%, # 768ee4 100%); background-image: linear-gradient (in basso, # 5466da 0%, # 768ee4 100%); -webkit-box-shadow: inset 0px 1px 0px # 9ab1ec; box-shadow: inset 0px 1px 0px # 9ab1ec; cursore: puntatore; -webkit-transition: all .1s easy-in-out; -moz-transition: all .1s easy-in-out; -o-transizione: all .1s easy-in-out; -ms-transition: all .1s easy-in-out; transizione: all .1s easy-in-out; # slick-login input [type = "submit"]: hover background-color: # 5f73e9; background-image: -webkit-linear-gradient (in basso, # 5f73e9 0%, # 859bef 100%); background-image: -moz-linear-gradient (in basso, # 5f73e9 0%, # 859bef 100%); background-image: -o-linear-gradient (in basso, # 5f73e9 0%, # 859bef 100%); background-image: -ms-linear-gradient (in basso, # 5f73e9 0%, # 859bef 100%); background-image: linear-gradient (in basso, # 5f73e9 0%, # 859bef 100%); -webkit-box-shadow: inset 0px 1px 0px # aab9f4; box-shadow: inset 0px 1px 0px # aab9f4; margin-top: 10px; # slick-login input [type = "submit"]: active background-color: # 7588e1; background-image: -webkit-linear-gradient (in basso, # 7588e1 0%, # 7184df 100%); background-image: -moz-linear-gradient (in basso, # 7588e1 0%, # 7184df 100%); background-image: -o-linear-gradient (in basso, # 7588e1 0%, # 7184df 100%); background-image: -ms-linear-gradient (in basso, # 7588e1 0%, # 7184df 100%); background-image: linear-gradient (in basso, # 7588e1 0%, # 7184df 100%); -webkit-box-shadow: inset 0px 1px 0px # 93a9e9; box-shadow: inset 0px 1px 0px # 93a9e9;
Ecco uno sguardo al risultato finale:
La cosa grandiosa di questo modulo è che è molto facile da cambiare. È anche molto facile da estendere, aggiungere più input, convalida, funzionalità, ecc. Grazie per aver letto e spero che tu abbia imparato qualcosa. Sarò interessato a sapere per cosa lo usi!
