Creazione di un modulo reattivo elegante con CSS3 e HTML5

La codifica con CSS3 ha cambiato radicalmente il panorama all'interno dello sviluppo web frontend. Ci sono più opportunità di creare interfacce uniche con sfumature, ombre esterne e angoli arrotondati. Tutti questi effetti stanno lentamente diventando adottati in tutti i principali browser web.

In questo tutorial voglio mostrare molti di questi fantastici effetti CSS3. Ho creato un semplice modulo Web utilizzando alcuni dei più recenti tipi di input HTML5. Lo schema è anche reattivo; si adatterà al diminuire della dimensione della finestra. Questa situazione è perfetta per la creazione di moduli Web per supportare gli utenti di smartphone.

Controlla il codice sorgente e vedi se puoi seguire nella struttura dei file. Sentiti libero di personalizzare questi elementi e copiarli nei tuoi siti web.

dimostrazione
Scarica il codice sorgente

Costruire la struttura del modulo

Per iniziare ho creato un file principale index.html insieme a due fogli di stile separati. style.css contiene tutti i selettori predefiniti mentre responsive.css gestisce diverse dimensioni della finestra. Il mio doctype è HTML5 e ho avvolto l'intero modulo in un contenitore

Questo esempio mostra solo gli effetti che puoi manifestare durante la codifica in CSS3. Pertanto non abbiamo uno script di post-invio o una destinazione per reindirizzare l'utente. Il mio codice qui sotto contiene i tag di apertura per i primi elementi del nostro modulo.

La prima area di blocco è racchiusa in un tag di sezione in modo da poter flottare il layout side-by-side. La colonna di sinistra contiene tutti questi input: testo, e-mail, URL e numero di telefono. Mentre accedi al telefono, il display della tastiera mobile dovrebbe adattarsi in base al tipo di ingresso. Ci sono molti buoni motivi per supportare queste funzionalità per i dispositivi mobili, dato che tutti stanno lavorando in questi giorni.

L'elemento textarea può anche avere un testo segnaposto definito su pageload. È simile a un'etichetta che scompare quando l'utente inserisce del testo nel campo. L'attributo che non è riportato è completamento automatico perché le aree di testo solitamente non includono contenuti correlati.

Controlli della barra laterale

Volevo creare questo modulo in modo che rispondesse in modo appropriato al ridimensionamento delle finestre. Quando la finestra è piena abbastanza, entrambe le colonne di input sono mobili l'una accanto all'altra. Ma se la larghezza viene ridotta leggermente, la barra laterale destra scende sotto il contenuto principale.

Ecco il mio codice HTML per l'area della barra laterale:

   Destinatario:
  
  Priorità:
   Basso    medio    alto

Questo codice in realtà non è niente di troppo confuso. Solo una semplice opzione seleziona il menu e alcuni pulsanti radio. Inoltre, dopo questi oggetti ho inserito un pulsante di reset e invio verso la fine della sezione.

Tutto questo sembra buono e buono, quindi ora passiamo ad alcune proprietà CSS. Ci sono così tante personalizzazioni che puoi applicare quando lavori sugli elementi del modulo. Cerca di non impazzire pensando troppo e divertiti!

Animated Box Shadows

Noterai mentre sfogli tutti gli elementi di input principali che ho animato un'ombra esterna colorata. Google Chrome ha una struttura di contorno che fa qualcosa di simile, ma non del tutto stravagante. Questa piccola parte dell'interfaccia è allettante per i visitatori per la prima volta.

 / ** gli elementi del modulo ** / # hongkiat-form box-dimensionamento: border-box;  # hongkiat-form .txtinput display: block; font-family: "Helvetica Neue", Arial, sans-serif; border-style: solido; border-width: 1px; border-color: #dedede; margin-bottom: 20px; font-size: 1.55em; imbottitura: 11px 25px; padding-left: 55px; larghezza: 90%; colore: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inserito; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) all'interno; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) all'interno; transizione: border 0.15s linear 0s, box-shadow 0.15s linear 0s, colore 0.15s linear 0s; -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, colore 0.15s linear 0s; -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, colore 0.15s linear 0s; -o-transizione: bordo 0,15s 0s lineari, box-shadow 0,15s 0s lineari, colore 0,15s 0s lineari;  # hongkiat-form .txtinput: focus color: # 333; border-color: rgba (41, 92, 161, 0,4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1), 0 0 8px rgba (41, 92, 161, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inserto, 0 0 8px rgba (41, 92, 161, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1), 0 0 8px rgba (41, 92, 161, 0,6); contorni: 0 nessuno;

Per scegliere come target ogni elemento di testo ho usato la classe .txtInput. Ciascuna delle proprietà di transizione funziona su bordo, ombreggiatura e colore. sto usando dimensionamento della scatola: border-box; sul contenitore del modulo in modo che il riempimento non comprometta il nostro design reattivo.

Ho dovuto copiare su questi stessi stili e modificarli leggermente per la textarea. Ho modificato parte del padding e dei margini e ho aggiunto un'icona di sfondo unica.

 # hongkiat-form textarea display: block; font-family: "Helvetica Neue", Arial, sans-serif; border-style: solido; border-width: 1px; border-color: #dedede; margin-bottom: 15px; font-size: 1.5em; imbottitura: 11px 25px; padding-left: 55px; larghezza: 90%; altezza: 180 px; colore: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inserito; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) all'interno; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) all'interno; transizione: border 0.15s linear 0s, box-shadow 0.15s linear 0s, colore 0.15s linear 0s; -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, colore 0.15s linear 0s; -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, colore 0.15s linear 0s; -o-transizione: bordo 0,15s 0s lineari, box-shadow 0,15s 0s lineari, colore 0,15s 0s lineari;  # hongkiat-form textarea: focus color: # 333; border-color: rgba (41, 92, 161, 0,4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) all'interno, 0 0 8px rgba (40, 90, 160, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1), 0 0 8px rgba (40, 90, 160, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1), 0 0 8px rgba (40, 90, 160, 0,6); contorni: 0 nessuno;  # hongkiat-form textarea.txtblock background: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px non ripetizione;

Ingressi barra laterale

I pulsanti di opzione e le voci di menu selezionate sono molto più semplici. È possibile applicare effetti bagliore esterno e ombre esterne simili su questi elementi, ma non sempre ha un bell'aspetto. In alternativa i designer creeranno interfacce utente personalizzate e le collegheranno come immagini di sfondo. Ma questo potrebbe richiedere una soluzione alternativa a jQuery per mantenere le opzioni visualizzate correttamente.

 span.radiobadge display: block; margin-bottom: 8px;  span.radiobadge label font-size: 1.2em; imbottitura-fondo: 4px;  select.selmenu font-size: 17px; colore: # 676767; imbottitura: 9px! importante; border: 1px solid #aaa; larghezza: 200 px;

Non ho fatto molto per spingerli via dagli elementi di input principali. Un sacco di imbottiture extra è importante in modo che i tuoi utenti si sentano a loro agio a interagire con il modulo. Quando il testo è super piccolo, può essere una lotta solo per riempire ogni parte. Mantieni i caratteri grandi, ma non così grandi da sopraffare la pagina.

Pulsanti personalizzati

I pulsanti di reset e invio sono progettati in una classe a parte. Ho creato una serie di sfumature di luce che si adattano bene ai punti salienti del blu nei nostri campi modulo.

Di seguito è riportato il mio codice CSS per il pulsante di invio sullo stato standard e al passaggio del mouse.

 #buttons #submitbtn display: block; float: a sinistra; altezza: 3em; riempimento: 0 1em; bordo: 1px solido; contorni: 0; font-weight: bold; font-size: 1.3em; colore: #fff; text-shadow: 0px 1px 0px # 222; white-space: nowrap; word-wrap: normale; vertical-align: middle; cursore: puntatore; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border-color: # 5e890a # 5e890a # 000; -moz-box-shadow: inset 0 1px 0 rgba (256,256,256, .35); -ms-box-shadow: inset 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow: inset 0 1px 0 rgba (256,256,256, .35); box-shadow: inset 0 1px 0 rgba (256,256,256, .35); colore di sfondo: rgb (226,238,175); background-image: -moz-linear-gradient (in alto, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: -webkit-gradient (lineare, sinistra in alto, in basso a sinistra, color-stop (3%, rgb (226,238,175)), color-stop (3%, rgb (188,216,77)), color-stop (100 %, rgb (144,176,38))); background-image: -webkit-linear-gradient (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: -o-linear-gradient (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: -ms-linear-gradient (in alto, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: linear-gradient (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0);  #buttons #submitbtn: hover, #buttons #submitbtn: active border-color: # 7c9826 # 7c9826 # 000; colore: #fff; -moz-box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); sfondo: rgb (228,237,189); background: -moz-linear-gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); background: -webkit-gradient (lineare, sinistra in alto, in basso a sinistra, color-stop (2%, rgb (228,237,189)), color-stop (3%, rgb (207,219,120)), color-stop (100%, rgb ( 149,175,54))); background: -webkit-linear-gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); background: -o-linear-gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); background: -ms-linear-gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); sfondo: gradiente lineare (superiore, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0);

È quasi impossibile mantenere pulito questo tipo di selettore! Ci sono semplicemente troppe proprietà che devi elencare e supportare per molti browser legacy più vecchi. Internet Explorer può persino rendere questi gradienti con il filtro appropriato. Nota a parte i gradienti di sfondo, ho incluso anche un nuovo colore del bordo, angoli arrotondati e un'ombra di casella al passaggio del mouse.

Il pulsante di ripristino sembra simile ma ho seguito un percorso completamente diverso con la combinazione di colori. Il grigio chiaro tende a cadere sullo sfondo rispetto ai colori verde brillante. Il nostro pulsante di reset probabilmente non verrà usato molto, quindi non ha bisogno di tutte le attenzioni.

 #buttons #resetbtn display: block; float: a sinistra; color: # 515151; text-shadow: -1px 1px 0px #fff; margin-right: 20px; altezza: 3em; riempimento: 0 1em; contorni: 0; font-weight: bold; font-size: 1.3em; white-space: nowrap; word-wrap: normale; vertical-align: middle; cursore: puntatore; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background-color: #fff; background-image: -moz-linear-gradient (in alto, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); background-image: -webkit-gradient (lineare, sinistra in alto, in basso a sinistra, color-stop (2%, rgb (255,255,255)), color-stop (2%, rgb (240,240,240)), color-stop (100%, rgb (222.222.222))); background-image: -webkit-linear-gradient (in alto, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); background-image: -o-linear-gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); background-image: -ms-linear-gradient (in alto, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); background-image: linear-gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); border: 1px solid # 969696; box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); -moz-box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); -webkit-box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); text-shadow: 0 1px 1px rgba (255, 255, 255, 0,75);  #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0,75); colore: # 818181; background-color: #fff; background-image: -moz-linear-gradient (in alto, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: -webkit-gradient (lineare, sinistra in alto, in basso a sinistra, color-stop (2%, rgb (255,255,255)), color-stop (2%, rgb (244,244,244)), color-stop (100%, rgb (229.229.229))); background-image: -webkit-linear-gradient (in alto, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: -o-linear-gradient (in alto, rgb ( 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: -ms-linear-gradient (in alto, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: linear-gradient (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); border-color: #aeaeae; box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5);

Potresti anche abbandonare il tipo di ripristino e utilizzare questa combinazione di colori bianco / grigio come pulsante di invio principale. Ho usato molti degli stessi stili di sfumatura e di eliminare effetti ombra, insieme a un'ombra di testo per l'etichetta interna. Fornisce sicuramente una sensazione diversa all'esperienza dell'utente.

Modifiche al layout reattivo

Passando al mio altro file CSS, possiamo dare un'occhiata alle semplici query multimediali reattive che ho impostato. Qualsiasi finestra del browser sopra 800px sperimenterà l'interfaccia della barra laterale completa. Quando si scende al di sotto di questa soglia, la colonna di sinistra si espande al 100% della larghezza e gli elementi della barra laterale vengono visualizzati in basso.

 @media screen e (max-width: 800px) body padding: 10px 15px;  #container width: 100%;  # hongkiat-form #aligned width: 100%; float: none; blocco di visualizzazione;  # hongkiat-form #aside width: 100%; blocco di visualizzazione; float: none;  # hongkiat-form .txtinput, # hongkiat-form textarea width: 85%;  #prioritycase float: left; blocco di visualizzazione;  #recipientcase float: left; blocco di visualizzazione; margin-right: 55px;

Man mano che ci avviciniamo alla dimensione, cerco di adattare ciascuna delle forme di input. La proprietà width può finire più a lungo della stessa pagina Web e quindi abbiamo moduli di input che sporgono oltre il bordo. Questo accade intorno a 550px, che è dove interrompo la query successiva, insieme a entrambe le risoluzioni di visualizzazione dello schermo iPhone per verticale e orizzontale.

 / * dropoff schermo più piccolo ******* / @media solo schermo e (max-larghezza: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea width: 80%;  / * iPhone Landscape ******** / @media solo schermo e (larghezza massima: 480px) body padding: 10px 0px;  select.selmenu width: 190px;  / * iPhone portrait ******* / @media solo schermo e (max-larghezza: 320px) body padding: 10px 0px;  # hongkiat-form .txtinput, # hongkiat-form textarea width: 70%;  # hongkiat-form #aligned overflow: hidden;  select.selmenu width: 160px;  #recipientcase margin-right: 30px;

La modalità orizzontale orizzontale tiene ancora tutto insieme molto bene. Ho solo reso il menu di selezione a cascata un po 'più sottile per fare spazio ai pulsanti di opzione. Nella vista verticale, ho ridimensionato tutti gli elementi a larghezze molto più piccole. Ora il nostro codice non si romperà nemmeno nelle finestre ridimensionate del browser. Ma è bello avere il supporto per gli smartphone iOS / Android.

dimostrazione
Scarica il codice sorgente

Conclusione

Spero che questo tutorial sia stato informativo nello spiegare quanto può essere fatto sulle tue webform. Le nuove proprietà CSS3 sono abbastanza potenti per creare animazioni completamente funzionanti con solo poche righe di codice. È davvero un momento entusiasmante lavorare sullo sviluppo web e seguire queste tendenze.

Se hai idee o suggerimenti sul codice del tutorial, sentiti libero di condividerli con noi tramite la casella dei commenti qui sotto.