Creazione di una casella di ricerca CSS3 oscillante
CSS3 è il linguaggio di fogli di stile di prossima generazione. Introduce molte nuove ed entusiasmanti funzioni come ombre, animazioni, transizioni, raggio di confine ecc. Sebbene le specifiche non siano ancora state finalizzate, molti produttori di browser hanno già iniziato a supportare molte delle nuove funzionalità.
In questo tutorial, esploreremo alcune di queste funzioni come text-shadow, border-radius, box-ombre e transizioni per creare un campo di ricerca a dondolo.
La versione photoshop di questo campo di ricerca è stata creata da Alvin Thong e può essere scaricata da qui. Ho provato a ricreare questo campo di ricerca usando puro CSS3. Va notato che non tutti i browser supportano le funzionalità CSS3 e per provare questo tutorial, dovresti usare uno dei browser moderni che supportano le funzionalità di CSS 3.
Pronto? Iniziamo!
1. Documento HTML5
Inizieremo con il markup HTML. È molto semplice, dopo il Doctype HTML5 e il dichiarazione, abbiamo a con un ID chiamato #wrapper dentro . Questo viene fatto semplicemente per definire la larghezza del riquadro del contenuto e per allinearlo al centro della pagina.
Questo è seguito da a Ecco come appare il codice: Per creare il riquadro grande attorno al modulo, aggiungeremo stili al L'importante pezzo di codice qui è il Spiegazione: Qui, la parola chiave inset specifica se l'ombra sarà all'interno della casella. I primi due zero indicano l'offset xe l'offset y e il 3px indica la sfocatura. La prossima è la dichiarazione del colore. Ho usato i valori di rgba qui; rgba sta per rosso blu verde e alfa (opacità). Quindi i 4 valori all'interno della parentesi indicano la quantità di rosso, verde, blu e il suo alfa (opacità). Noterai che 5 serie di dichiarazioni ombra sono state bastonate. Questo può essere fatto separandoli con una virgola. Le prime due ombre definiscono l'effetto bianco "bagliore interno" e le dichiarazioni successive danno alla scatola il suo aspetto solido / massiccio. Gioca con questi valori per capire come funziona. Ora che la casella è completa, passiamo allo stile del campo di input. Gli stili dichiarati per il campo di input sono molto simili a quelli decared per la scatola grande Spiegazione: Noterai che questa volta la sfocatura dell'ombra è stata mantenuta a 0 per ottenere un'ombra nitida e viene utilizzato un offset verticale di 5px. Nelle dichiarazioni successive, la sfocatura è stata mantenuta a 0px ma il colore e l'offset y sono stati modificati. Ancora una volta, giocare con questi valori per ottenere risultati diversi. Diamo uno stile al pulsante di ricerca. Oltre ai colori, il pulsante di ricerca ha per lo più gli stessi stili di quello della scatola esterna. Sul pulsante sono stati utilizzati bordi e ombre di riquadri simili. La nuova funzionalità introdotta è la Spiegazione: Nel Lo stato attivo del pulsante ha un po 'più di modifiche. In questo, ho dato al pulsante una posizione assoluta e un valore "top" di 5px. Questo è stato fatto per dargli un aspetto più naturale, in modo tale da sentire che il pulsante è stato effettivamente premuto di 5 pixel. Altre modifiche allo stato attivo sono quelle del colore di sfondo e delle ombre. Notare che ho ridotto l'offset y delle ombre per dargli un aspetto 'premuto'. Ecco il codice per lo stato attivo del pulsante di invio: Questo completa il nostro campo di ricerca. Abbiamo usato un bel po 'delle nuove funzionalità CSS3. Ecco il CSS e l'HTML completi di questo campo di ricerca. Spero ti sia piaciuto questo tutorial. Sentiti libero di sperimentare queste caratteristiche e non dimenticare di condividere i tuoi pensieri. Nota dell'editore: Questo post è scritto da Bharani M per Hongkiat.com. Bharani è un designer / sviluppatore di New Delhi, in India.#principale. Questo ID contiene gli stili che definiscono il grande riquadro bianco attorno al campo di input e il pulsante di ricerca. Questo dichiarato al suo interno. Il modulo ha il campo di inserimento del testo e la spulsante di ricerca. Ecco come appare il modulo senza alcuno stile applicato: 
Campo di ricerca CSS3
2. Creazione del riquadro di delimitazione
#principale. Dal codice mostrato di seguito, noterai che al riquadro è stata assegnata una larghezza di 400 px e un'altezza di 50 px. #main width: 400px; altezza: 50 px; sfondo: # f2f2f2; imbottitura: 6px 10px; border: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
border-radius dichiarazione e il box-ombra dichiarazione. Per creare angoli arrotondati, abbiamo utilizzato la dichiarazione border-radius CSS3, i prefissi "-moz-" e "-webkit-" sono stati utilizzati per garantire che questo funzioni nei browser basati su gecko e webkit. Le dichiarazioni shadow delle caselle potrebbero sembrare un po 'confuse, ma in realtà è molto semplice. box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Anteprima
3. Disegnare il campo di input
input [type = "text"] float: left; larghezza: 230 px; imbottitura: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; border: 1px solid # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede;
#principale. Abbiamo usato lo stesso raggio di confine (5px). Ancora una volta, più ombre di casella sono state bastonate. box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede;
Anteprima
4. Disegnare il pulsante di invio
input [type = "submit"]. solid float: left; cursore: puntatore; larghezza: 130 px; imbottitura: 8px 6px; margin-left: 20px; background-color: # f8b838; colore: rgba (134, 79, 11, 0,8); text-transform: maiuscolo; font-weight: bold; border: 1px solid # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transition: background 0.2s easy-out;
text-shadow. text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9);
text-shadow dichiarazione, i primi tre valori numerici sono rispettivamente x-offset, y-offset e blur. I valori rgba indicano il colore dell'ombra. Nella prossima serie di dichiarazioni (separate da una virgola), l'offset y è assegnato a -1. Questo è fatto per dare al testo un “Ombra interiore” effetto. Lo stato di hover / focus del pulsante di invio ha diversi valori di colore di sfondo e ombre. Anteprima
Stato "Attivo" per pulsante
input [type = "submit"]. solid: active background: # f6a000; posizione: relativa; inizio: 5px; border: 1px solid # 702d00; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
Il codice completo (CSS)
#main width: 400px; altezza: 50 px; sfondo: # f2f2f2; imbottitura: 6px 10px; border: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; input [type = "text"] float: left; larghezza: 230 px; imbottitura: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; border: 1px solid # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; input [type = "submit"]. solid float: left; cursore: puntatore; larghezza: 130 px; imbottitura: 8px 6px; margin-left: 20px; background-color: # f8b838; colore: rgba (134, 79, 11, 0,8); text-transform: maiuscolo; font-weight: bold; border: 1px solid # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transition: background 0.2s easy-out; input [type = "submit"]. solid: hover, input [type = "submit"]. solid: focus background: # ffd842; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,9), inserto 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,9), inset 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,9), inset 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; input [type = "submit"]. solid: active background: # f6a000; posizione: relativa; inizio: 5px; border: 1px solid # 702d00; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
