Share
In questo tutorial, mi piacerebbe esplorare come è possibile abbellire un semplice modulo di ricerca. Non faremo nulla di pazzo, esplorando invece quattro diversi aspetti su come si può ottenere un input di ricerca con l'aiuto delle transizioni CSS.
Se desideri una soluzione già pronta, puoi trovare alcune fantastiche transizioni CSS su Envato Market che ti consentono di creare una varietà di effetti in modo rapido e semplice. Oppure puoi assumere uno sviluppatore su Envato Studio.
Nel tuo file HTML avrai bisogno di creare un input di ricerca per iniziare. Se dai un'occhiata al codice qui sotto, noterai quattro cose diverse: a .scatola div, a .Contenitore-1 div, un .icona, e l'input di ricerca stesso.
Tutti e quattro gli esempi avranno una casella di ricerca, naturalmente, nonché un'icona di classe alla ricerca. Ciascuno dei quattro esempi sarà alloggiato in un contenitore in modo da poter manipolare l'input di ricerca in modo indipendente. Infine, il div box è responsabile del mantenimento del centraggio del contenitore.
Font Awesome è una libreria di icone. Puoi saperne di più sul progetto sul sito Web di Font Awesome.
Lo snippet di codice sopra riportato è un esempio di come è possibile includere l'icona all'interno del markup. Tuttavia, per far apparire l'icona devi anche includere un link alla libreria Font Awesome, dimostrata nello snippet seguente. Includi questo link all'interno del tuo documento.
Ora aggiungeremo alcuni stili in un foglio di stile separato (al quale dovrai collegare anche dall'interno del documento).
body background: # 343d46; .box margin: 100px auto; larghezza: 300 px; altezza: 50 px;
Nello snippet CSS di cui sopra stiamo aggiungendo alcuni stili di base alla pagina. Lo stile delle caselle di ricerca sarà colorato in modo che lo sfondo del corpo non sia completamente bianco. Anche la classe della scatola viene centrata nella pagina per il bene del tutorial.
Questo tutorial riguarda l'apprendimento di come abbellire le caselle di ricerca. In questo primo esempio spiegherò cosa sta succedendo in modo più dettagliato; Voglio assicurarmi di sapere esattamente cosa sta succedendo. Nei restanti tre esempi, ti mostrerò semplicemente come raggiungere le varie transizioni.
Il primo esempio che affronteremo è modificare lo sfondo dell'input di ricerca su hover. Aggiungiamo anche una transizione in modo che il cambiamento non stia sconvolgendo.
Hai già visto l'HTML per il markup di base. Questo snippet sarà simile per tutti gli esempi.
Per iniziare lo styling è necessario definire lo stile CSS della casella di ricerca stessa. Aggiungiamo tutte le varie regole CSS una per una in modo da sapere esattamente cosa sta succedendo.
.container-1 width: 300px; allineamento verticale: medio; white-space: nowrap; posizione: relativa;
Per prima cosa, vogliamo definire la classe del contenitore. La proprietà più importante è discutibilmente posizione: relativa. Questo è impostato in modo tale che l'icona possa essere posizionata sopra l'input come vedrai tra poco.
.contenitore # 1 input # search width: 300px; altezza: 50 px; sfondo: # 2b303b; confine: nessuno; font-size: 10pt; fluttuare: a sinistra; colore: # 63717f; padding-left: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
Quindi vogliamo modellare l'input effettivo. Tutto quanto sopra è puramente estetico poiché il raggio del bordo o il colore di sfondo non influiscono sul modo in cui l'input funziona. Prendi nota della proprietà padding sinistra. È lì per fare spazio all'icona in modo che non sia letteralmente in cima al testo all'interno dell'input.
Di seguito abbiamo quattro diverse regole che colorano il testo segnaposto, che nel nostro esempio è Ricerca. Le regole purtroppo devono essere separate per i singoli prefissi dei fornitori e non possono essere consolidate in una regola scritta abbreviata. È un po 'fastidioso e vedrai questo ripetuto in ogni esempio!
.container-1 input # search :: - webkit-input-placeholder color: # 65737e; .container-1 input # search: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-1 input # search :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-1 input # search: -ms-input-placeholder color: # 65737e;
Infine, modelleremo l'icona. Soprattutto, stiamo impostando la sua posizione in modo che venga posizionata sopra l'input impostandone la sua posizione: assoluta. I margini aiutano a posizionare l'icona oltre a impostare la sua posizione superiore a 50%.
.container-1 .icon position: absolute; superiore: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; colore: # 4f5b66;
La prossima serie di regole che dobbiamo creare è ciò che accade alla casella di ricerca al passaggio del mouse. In questo esempio vogliamo solo cambiare il colore di sfondo. Al fine di eliminare il bagliore giallo o blu attorno all'input (che a volte i browser aggiungono) impostato contorni: nessuno.
.ricerca di input # container-1: hover, .container-1 input # search: focus, .container-1 input # search: active outline: none; sfondo: #ffffff;
Come vedi nello snippet sopra riportato, abbiamo aggiunto due stati aggiuntivi - messa a fuoco e attivo. In questo modo l'effetto non scompare quando smetti di stazionare sull'input. Ancora più importante, l'effetto è importante anche quando l'input è in uso.
Per rendere possibile la transizione, dobbiamo aggiungere alcune righe di codice. Tornare completamente alla regola in cui abbiamo definito lo stile dell'input - .ricerca # di input container-1. Prima delle parentesi di chiusura aggiungi il seguente snippet:
-transizione webkit: background .55s facilità; -moz-transition: background .55s easy; -ms-transition: background .55s facilità; -o-transizione: background .55s facilità; transizione: background .55s facilità;
Stiamo definendo la stenografia della proprietà di transizione, ma potremmo invece definire questi tre parametri singolarmente. In primo luogo, stiamo dicendo che la transizione dovrebbe riguardare solo la proprietà dello sfondo. Successivamente, stiamo dicendo che la transizione dovrebbe richiedere poco più di mezzo secondo. Infine, definiamo l'effetto di transizione da facilitare. Il alleviare non è l'unico effetto che avrebbe funzionato qui, potremmo anche averlo usato lineare o facilità in, per esempio. Semplicemente sarebbe sembrato un po 'diverso. Provalo tu stesso per vedere se ti piacciono di più.
Lo stile di input dovrebbe apparire come il seguente codice.
.contenitore # 1 input # search width: 300px; altezza: 50 px; sfondo: # 2b303b; confine: nessuno; font-size: 10pt; fluttuare: a sinistra; colore: # 262626; padding-left: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: background .55s facilità; -moz-transition: background .55s easy; -ms-transition: background .55s facilità; -o-transizione: background .55s facilità; transizione: background .55s facilità;
Se non sai nulla delle transizioni CSS, lascia che ti dia una breve panoramica. Innanzitutto, affinché la transizione funzioni, la proprietà deve essere definita nello stato predefinito e non al passaggio del mouse o attivo o attivo.
Le transizioni CSS consentono di modificare gradualmente l'effetto ed è possibile definire parametri specifici da controllare, ad esempio quali proprietà saranno interessate, la durata della transizione e il tipo di transizione. È possibile impostare più transizioni per un elemento. Ma, soprattutto, dovresti sempre includere i prefissi dei fornitori per poter ospitare i vari browser, poiché il supporto per questa proprietà non è ancora universale.
Per maggiori informazioni date un'occhiata a: CSS3 Transitions And Transforms From Scratch
In questo esempio la ricerca inizierà come solo l'icona del vetro. Quando si passa con il mouse sopra l'icona, la ricerca si espanderà al punto in cui è possibile digitare la query. La maggior parte del codice in questo esempio sarà molto simile all'esempio precedente.
.container-2 width: 300px; allineamento verticale: medio; white-space: nowrap; posizione: relativa;
Lo stile di input per questa transizione è diverso. L'input è significativamente più piccolo in modo che l'icona possa apparire dietro un quadrato. Tutte le proprietà rimanenti, come lo sfondo o il colore del carattere, sono le stesse di quelle che non vogliamo modificare completamente lo stile della ricerca.
.container-2 input # search width: 50px; altezza: 50 px; sfondo: # 2b303b; confine: nessuno; font-size: 10pt; fluttuare: a sinistra; colore: # 262626; padding-left: 35px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; colore: #fff; -webkit-transition: larghezza .55s facilità; -moz-transizione: larghezza .55s facilità; -ms-transizione: larghezza .55s facilità; -o-transizione: larghezza .55s facilità; transizione: larghezza .55s facilità;
Come puoi vedere, ho ridefinito la proprietà di transizione per influenzare solo la larghezza. Ho mantenuto il tempo uguale perché è abbastanza veloce da non infastidire gli utenti, ma abbastanza a lungo da creare un buon effetto.
Di seguito è riportato il codice per ricolorare il testo segnaposto.
.container-2 input # search :: - webkit-input-placeholder color: # 65737e; .container-2 input # search: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-2 input # search :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-2 input # search: -ms-input-placeholder color: # 65737e;
E ancora una volta abbiamo l'icona stile CSS. Dovrebbe essere lo stesso dell'esempio precedente.
.container-2 .icon position: absolute; superiore: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; colore: # 4f5b66;
L'ultima cosa che dobbiamo fare è definire come apparirà la ricerca al momento del passaggio del mouse. Nello snippet sotto la prima regola si assicura che il modulo non abbia il bagliore indotto dal browser e che quando si utilizza l'input - quando si digita in esso - la casella di ricerca rimanga espansa. La regola centrale espande l'input a tutta larghezza su hover.
.ricerca di input # container-2: focus, .container-2 input # search: active outline: none; larghezza: 300 px; .container-2: hover input # search width: 300px; .container-2: hover .icon color: # 93a2ad;
L'ultima cosa che accade nel codice precedente è che al passaggio del mouse l'icona cambia colore. È solo un piccolo dettaglio per mostrare rapidamente all'utente che la casella di ricerca è attiva e funzionante, piuttosto che un input inattivo. Il cambiamento non è implementato da una transizione.
Tra tutti e quattro gli esempi, questo è il più sottile, sia in termini di codice che di effetti visivi. In questo caso, l'icona dello schermo di vetro si aprirà leggermente e aumenterà di dimensioni.
Ancora una volta il markup HTML dell'icona e della casella di ricerca è lo stesso dei due esempi precedenti. L'eccezione, ovviamente, è il .Contenitore-3.
Il CSS per questo esempio non è niente di speciale. Per la maggior parte inizia molto simile ai primi esempi in cui lo stato predefinito non è affatto diverso. Di seguito è riportato il codice per il contenitore e l'input. Notare che questa volta non c'è transizione sull'input.
.container-3 width: 300px; allineamento verticale: medio; white-space: nowrap; posizione: relativa; .container-3 input # search width: 300px; altezza: 50 px; sfondo: # 2b303b; confine: nessuno; font-size: 10pt; fluttuare: a sinistra; colore: # 262626; padding-left: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; colore: #fff;
Ancora una volta abbiamo le regole del segnaposto.
.container-3 input # search :: - webkit-input-placeholder color: # 65737e; .container-3 input # search: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-3 input # search :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-3 input # search: -ms-input-placeholder color: # 65737e;
Ora, a quanto sembra, l'icona per questo esempio è la stessa. È lo stesso colore, la stessa posizione e così via. Tuttavia, ho aggiunto una transizione ad esso. Queste transizioni prendono di mira tutte le proprietà, che è un approccio più corto piuttosto che ortografarle singolarmente.
.container-3 .icon position: absolute; superiore: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; colore: # 4f5b66; -webkit-transition: all .55s facilità; -moz-transition: tutti gli .55s si adattano; -ms-transizione: tutti gli .55s si adattano; -o-transizione: tutti gli .55s si rilassano; transizione: tutti gli .55 si adattano;
.ricerca di input # container-3: focus, .container-3 input # search: active outline: none; .container-3: hover .icon margin-top: 16px; colore: # 93a2ad; -webkit-transform: scala (1.5); / * Safari e Chrome * / -moz-transform: scale (1.5); / * Firefox * / -ms-transform: scale (1.5); / * IE 9 * / -o-transform: scala (1.5); / * Opera * / transform: scale (1.5);
Ci sono un paio di cose che accadono nel codice sopra. In primo luogo, stiamo cambiando il colore dell'icona al passaggio del mouse e lo spostiamo un po 'più in alto in modo che sia centrato verticalmente quando è più grande. In secondo luogo stiamo aggiungendo una trasformazione all'elemento icona su hover in modo che sia in realtà 1,5 volte la sua dimensione originale. Perché la transizione precedentemente definita è stata impostata per avere un impatto tutti proprietà, sembra che l'icona cresca di dimensioni al passaggio del mouse.
Ancora una volta, date un'occhiata a CSS3 Transitions And Transforms From Scratch per ulteriori informazioni sulla proprietà di trasformazione.
A differenza degli ultimi tre esempi, questo sarà più complesso. Al passaggio del mouse, un pulsante scorrerà sulla parte superiore dell'input per consentire di procedere, un po 'come Inviare o Partire. Il pulsante avrà l'icona di vetro di sguardo al suo interno.
Qui l'HTML è un po 'diverso. L'input è ancora lì, ovviamente, ma l'icona è ora all'interno di un elemento del pulsante che viene dopo l'input. È importante che il pulsante sia dopo l'input in relazione a come l'effetto hover verrà creato nei CSS.
Il CSS in questo esempio è diverso quindi fai attenzione! Di seguito è riportato lo snippet per lo styling del contenitore. Primo, posizione: relativa manca; non è più importante in quanto l'icona non si basa su di essa per essere posizionata in cima all'input. Tuttavia, abbiamo overflow: hidden. Questo impedisce al pulsante di apparire quando non è al passaggio del mouse. Tecnicamente il pulsante che appare è presente a destra dell'input, ma grazie a overflow: hidden non viene visualizzato quando cade oltre la larghezza del contenitore: il contenitore e l'input hanno la stessa larghezza.
.container-4 overflow: hidden; larghezza: 300 px; allineamento verticale: medio; white-space: nowrap;
Sotto l'input non ha la transizione perché non è l'elemento che viene colpito questa volta.
.container-4 input # search width: 300px; altezza: 50 px; sfondo: # 2b303b; confine: nessuno; font-size: 10pt; fluttuare: a sinistra; colore: #fff; padding-left: 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
Il snippet per ricolorare i segnaposto è il prossimo.
.container-4 input # search :: - webkit-input-placeholder color: # 65737e; .container-4 input # cerca: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-4 input # search :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-4 input # search: -ms-input-placeholder color: # 65737e;
Di seguito è riportato il codice per lo stile del pulsante che appare al passaggio del mouse. Il trucco per farlo scorrere lateralmente è posizionarlo proprio dietro l'input e renderlo invisibile a meno che non si trovi al passaggio del mouse. Il pulsante è l'elemento che cambia - si sposta - quindi è quello in cui è definita la transizione. Per semplificare le cose, ho identificato la transizione verso l'impatto di tutte le proprietà.
.container-4 button.icon -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; confine: nessuno; sfondo: # 232833; altezza: 50 px; larghezza: 50 px; colore: # 4f5b66; opacità: 0; font-size: 10pt; -webkit-transition: all .55s facilità; -moz-transition: tutti gli .55s si adattano; -ms-transizione: tutti gli .55s si adattano; -o-transizione: tutti gli .55s si rilassano; transizione: tutti gli .55 si adattano;
Per dissolvere il pulsante, è necessario spostarlo sopra l'input. Questo è fatto attraverso il margine negativo. In precedenza abbiamo impostato l'opacità del pulsante su 0 quindi dobbiamo resettarlo a 1 in modo che anche il pulsante possa essere visibile.
L'ultima regola cambia solo lo sfondo del pulsante se passi il mouse sopra il pulsante. È bene far sapere a un utente che il pulsante è attivo e puoi cliccarlo per inviare la ricerca; non ha senso avere un pulsante se appare inattivo.
.container-4: hover button.icon, .container-4: button.icon attivo, .container-4: focus button.icon outline: none; opacità: 1; margin-left: -50px; .container-4: hover button.icon: hover background: white;
Bene, questo ci porta alla fine dei nostri esperimenti CSS! Abbiamo utilizzato un modulo di ricerca di base e utilizzato una piccola selezione di effetti per modificarne il comportamento. In quale altro modo suggeriresti di cambiare un input di ricerca come questo? In quali altri aspetti applicheresti le transizioni o le trasformazioni CSS? Fateci sapere nei commenti!
Abbiamo creato una guida completa per aiutarti a imparare i CSS, se hai appena iniziato con le nozioni di base o se vuoi esplorare CSS più avanzati.
Accentsconagua