Esperimenti CSS con il modulo di ricerca. Costruire la barra di ricerca perfetta

Sono stato criticato, dicono, il layout fa schifo, ci sono i moderni HTML5 e CSS3.

Certo, capisco, gli ultimi standard sono fantastici e tutto il resto. Ma il fatto è che, di regola, mi trucco su ordinazione e, nella maggior parte dei casi, l'identità completa in diversi browser è importante, il che non consente di utilizzare le ultime tecnologie. Pertanto, mi concentro principalmente sulla compatibilità tra browser e il modulo di ricerca, per abitudine, è stato strutturato "alla vecchia maniera".

In generale, con questo post correggo la situazione (per motivi di insoddisfazione dell'articolo precedente =) e offro la mia versione del layout dello stesso modulo di ricerca, ma utilizzando le tecnologie HTML5 e CSS3.

Un esempio di quale sarà il risultato è possibile.

Cosa perdiamo quando disponiamo questo modulo utilizzando HTML5 e CSS3

1. IE9 e versioni precedenti: non vedranno il testo predefinito (attributo segnaposto).
2. IE8 e versioni precedenti non vedranno gli angoli arrotondati e le ombre interne.
3. IE7 - devi specificare una larghezza del modulo diversa per questo, perché non supporta la proprietà box-sizing.
4. IE6 - ma non lo teniamo affatto in considerazione =)

In altri browser moderni, va tutto bene. Credo che le carenze di cui sopra non siano critiche, quindi per il mio sito utilizzerei audacemente un modulo realizzato utilizzando le ultime tecnologie.

Modulo di ricerca html

Sembra così:

Rispetto al modulo dell'articolo precedente, sono state apportate le seguenti modifiche secondo la tecnologia HTML5:

1. L'attributo type = "testo" è stato sostituito con type = "ricerca".
2. Script in linea sostituito con segnaposto = "(! LANG: search" .!}

Codice CSS

Ecco tutti gli stili richiesti con commenti:

Cerca (/ * imposta la larghezza del modulo richiesta in base al design ** il modulo si allunga senza problemi * / larghezza: 35%; / * posizioneremo il pulsante di invio in modo assoluto, ** quindi questa proprietà è necessaria * / posizione: relativa; . Cerca input ( / * disabilita i bordi per gli input * / border: nessuno;) / * stili per il campo di input * / .search .input (/ * estende il campo di input all'intera larghezza del modulo * / width: 100 %; / * a scapito del riempimento superiore (8px) e inferiore (9px) ** regolare l'altezza del modulo ** rendere il riempimento a destra (37 px) più grande di quello sinistro ** perché il pulsante di invio sarà posizionato lì * / padding: 8px 37px 9px 15px; / * in modo che la larghezza del campo di input (100%) includa il padding * / -moz-box-sizing: border-box; box-sizing: border-box; / * aggiungi ombre interne * / box-shadow: inset 0 0 5px rgba (0,0 , 0,0.1), inset 0 1px 2px rgba (0,0,0,0.3); / * angoli arrotondati * / border-radius: 20px ; sfondo: #EEE; font: 13px Tahoma, Arial, sans-serif; colore: # 555; contorno: nessuno; ) / * cambia l'aspetto del campo di input su focus * / .search .input: focus (box-shadow: inset 0 0 5px rgba (0,0,0,0.2), inset 0 1px 2px rgba (0,0, 0,0.4 ); background: # E8E8E8; color: # 333;) / * decora il pulsante di invio * / .search .submit (/ * posiziona il pulsante assolutamente dal bordo destro del form * / position: absolute; top: 0; destra: 0; larghezza: 37px; / * allunga il pulsante fino all'intera altezza del modulo * / altezza: 100%; cursore: puntatore; sfondo: url (https://lh4.googleusercontent.com/-b- 5aBxcxarY/UafFW9lVyjI/AAAAAAAABUg/gQtEXuPuIds/s13/go.png) 50% no-repeat; / * aggiungi trasparenza al pulsante di invio * / opacità: 0,5;) / * al passaggio del mouse, cambia la trasparenza del pulsante di invio * / . search .submit: hover (opacity: 0.8;) / * questa proprietà è necessaria in modo che nei browser ** Chrome e Safari sia possibile applicare uno stile agli input * / input (-webkit-appearance: none;)

E stili per IE sotto la versione 9:

/ * imposta stili separati per i browser IE sotto la versione 9 * / * + html .search (/ * per IE7 regoliamo la larghezza su altri browser e aggiungiamo un ** padding destro per far sì che il pulsante di invio cada in posizione * / larghezza: 28 %; padding: 0 52px 0 0;) .search .input (border: 1px solido #DFDFDF; border-top: 1px solido # B3B3B3; padding-top: 7px; padding-bottom: 8px;) .search .input: focus (border: 1px solido #CFCFCF; border-top: 1px solido # 999;) .search .submit (filtro: alpha (opacità = 50);) .search .submit: hover (filtro: alpha (opacità = 80);)

P.S. Grazie ai critici per i commenti al precedente articolo! Grazie a te, ho alcuni nuovi momenti di layout nella mia testa.

Compito

Posiziona il pulsante di invio all'interno della casella di testo.

Soluzione

Dovrebbe essere chiaro che non è possibile aggiungere direttamente un pulsante all'interno di un campo modulo. Pertanto, qualsiasi metodo imita solo questo effetto. Per creare una tale illusione, rimuovi il bordo originale attorno alla casella di ricerca e aggiungilo all'elemento che contiene la casella e il pulsante. Questo metodo funziona meglio quando tutte le dimensioni sono fisse. Nell'esempio 1, la larghezza totale del modulo è 300 pixel, il campo è 274 pixel e il pulsante è 20 pixel. La larghezza del campo viene selezionata tenendo conto del fatto che non si verifica alcuna sillabazione nel modulo, ciò influirà negativamente sull'aspetto generale.

I browser Safari e Chrome richiederanno alcune aggiunte al codice CSS. Dopo aver messo a fuoco, i campi del modulo vengono evidenziati con un bordo colorato, che distrugge la nostra illusione di un singolo campo. Per evitare che ciò accada, nello stile della casella di ricerca, aggiungi un contorno con un valore nessuno, questo bloccherà l'aspetto del bordo nei browser specificati. Intorno alla casella di ricerca ( ) rimarrà in ogni caso un bordo sottile, eliminabile tramite la specifica proprietà -webkit-appearance, sempre con valore nullo.

Esempio 1. Modulo di ricerca

HTML5 CSS 2.1 IE Cr Op Sa Fx

Il risultato dell'esempio è mostrato in Fig. uno.

Riso. 1. Visualizzazione del campo di ricerca con un pulsante

Il pulsante stesso può essere aggiunto in diversi modi. Ad esempio, rendilo un normale pulsante con la scritta, attraverso o, come nell'esempio sopra, come pulsante con un'immagine di sfondo.

Oggi ti suggerisco di fare un bel modulo di ricerca CSS. D'accordo, il design standard dei moduli in html non è impressionante, ma oggi creeremo un modulo di caramelle. Ho trovato questo per questo articolo:

Ti mostrerò passo dopo passo, dalla a alla z, come creare una forma del genere. Puoi scaricare i layout psd di questa e altre due bellissime forme qui per ritagliare le immagini necessarie in seguito.
https://ideasplayer.com/2011/12/free-custom-search-boxes-psd/

Passaggio 1: markup del modulo html

Per prima cosa, creiamo la forma stessa. Consisterà di due campi: un normale campo di immissione del testo e un pulsante immagine, che definiremo in seguito.

Mentre tutto questo sembra molto triste:

Passaggio 2: ritaglia le immagini desiderate dal layout

Ritaglierò 2 immagini per creare la forma.
Il primo è il campo di input e il pulsante stesso. Per fare ciò, disattiva i livelli con il testo e l'icona di ricerca, il resto può essere selezionato e salvato per il Web, solo che deve essere in formato png-24 per preservare la trasparenza.

Ora disabilito tutto tranne l'icona di ricerca e la salvo. Ecco una foto che ho ricevuto. Ho chiamato le immagini btn.png e icon.png e le ho messe nella cartella con i file html e css. Ora puoi lavorare ulteriormente.

Passaggio 3: lavorare in CSS

È ora di iniziare a scrivere codice CSS. Iniziamo con le regole per l'elenco dei campi stesso:

Ricerca (sfondo: url (btn.png) senza ripetizione in alto a sinistra; larghezza: 268 px; altezza: 57 px; stile elenco: nessuno;)

1. con la proprietà background ho impostato l'immagine del pulsante e il campo di input, proibito la ripetizione, posizionamento a sinistra e sopra
2. Ho impostato la larghezza e l'altezza in base alla dimensione dell'immagine tagliata
3. stile elenco proprietà: nessuno rimuove i marcatori dagli elementi

Sembra terribile finora, vero? Ma niente, ora lo faremo normalmente.

Passaggio 4: modellare il campo di inserimento del testo

E subito, ecco il codice che ho scritto per modellare il campo di inserimento del testo.

Input di ricerca (bordo: nessuno; sfondo: trasparente; margine: 15 px -20 px 3 px -15 px; larghezza: 170 px; padding: 5 px; dimensione carattere: 14 px;)

Nota che ho usato un selettore di attributi per fare riferimento al campo di input. Per farti capire di cosa si tratta, ti consiglio di leggere.

In che modo questo codice ha aiutato? Ha reso il campo di input simile a questo:

Cioè, qui puoi stampare direttamente al suo interno, tutto viene visualizzato magnificamente:

E ora spiego questo codice:

1. border: nessuno - con questa proprietà rimuoviamo il bordo dal campo di input, non abbiamo bisogno di tutte queste cornici e sfondi, perché tutto è già nell'immagine stessa, quindi, con la proprietà background: transparent, creiamo anche il colore di sfondo trasparente in modo da non rovinare la vista.
2. margine - questi sono margini esterni, li ho scritti in modo che il campo di input si trovi direttamente nella parte dell'immagine in cui abbiamo il campo disegnato. Per questo è conveniente utilizzare il debugger, che si apre nel browser premendo F12.
3. larghezza è, ovviamente, la larghezza, l'ho specificata approssimativamente come la larghezza della scatola disegnata.
4. imbottitura- e ti permettono di rendere il campo stesso un po' più spazioso
5. bene, la dimensione del carattere è solo la dimensione del carattere del testo inserito nel campo.

Inoltre, per evitare che il tratto blu infido appaia sul campo quando viene ricevuto il focus, ho aggiunto questi stili.

Input di ricerca: focus (border: nessuno; outline: nessuno; box-shadow: nessuno;)

La pseudo-classe: focus è responsabile dello stile dei campi quando ricevono il focus.

Ottimo, ci rimane solo il pulsante di ricerca, al suo posto dovrebbe esserci una bella icona.

Passaggio 5: finalizzazione del modulo, aggiunta di un'icona di ricerca

Lascia che ti ricordi che il pezzo di codice responsabile dell'output del secondo pulsante è simile a questo:

Di conseguenza, abbiamo un attributo src vuoto, dove dobbiamo inserire il percorso dell'immagine, che dovrebbe diventare il pulsante. Dato che ho chiamato l'immagine icon.png e l'ho posizionata nella stessa directory del file html, il mio codice sarà così:

Ed ecco cosa è successo:

Quindi è trascurato: posizionare l'icona nel posto giusto. Come farlo? Sì, infatti, ci sono diverse opzioni:

1. puoi usare il posizionamento assoluto relativo alla lista
2. puoi far fluttuare l'immagine del pulsante e poi regolarla nella posizione desiderata usando i margini

Ho scelto il secondo metodo. Così:

Con il selettore di input .search, mi riferisco al pulsante dell'immagine. In realtà, nel mio caso, erano questi margini che mi andavano bene, ma la proprietà float: right fa galleggiare il blocco, premendolo sul bordo destro del blocco genitore.

Ancora una volta, ho usato un debugger per adattare il pulsante alla posizione desiderata. L'ho aperto e definito esattamente quali margini sono necessari affinché il pulsante si trovi nel posto giusto. Per vedere gli stili di un elemento nel debugger, fai clic con il pulsante destro del mouse e seleziona Esplora elemento.

In questa guida, vorrei condividere come puoi decorare il tuo modulo di ricerca. Non faremo nulla di super complicato. Invece, diamo un'occhiata a quattro modi in cui puoi decorare il tuo modulo di ricerca con le transizioni CSS.

Di seguito è riportato il normale codice della casella di ricerca.

Innanzitutto, nel file HTML, crea un elemento di input con un attributo type = search. Se guardi il codice qui sotto, vedrai 4 elementi diversi: un div con la classe .box, un div con la classe .container-1, .icon e la stessa barra di ricerca.

Tutti e quattro gli esempi avranno naturalmente una barra di ricerca e un'icona di ricerca. Ciascuno dei quattro esempi sarà in un contenitore separato in modo che possiamo modificarli indipendentemente l'uno dall'altro. Infine, il div è responsabile di mantenere centrato il nostro contenitore.

Aggiunta di caratteri fantastici

Font Awesome è una libreria di icone. Puoi scoprire di più su questa libreria sul loro sito web.

Il frammento di codice sopra mostra un esempio di come puoi includere un'icona nel tuo markup. Tuttavia, affinché l'icona funzioni, devi anche fornire un collegamento alla libreria Font Awesome, come descritto di seguito. Aggiungi questo link al tag head del tuo documento.

Stili iniziali

Per ora, aggiungeremo uno stile a un file separato (che dovrai aggiungere anche al tag head del tuo documento).

Corpo (sfondo: # 343d46;) .box (margine: 100 px automatico; larghezza: 300 px; altezza: 50 px;)

Nello snippet CSS sopra, abbiamo aggiunto uno stile di base per la pagina. Lo stile dei campi di ricerca sarà colorato di blu scuro, quindi lo sfondo del corpo non dovrebbe essere completamente bianco. Anche la classe box è centrata sulla pagina del tutorial.

Fine casella di ricerca

Questo tutorial riguarda l'apprendimento di come decorare le caselle di ricerca. Nel primo esempio, spiegherò cosa sta succedendo in modo più dettagliato; assicurati di sapere esattamente cosa sta succedendo. Negli altri tre esempi, ti mostrerò solo le opzioni di transizione.

#uno. Alleggerimento dello sfondo

Il primo esempio che andremo a risolvere è cambiare lo sfondo dell'input di ricerca al passaggio del mouse. Aggiungeremo una transizione in modo che il cambiamento non sia brusco.

HTML

Hai già visto il codice HTML per il markup di base. Questo sarà uno snippet per tutti gli esempi.

CSS

Per modellarlo, dobbiamo definire lo stile CSS per la casella di ricerca stessa. Aggiungiamo tutte le regole CSS una per una in modo da sapere esattamente cosa sta succedendo.

Container-1 (larghezza: 300 px; vertical-align: middle; white-space: nowrap; position: relative;)

Per prima cosa, definiamo lo stile della classe contenitore. La proprietà più importante è probabilmente position: relative. Questo è fatto apposta in modo che l'icona possa essere posizionata sopra l'input come vedrai.

Contenitore-1 input # ricerca (larghezza: 300 px; altezza: 50 px; sfondo: # 2b303b; bordo: nessuno; dimensione carattere: 10 pt; float: sinistra; colore: # 63717f; padding-left: 45 px; -webkit-border- raggio: 5px; -moz-border-radius: 5px; border-radius: 5px;)

Ingresso

Quindi stiliamo l'input. Tutto quanto sopra è un abbellimento poiché il raggio del bordo o il colore di sfondo non influiscono sulla funzionalità dell'input. Prestare attenzione alle proprietà dell'imbottitura sinistra. Questo per fare spazio all'icona in modo che non si trovi letteralmente sopra il testo all'interno dell'input.

Di seguito abbiamo quattro diverse regole per il colore del nostro segnaposto di testo di esempio. Ricerca... Sfortunatamente, le regole devono essere separate per i singoli prefissi dei fornitori e non possono essere combinate in una regola scritta abbreviata. Questo è un po' fastidioso e si ripeterà 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;)

Icona

Infine, lo stile dell'icona. La cosa principale è che si trova sopra l'input, quindi gli assegniamo la posizione: assoluta. I margini aiutano a posizionare l'icona nella prima posizione del 50%.

.container-1 .icon (posizione: assoluta; alto: 50%; margine sinistro: 17px; margine superiore: 17px; z-index: 1; colore: # 4f5b66;)

Aggiunta di effetti al passaggio del mouse

La prossima serie di regole governa cosa succede alla casella di ricerca al passaggio del mouse. In questo esempio, vogliamo cambiare il colore di sfondo. Per eliminare il bagliore giallo o blu intorno all'ingresso (che i browser a volte aggiungono) imposta il contorno: nessuno.

Contenitore-1 input # ricerca: hover, .container-1 input # ricerca: focus, .container-1 input # ricerca: attivo (contorno: nessuno; sfondo: #ffffff;)

Crea una transizione

Per effettuare la transizione, dobbiamo aggiungere alcune righe di codice. Torniamo alla regola dove abbiamo definito lo stile dell'input .container-1 input # search. Prima delle parentesi chiuse, aggiungi il seguente frammento:

Transizione Webkit: facilità di sfondo .55s; -moz-transition: facilità di sfondo .55s; -ms-transition: facilità di sfondo .55s; -o-transition: facilità di sfondo .55s; transizione: sfondo 0,55s facilità;

Definiamo l'abbreviazione della proprietà di transizione, ma possiamo anche definire questi tre parametri singolarmente. Innanzitutto, diciamo che la transizione dovrebbe interessare solo la proprietà background. Successivamente, diciamo che la transizione richiederà poco più di mezzo secondo. Infine, definiamo l'ammorbidimento dell'effetto di transizione. la facilità non è l'unico effetto che potrebbe funzionare qui, potremmo usare lineare o facilità per esempio. Sembrerebbe un po' diverso. Prova a vedere quale ti piace di più.

Lo stile di input dovrebbe ora assomigliare al codice seguente.

Contenitore-1 input # ricerca (larghezza: 300 px; altezza: 50 px; sfondo: # 2b303b; bordo: nessuno; dimensione carattere: 10 pt; float: sinistra; colore: # 262626; padding-left: 45 px; -webkit-border- raggio: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: sfondo 0,55s; -moz-transition: sfondo 0,55s; -ms-transition: sfondo 0,55s; - o-transizione: sfondo 0,55 secondi; transizione: sfondo 0,55 secondi;)

Come funzionano le transizioni CSS?

# 2. Espandi input al passaggio del mouse

In questo esempio, la ricerca inizierà dall'icona del vetro spia. Quando passi con il mouse sull'icona, la ricerca si espanderà, dopodiché potrai inserire la tua query. La maggior parte del codice in questo esempio sarà molto simile al precedente.

HTML

CSS

.container-2 (larghezza: 300 px; vertical-align: middle; white-space: nowrap; position: relative;)

Lo stile di input per questa transizione è diverso. L'ingresso è molto più piccolo, quindi l'icona potrebbe apparire fuori dalla piazza. Tutte le altre proprietà come lo sfondo o il colore del carattere rimarranno, non vogliamo cambiare completamente lo stile di ricerca.

Container-2 input # search (width: 50px; height: 50px; background: # 2b303b; border: nessuno; font-size: 10pt; float: left; color: # 262626; padding-left: 35px; -webkit-border- raggio: 5px; -moz-border-radius: 5px; border-radius: 5px; colore: #fff; -webkit-transition: larghezza 0,55 s; -moz-transition: larghezza 0,55 s; -ms-transition: larghezza .55s facilita; -o-transition: larghezza .55s facilita; transizione: larghezza .55s facilita;)

Come puoi vedere, ho sovrascritto la proprietà di transizione per influenzare solo la larghezza. L'ho tenuto allo stesso tempo perché è abbastanza veloce da non infastidire gli utenti, ma abbastanza lungo da creare un effetto piacevole.

Di seguito è riportato il codice per ridipingere 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;)

Di nuovo, abbiamo lo stile CSS per l'icona. Rimane lo stesso dell'esempio precedente.

Container-2 .icon (posizione: assoluta; top: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; color: # 4f5b66;)

Aggiunta di effetti al passaggio del mouse

L'ultima cosa che dobbiamo fare è definire come sarà la ricerca in sospeso. Nel seguente frammento di codice, la prima regola garantisce che non vi sia alcun bagliore indotto dal browser nel modulo e che durante la digitazione, durante la digitazione, la casella di ricerca rimanga ampia. La regola centrale ingrandisce l'input a tutta larghezza al passaggio del mouse.

Contenitore-2 input # ricerca: focus, .container-2 input # ricerca: attivo (profilo: nessuno; larghezza: 300 px;) .container-2: passaggio del mouse input # ricerca (larghezza: 300 px;) .container-2: passaggio del mouse. icona (colore: # 93a2ad;)

L'ultima cosa che accade nel codice sopra è che l'icona cambia colore al passaggio del mouse. Questo è solo un dettaglio per mostrare rapidamente all'utente che la casella di ricerca è attiva e non inattiva. Questa modifica non è implementata per la transizione.

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

Di tutti e quattro gli esempi, questo è il più sottile, sia in termini di codice che visivamente. In questo caso, l'icona della finestra di visualizzazione si aprirà leggermente e aumenterà di dimensioni.

HTML

Anche in questo caso, il markup HTML per l'icona e la casella di ricerca è lo stesso dei due esempi precedenti. Tranne ovviamente .container-3.

CSS

Il CSS per questo esempio non è niente di speciale. Per la maggior parte, l'inizio è molto simile ai primi esempi, in cui lo stato predefinito non è diverso. Di seguito è riportato il codice per il contenitore e l'input. Nota che questa volta non c'è transizione per l'input.

Container-3 (larghezza: 300px; vertical-align: middle; white-space: nowrap; position: relative;) .container-3 input # search (width: 300px; height: 50px; background: # 2b303b; border: nessuno; font-size: 10pt; float: left; color: # 262626; padding-left: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff; )

Ancora una volta, abbiamo regole 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;)

In apparenza, l'icona per questo esempio è la stessa. Stessa posizione, stesso colore e così via. Tuttavia, ho aggiunto una transizione ad esso. Queste transizioni sono assegnate a tutte le proprietà, che è più breve della loro presentazione individuale.

Container-3 .icon (posizione: assoluta; top: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; color: # 4f5b66; -webkit-transition: all .55s easy; -moz -transition: tutti gli .55 di andamento; -ms-transition: tutti gli .55 di andamento; -o-transition: tutti gli .55 di andamento; transizione: tutti gli .55 di andamento;)

Aggiunta di effetti al passaggio del mouse

.container-3 input # search: focus, .container-3 input # search: active (outline: nessuno;) .container-3: hover .icon (margin-top: 16px; color: # 93a2ad; -webkit-transform: scale (1.5); / * Safari e Chrome * / -moz-transform: scale (1.5); / * Firefox * / -ms-transform: scale (1.5); / * IE 9 * / -o-transform: scale ( 1.5); / * Opera * / trasforma: scala (1.5);)

Ci sono diverse cose nel codice sopra. Innanzitutto, abbiamo cambiato il colore dell'icona al passaggio del mouse e l'abbiamo spostata un po' più in alto in modo che sia centrata verticalmente quando ingrandisce. In secondo luogo, abbiamo aggiunto una trasformazione all'icona al passaggio del mouse in modo che diventi 1,5 volte la sua dimensione originale. Poiché una transizione precedentemente definita è stata configurata per influenzare tutto proprietà, l'icona sembra crescere al passaggio del mouse.

Diamo un'altra occhiata per saperne di più sulla trasformazione.

#4. Pulsante al passaggio del mouse

A differenza degli ultimi tre esempi, questo sarà più complesso. Passando il mouse sopra l'input si farà clic su un pulsante che ti consentirà di continuare, come Spedire o andare... All'interno del pulsante è presente un'icona a forma di lente di ingrandimento.

HTML

Questo HTML è leggermente diverso. L'input è ancora lì, ovviamente, ma l'icona è ora all'interno dell'elemento pulsante che viene dopo l'input. È importante che il pulsante venga dopo l'input poiché questo ha a che fare con il modo in cui verrà creato l'effetto di attesa nel CSS.

CSS

Il CSS in questo esempio è diverso, per favore nota! Di seguito è riportato uno snippet dello stile del contenitore. Primo, posizione: manca il relativo; Non importa più, poiché l'icona non si basa su di essa per adattarsi all'input. Tuttavia, abbiamo overflow: nascosto. Ciò impedisce la visualizzazione del pulsante quando non è in sospeso. Tecnicamente, il pulsante che appare è a destra dell'input, ma grazie a overflow: nascosto, non viene mostrato quando va oltre la larghezza del contenitore: contenitore e input hanno la stessa larghezza.

Container-4 (overflow: nascosto; larghezza: 300 px; vertical-align: middle; white-space: nowrap;)

L'input sottostante non ha transizioni perché non è più un elemento.

Container-4 input # search (width: 300px; height: 50px; background: # 2b303b; border: nessuno; font-size: 10pt; float: left; color: #fff; padding-left: 15px; -webkit-border- raggio: 5px; -moz-border-radius: 5px; border-radius: 5px;)

Il prossimo frammento è quello di cambiare il colore dei segnaposto.

Container-4 input # search :: - webkit-input-placeholder (color: # 65737e;) .container-4 input # search: -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 al passaggio del mouse. Per il trucco di inserirlo di lato, devi posizionarlo proprio dietro l'input e nasconderlo finché non lo passi con il mouse. Un bottone è un elemento che cambia - si muove - per questo definisce la transizione. Per semplificare le cose, ho definito una transizione per influenzare tutte le proprietà.

Pulsante.icona contenitore-4 (-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; border: nessuno; background: # 232833; altezza: 50px; larghezza: 50px; colore: # 4f5b66; opacità: 0 ; font-size: 10pt; -webkit-transition: tutto .55s facile; -moz-transition: tutto .55s facile; -ms-transition: tutto .55s facile; -o-transition: tutto .55s facile; transizione: tutto .55s facilità;)

Aggiunta di effetti al passaggio del mouse

Per la dissolvenza in chiusura, il pulsante deve essere posizionato sopra l'ingresso. Questo viene fatto attraverso margini negativi. In precedenza, impostavamo l'opacità del pulsante su 0, quindi dobbiamo reimpostarla su 1 affinché anche il pulsante sia visibile.

L'ultima regola cambia lo sfondo del pulsante solo quando passi con il mouse sopra il pulsante. È bene informare l'utente che il pulsante è attivo e che può cliccarci sopra per inviare una richiesta; non ha senso avere un pulsante se sembra inattivo.

Container-4: hover button.icon, .container-4: button.icon attivo, .container-4: focus button.icon (contorno: nessuno; opacità: 1; margine sinistro: -50px;) .container-4: hover button.icon: hover (sfondo: bianco;)

Conclusione

Bene, siamo alla fine dei nostri esperimenti CSS! Abbiamo preso il modulo di input di ricerca principale e abbiamo usato un piccolo insieme di effetti per cambiarne il comportamento. In quale altro modo potresti modificare l'input? Quali altri aspetti applicheresti alle transizioni o trasformazioni CSS? Fateci sapere nei commenti!

Un saluto a tutti i lettori e abbonati al sito. Oggi parlerò di come progettare un elegante modulo di ricerca HTML per un sito web.

La maggior parte dei siti e dei blog con un'ampia varietà di informazioni utilizza tali moduli. Consentono ai visitatori di trovare l'articolo desiderato tramite parole chiave, penso che tutti li abbiano visti.

Dal punto di vista del browser, si tratta di semplici moduli HTML, con due elementi: un campo di testo e un pulsante che invia una richiesta. A volte il pulsante potrebbe non essere presente, nel qual caso il modulo viene inviato premendo il tasto Invio.

Ad esempio, ho preso uno dei lavori da premiumpixels.com. Ecco un link al post stesso. Questo file PSD gratuito con il design di sei tipi di moduli assomiglia all'immagine qui sotto. Puoi scaricare il PSD stesso da quel sito, poiché è distribuito gratuitamente.

Ci limiteremo a creare una versione chiara e scura, poiché la terza, che è blu, è molto simile a quella chiara.

Cosa otteniamo alla fine, vedi sotto:

Quindi, come ho detto, il codice HTML è un form con due elementi di input. Per facilità di progettazione, ho avvolto ciascuno di essi in un blocco div.

Per tutti i tipi di design, questo codice sarà lo stesso.

Chiunque abbia lavorato con Drupal 7 può vedere che questa struttura è molto simile al modulo di ricerca standard in Drupal 7. Lo è. Se incorporerai questo design nel tuo sito su questo CMS, non dovrai modificare nulla nell'output HTML (ad eccezione del segnaposto, vedi sotto).

Per il campo di input, impostiamo l'attributo segnaposto. Il valore di questo attributo viene mostrato all'interno del campo di input e scompare quando il campo viene attivato. Una struttura molto confortevole.

Per impostazione predefinita, l'intero modulo di ricerca avrà un aspetto diverso nei diversi browser e non sarà molto elegante ovunque. Ad esempio, il suo aspetto in Opera e Safari è mostrato di seguito:

Pertanto, non possiamo fare a meno del markup di stile. Diamo un'occhiata agli stili per la versione a luce tonda. Inserisci il seguente codice nel file CSS:

# search-block-form (width: 248px; height: 28px; border-radius: 15px; border: # c9c9c9 solid 1px; background: url (images / searchBg.png) left top repeat-x;). focus-active ( colore del bordo: #aaa! importante; sfondo: #fff! importante;) # input modulo di ricerca blocco (imbottitura: 0; margine: 0; display: blocco; bordo: nessuno; contorno: nessuno; sfondo: nessuno; larghezza : 100%; altezza: 100%;) # search-block-form .form-actions (larghezza: 28px; altezza: 28px; float: sinistra; sfondo: url (images / searchIcon.png) 5px 2px no-repeat;) # search-block-form .form-actions input: hover (cursore: puntatore;) # search-block-form .form-actions input (overflow: nascosto; text-indent: -9999px;) # search-block-form. form-item (larghezza: 210px; padding: 0px 5px; float: right; height: 28px;) # search-block-form .form-item input (font: 13px / 16px "Trebuchet MS", Arial, Helvetica, sans- serif; color: # 222; height: auto! importante; padding: 6px 0;) .placeholder (color: #cbcbcb! importante;)

Ripariamolo in ordine e in modo più dettagliato. Innanzitutto, diamo al modulo stesso con l'identificatore # search-block-form la dimensione, il colore del bordo e l'arrotondamento degli angoli.

# search-block-form (width: 248px; height: 28px; border-radius: 15px; border: # c9c9c9 solid 1px; background: url (images / searchBg.png) left top repeat-x;)

Tutti gli elementi interni non avranno colori di sfondo o di bordo, quindi sovrascriveremo tutte le proprietà standard per entrambi i tag di input.

# input modulo di ricerca blocco (imbottitura: 0; margine: 0; display: blocco; bordo: nessuno; contorno: nessuno; sfondo: nessuno; larghezza: 100%; altezza: 100%;)

Imposteremo il design, se possibile, in base ai div in cui sono racchiusi gli elementi e non da soli.

Il blocco delle azioni del modulo si attaccherà a sinistra e l'elemento del modulo a destra. Il pulsante di invio del modulo ha del testo, ma non ne abbiamo bisogno, quindi lo rimuoviamo con il seguente metodo ben noto.

# search-block-form .form-actions input (overflow: nascosto; text-indent: -9999px;)

# search-block-form .form-item input (font: 13px / 16px "Trebuchet MS", Arial, Helvetica, sans-serif; colore: #222; altezza: auto! importante; padding: 6px 0;)

Ora diamo un'occhiata al codice JavaScript.

Sembrerebbe, perché è necessario JavaScript qui? In realtà aggiunge alcune utili funzionalità di usabilità.

Innanzitutto, la proprietà segnaposto è stata fornita con HTML5 e il suo supporto nei browser più vecchi lascia molto a desiderare. Ma esiste una soluzione semplice sotto forma di plug-in jQuery jQuery-Placeholder, che fornirà supporto per questa proprietà in tutti i browser (incluso anche IE6!).

Per fare ciò, collega il file stesso e abilita questa funzione:

$ ("input"). segnaposto ();

Se abbiamo già connesso jQuery, possiamo fare qualcos'altro. Ad esempio, supponiamo che quando una forma riceve lo stato attivo, in qualche modo cambia.

Per questo abbiamo creato una classe speciale focalizzata. Quando aggiungi questa classe a una forma, cambia il colore di sfondo in bianco e il colore del bordo diventa leggermente più scuro. Il modulo, per così dire, reagirà alle azioni dell'utente.

Focus attivo (colore del bordo: #aaa! Importante; sfondo: #fff! Importante;)

La classe .placeholder esegue il rendering del testo dall'attributo placeholder nei browser meno recenti. Questa classe può essere utilizzata solo se stiamo utilizzando lo stesso plugin jQuery.

Segnaposto (colore: #cbcbcb! Importante;)

È tutto. Abbiamo creato un modulo di ricerca facile da integrare nella maggior parte dei siti.

Altre versioni non differiscono molto, vedere il codice sorgente delle pagine demo per i commenti necessari.

È tutto per oggi. Scrivi nei commenti cosa ti piacerebbe leggere nei nuovi post del blog, oltre a iscriverti agli RSS ed essere il primo a ricevere informazioni sull'aggiornamento del sito!