Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Form Design
Webdesign

Esperimenti CSS con l'input del form di ricerca e il bottone

by
Difficulty:IntermediateLength:LongLanguages:

Italian (Italiano) translation by Roberta C (you can also view the original English article)

In questo tutorial, mi piacerebbe esplorare come si può abbellire un modulo di ricerca semplice. Non farò niente di folle, esplorerò 4 diversi modi di come si può abbellire un input di ricerca con l'aiuto di transizioni CSS.

Abbiamo già una casella di ricerca di base

Nel file HTML bisogna creare un input di ricerca per iniziare. Se si dà un'occhiata al codice riportato di seguito si noteranno quattro cose diverse: un div .box, un .container-1 div. uno .icon e l'input di ricerca stesso.

Tutti e quattro gli esempi avranno una casella di ricerca – naturalmente – e anche un'icona di ricerca. Ciascuno dei quattro esempi sarà ospitato in un contenitore affinché possiamo manipolare ogni input di ricerca in modo indipendente. Infine, la casella div è responsabile di mantenere il contenitore centrato.

Aggiungere Font Awesome

Font Awesome è una libreria di icone. Si può imparare di più sul progetto sul sito di Font Awesome.

Il frammento di codice sopra è un esempio di come è possibile includere l'icona all'interno del markup. Tuttavia, affinché l'icona venga visualizzata è necessario includere anche un link alla libreria di Font Awesome, come mostrato nel frammento di codice qui di seguito. Includere questo link all'interno dell'head del documento.

Stili di base

Dobbiamo ora aggiungere alcuni stili in un foglio di stile separato (che avrete anche bisogno di linkare dall'interno della head del documento).

In questo frammento di codice CSS stiamo aggiungendo alcuni stili di base alla pagina. Lo stile delle caselle di ricerca sarà color blu marino, quindi lo sfondo del body dovrebbe essere bianco. La classe del box è anche stata centrata nella pagina per il tutorial.

Abbellire la casella di ricerca

Questo tutorial parla di come imparare ad abbellire le caselle di ricerca. In questo primo esempio spiego cosa sta succedendo nel dettaglio; Voglio assicurarmi che sappiate esattamente cosa sta succedendo. Nei restanti tre esempi, semplicemente vi mostrerò come ottenere le varie transizioni.

#1. Dissolvenza dello sfondo

Il primo esempio che ci accingiamo ad affrontare è quello di modificare lo sfondo dell'input di ricerca al passaggio del mouse. Aggiungeremo anche una transizione affinché il cambiamento non sia stridente.

Il codice HTML

Abbiamo già visto il codice HTML per il markup di base. Questo frammento di codice sarà simile per tutti gli esempi.

Il CSS

Al fine di avviare lo styling abbiamo bisogno di definire lo stile CSS della casella di ricerca. Aggiungiamo tutte le diverse regole CSS ad una ad una, quindi sapremo esattamente cosa sta succedendo.

In primo luogo, vogliamo cambiare lo stile della classe del container. La proprietà più importante è senza dubbio posizion: relative. Questa è impostata in modo specifico in modo che l'icona può essere posizionata sopra l'input, come si vedrà a breve.

Input

Ora vogliamo cambiare lo stile dell'attuale input. Tutto quanto sopra è puramente estetica come il colore di sfondo o il bordo e non affetta le funzioni dell'input. Prendere nota proprietà padding sinistro. C'è per fare spazio all'icona in modo che non stia letteralmente in cima al testo all'interno dell'input.

Qui di seguito abbiamo quattro regole diverse che colorano il testo segnaposto, che nel nostro esempio è Search. Purtroppo, le regole devono essere separate  per i prefissi individuali e non possono essere incluse in una breve regola scritta. È un po' fastidioso e lo rivedrete ripetuto in ogni esempio!

Icona

Infine, stilizziamo l'icona. Soprattutto definiamo la posizione che deve essere sopra l'input impostando position: absolute. I margini aiutano a posizionare l'icona oltre ad impostare la sua posizione superiore a 50%.

Aggiunta di effetti hover

Il prossimo set di regole che dobbiamo creare è ciò che accade al box di ricerca al passaggio del mouse. In questo esempio vogliamo solo cambiare il colore dello sfondo. Al fine di sbarazzarsi del bagliore giallo o blu attorno all'input (che alcuni browser a volte aggiungono) impostare outline: none.

Come si vede nel frammento precedente, abbiamo aggiunto due ulteriori stati – focus e active. In questo modo l'effetto non scompare quando sull'input l'hover termina. E ancora più importante, l'effetto è prominente quando l'input è in uso.

Creare la transizione

Al fine di realizzare la transizione abbiamo bisogno di aggiungere alcune righe di codice. Torniamo alla regola dove abbiamo definito lo stile dell'input - .container-1 input #search. Prima della chiusura della parentesi aggiungere il seguente frammento:

Stiamo definendo la struttura della proprietà di transizione, ma invece potremmo definire questi tre parametri separatamente. In primo luogo, stiamo dicendo che la transizione dovrebbe riguardare solo la proprietà background. Poi, stiamo dicendo che la transizione dovrebbe durare un po ' più di mezzo secondo. Infine, definiamo l'effetto di transizione come easing. L'effetto ease non è l'unico che potrebbe funzionare qui, avremmo potuto usare anche linear o ease-in, ad esempio. Semplicemente sarebbe risultato un po' diverso. Provate voi stessi per vedere se vi piace di più.

Lo stile di input dovrebbe ora essere simile al codice riportato di seguito.

Come lavorano le transizioni CSS?

Se non si conosce nulla sulle transizioni CSS, ecco una breve panoramica. In primo luogo, per fare in modo che le transizioni funzionino la proprietà deve essere definita nello stato predefinito e non nell'hover, nell'active o nel focus.

Le transizioni CSS permettono gradualmente di cambiare effetto ed è possibile definire parametri specifici di controllo, ad esempio, la durata della transizione e il tipo di transizione. Si possono avere molteplici transizioni per un singolo elemento. Ma, soprattutto, si devono sempre includere prefissi per i vari browser, visto che il supporto per questa proprietà non è ancora universale.

Per ulteriori informazioni dare un'occhiata: Transizioni e trasfomazioni CSS3 da zero

#2. Espandere l'Input al passaggio del mouse

In questo esempio la ricerca mostra solo la relativa icona. Quando si passa il mouse sopra l'icona, la ricerca si espanderà e sarà possibile quindi digitare la query. La maggior parte del codice in questo esempio è molto simile a quello precedente.

Il codice HTML

Il CSS

Lo stile dell'input per questa transizione è diverso. L'input è significativamente più piccolo affinché l'icona possa apparire dietro un quadrato. Tutte le rimanenti proprietà, come colore di sfondo o del carattere, sono gli stessi, non vogliamo cambiare completamente lo stile del box di ricerca.

Come si può vedere anche io ho ridefinito la proprietà di transizione per cambiare solo la larghezza. Ho mantenuto lo stesso  tempo perché è abbastanza veloce da non infastidire gli utenti, ma abbastanza a lungo per creare un bell'effetto.

Di seguito è riportato il codice per ricolorare il testo segnaposto.

E ancora una volta abbiamo lo stile CSS dell'icona. Dovrebbe essere lo stesso dell'esempio precedente.

Aggiungere effetti al passaggio del mouse

L'ultima cosa che dobbiamo fare è quello di definire come la ricerca si presenta quando si trova nello stato hover. Nel frammento di codice riportato di seguito la prima regola fa in modo che il modulo non abbia il bagliore indotto dal browser e che, quando si utilizza l'input – quando si digita in esso – il box di ricerca rimanga espanso. La regola centrale espande solo l'input per la larghezza al passaggio del mouse.

L'ultima cosa che accade nel codice precedente è che l'icona al passaggio del mouse cambia colore. È solo un piccolo dettaglio per far visualizzare rapidamente all'utente che il box di ricerca è attivo e funzionante, e non un input inattivo. Il cambiamento non è implementato da una transizione.

#3. Aumentare la dimensione dell'icona al passaggio del mouse

Di tutti i quattro esempi, questo è il più sottile, sia in termini di codice, sia per l'effetto visivo. In questo caso l'icona si solleva leggermente e aumenta di dimensione.

Il codice HTML

Ancora una volta il markup HTML dell'icona e la casella di ricerca sono gli stessi dei due esempi precedenti. L'eccezione, naturalmente, è .container-3.

Il CSS

Il CSS di questo esempio non è niente di speciale. Per la maggior parte è come i primi esempi dove lo stato predefinito non differisce affatto. Di seguito è riportato il codice per il container e l'input. Notare che non c'è nessuna transizione intorno all'input questa volta.

Ancora una volta abbiamo le regole del placeholder.

Ora, per il suo aspetto, l'icona per questo esempio è la stessa. È dello stesso colore, nella stessa posizione e così via. Tuttavia, ho aggiunto una transizione ad essa. Queste transizioni racchiudono le proprietà, che è un approccio più breve, piuttosto che scriverle individualmente.

Aggiunta di effetti al passaggio del mouse

Ci sono un paio di cose che accadono nel suddetto codice. In primo luogo, stiamo cambiando il colore dell'icona al passaggio del mouse e la spostiamo un po' più in alto, così che sia centrata verticalmente quando è più grande. In secondo luogo aggiungiamo una trasformazione all'icona al passaggio del mouse che in realtà è 1,5 volte le dimensioni originali. Poiché la transizione definita in precedenza è stata impostata su tutte le proprietà, sembra che l'icona cresca di dimensioni al passaggio del mouse.

Ancora una volta, dare un'occhiata a Transizioni e Trasfomazioni CSS da Zero per saperne di più circa la proprietà di trasformazione.

#4. Il bottone al passaggio del mouse

A differenza degli ultimi tre esempi, quest'ultimo sarà un po' più complesso. Al passaggio del mouse, un pulsante si sposta in cima all'input per farti fare delle azioni – come Send o Go. Il pulsante avrà all'interno l'icona.

Il codice HTML

Qui il codice HTML è un po' diverso. L'input è ancora lì, naturalmente, ma l'icona è ora all'interno di un elemento di tipo bottone che viene dopo l'input. È importante che il bottone si trovi dopo l'input, per quanto riguarda ciò che si creerà con l'effetto hover in CSS.

Il CSS

Il CSS in questo esempio è diverso quindi attenzione! Di seguito ecco il frammento per lo styling del container. In primo luogo, position: relative è mancante; non è più importante perché l'icona non si basa più su di esso per essere posizionata sopra l'input. Tuttavia, abbiamo overflow: hidden. Questo impedisce che il bottone sia visualizzato quando non c'è il passaggio del mouse. Tecnicamente il pulsante che viene visualizzato è presente a destra dell'input, ma grazie a overflow: hidden non è mostrato quando arriva oltre la larghezza del contenitore, il contenitore e l'input sono della stessa larghezza.

Sotto l'input non ha la transizione perché non è l'elemento ad essere colpito questa volta.

Il frammento per ricolorare il placeholder è il prossimo.

Di seguito è riportato il codice per lo stile del bottone che appare al passaggio del mouse. Il trucco è metterlo proprio dietro l'input e renderlo invisibile a meno che non si passi sopra il mouse. Il bottone è l'elemento che si modifica - si muove – pertanto è quello nel quale è defiinita la transizione. Per rendere le cose più semplici, ho definito la transizione per tutte le proprietà.

Aggiunta di effetti al passaggio del mouse

Per far svanire il pulsante, bisogna spostarlo in cima all'input. Che avviene attraverso il margine negativo. Precedentemente abbiamo impostato l'opacità del pulsante su 0 quindi abbiamo dovuto ripristinarla ad 1 per fare in modo che il bottone possa essere visibile di nuovo.

L'ultima regola cambia solo lo sfondo del bottone se si passa il mouse sopra di esso. È bene informare un utente che il bottone è attivo e si può cliccare per far partire la ricerca; non c'è nessun vantaggio ad avere un bottone se risulta inattivo.

Conclusione

Beh, questo ci porta alla fine dei nostri esperimenti CSS! Abbiamo preso un input del form di ricerca di base e utilizzato una piccola selezione di effetti per modificarne il comportamento. Altrimenti cosa avreste suggerito di cambiare in un input di ricerca come questo? A quali altri aspetti di esso sono applicabili transizioni CSS o trasformazioni? Fatecelo sapere nei commenti!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.