#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; } 

L'importante parte di codice qui è la dichiarazione border-radius e la dichiarazione box-shadow . Per creare angoli arrotondati, abbiamo utilizzato la dichiarazione border-radius CSS3, "-moz-" e "-webkit-" sono stati utilizzati prefissi del browser 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; 

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 dei colori. 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.

Anteprima

3. Disegnare il campo di input

Ora che la casella è completa, passiamo allo stile del 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; } 

Gli stili dichiarati per il campo di input sono molto simili a quelli decared per la grande casella #main . 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; 

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 0 px ma il colore e l'offset y sono stati modificati. Ancora una volta, giocare con questi valori per ottenere risultati diversi.

Anteprima

4. Modifica del pulsante di invio

Diamo uno stile al pulsante di ricerca.

 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; } 

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 di raggio e ombre di riquadri simili. La nuova funzionalità introdotta è l' text-shadow del text-shadow .

 text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); 

Spiegazione: Nella dichiarazione text-shadow, i primi tre valori numerici sono rispettivamente l'offset x, l'offset y e la sfocatura. 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 effetto "ombra interiore". Lo stato di hover / focus del pulsante di invio ha diversi valori di colore di sfondo e ombre.

Anteprima

Stato "Attivo" per pulsante

Lo stato attivo del pulsante ha un po 'più di cambiamenti. 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. Si noti che ho ridotto l'offset y delle ombre per dargli un aspetto 'premuto'. Ecco il codice per lo stato attivo del pulsante di invio:

 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)

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.

 #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), inset 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; } 

Spero ti sia piaciuto questo tutorial. Sentiti libero di sperimentare queste funzionalità e non dimenticare di condividere i tuoi pensieri.

Nota del redattore: questo post è scritto da Bharani M per Hongkiat.com. Bharani è un designer / sviluppatore di New Delhi, in India.

Aggiornamento per Windows 10 per i creativi: Novità

Il prossimo aggiornamento importante e atteso di Microsoft per Windows 10, l'Aggiornamento dei creator, è ora disponibile per il download manuale per coloro che sono interessati a ottenere l'aggiornamento in anticipo. In alternativa, detto aggiornamento sarebbe reso disponibile come download automatico a partire dall'11 aprile .

(Consigli tecnici e di design)

Cerca attraverso la tua linea temporale Facebook con QSearch

Facebook è in circolazione da molto tempo e, se lo usi da più di un anno, la tua Timeline è probabilmente piena di link, post e ricordi che ti piacerebbe poter rivedere ogni volta che vuoi . Che sia solo per nostalgia o che tu stia cercando quel link interessante pubblicato sulla tua Timeline qualche tempo fa, riuscire a cercare nella timeline di Facebook è una funzionalità davvero utile. Pur

(Consigli tecnici e di design)