10 tecniche creative utilizzando CSS3 Box Shadow

Negli ultimi anni abbiamo assistito a un enorme numero di progressi nello sviluppo web di CSS3. I siti Web popolari su Internet hanno iniziato a incorporare molti stili esclusivi, ad esempio angoli arrotondati e query multimediali sensibili ai dispositivi mobili. Ma ancora più importante, questo ha aperto la porta per la creazione di prototipi di interfacce creative in pochi minuti.

In questo articolo voglio condividere 10 frammenti di codice relativi a brillanti disegni di ombre di scatole CSS3. Spiegherò come funziona il codice e come puoi implementare ogni box shadow nel tuo sito web.

Questi stili sono tutti attribuiti alla grande influenza del design di altri siti popolari. Questo è un ottimo esempio di come gli attuali sviluppatori web stanno costruendo tendenze di impatto per il futuro del web design.

1. Fixed Top Toolbar

Il servizio di social media rumeno Trilulilu utilizza una barra degli strumenti mobile in cima al loro intero sito web. Questo può essere creato rapidamente usando a posizione: fissa; proprietà su qualsiasi elemento barra superiore. Ma questa ombra di scatola aggiuntiva porta l'effetto a un livello completamente nuovo.

#banner position: fixed; altezza: 60 px; larghezza: 100%; inizio: 0; a sinistra: 0; border-top: 5px solid # a1cb2f; sfondo: #fff; -moz-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0,16); -webkit-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0,16); box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0,16); z-index: 999999;  #banner h1 line-height: 60px;

Noterai che la proprietà box-shadow è in realtà impostata con una combinazione di valori piuttosto semplice. L'ombra cadrà sotto la scatola e sfocerà di 3 px su entrambi i lati.

Possiamo usare il RGBA () metodo per applicare una leggera opacità all'ombra, in modo che l'elemento non appaia troppo scuro. È un'aggiunta sottile che catturerà sicuramente l'attenzione del visitatore.

dimostrazione

2. Dropdown per la navigazione secondaria

Ecco un altro metodo di ombreggiatura delle caselle creative applicato a un sottomenu a discesa scalare. Un effetto simile può essere visto su Entrepreneur mentre si posiziona il mouse su ciascuno dei principali collegamenti di navigazione principali. Questo è sicuramente un po 'più complicato da configurare, ma vale la pena la pazienza.

#bar display: block; altezza: 45 px; sfondo: # 22385a; padding-top: 5px; margin-bottom: 150px; posizione: relativa;  #bar ul margin: 0px 15px; font-family: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li background: # 22385a; blocco di visualizzazione; font-size: 1.2em; posizione: relativa; float: a sinistra;  #bar ul li a display: block; colore: # fffff7; altezza della linea: 45px; font-weight: bold; imbottitura: 0px 10px; decorazione del testo: nessuna; z-index: 9999;  #bar ul li a: hover, #bar ul li a.selected color: # 365977; sfondo: #fff; border-top-left-radius: 3px; border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px;  #bar ul .subnav display: block; a sinistra: 14px; sopra: 48px; z-index: -1; larghezza: 500 px; posizione: assoluta; altezza: 90 px; border: 1px solid # edf0f3; border-top: 0; imbottitura: 10px 0 10px 10px; overflow: nascosto; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; -moz-box-shadow: 0px 2px 7px rgba (0,0,0,0.25); -webkit-box-shadow: 0px 2px 7px rgba (0,0,0,0,25); box-shadow: 0px 2px 7px rgba (0,0,0,0.25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (Forza = 3, Direzione = 180, Colore =" # 333333 ")"; filtro: progid: DXImageTransform.Microsoft.Shadow (Forza = 3, Direzione = 180, Colore = "# 333333");

I collegamenti nav possono essere modificati per cambiare colore quando selezionato o al passaggio del mouse. Aggiungo anche alcuni bordi arrotondati sui collegamenti e sulla casella del menu a discesa. Ciò conferisce una sensazione più bella piuttosto che i bordi rigidi tutt'intorno. Sto anche facendo buon uso del -ms-filtro e filtro proprietà che sono esclusivamente di proprietà di Internet Explorer.

Se imposti un sistema di navigazione completo, sarai in grado di cambiare la visualizzazione impostata su none e nascondere il menu una volta caricata la pagina. Quindi utilizzando jQuery puoi scegliere come target l'evento .hover () e visualizzare la barra secondaria con contenuto aggiornato.

dimostrazione

3. Pulsante Shadow lucido

Questo è probabilmente uno dei miei stili preferiti da creare proprio per il modo in cui appare dinamico sulla pagina. Se non riesci a capire, questo è il piccolo pulsante blu trovato sulla home page di YouTube dopo il primo accesso.

blues color: #fff; larghezza: 190 px; altezza: 35px; cursore: puntatore; font-family: Arial, Tahoma, sans-serif; font-size: 1.0em; font-weight: bold; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border-width: 1px; border-color: # 0053a6 # 0053a6 # 000; colore di sfondo: # 6891e7; background-image: -moz-linear-gradient (in alto, # 4495e7 0, # 0053a6 100%); background-image: -ms-linear-gradient (in alto, # 4495e7 0, # 0053a6 100%); background-image: -o-linear-gradient (in alto, # 4495e7 0, # 0053a6 100%); background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, color-stop (0, # 4495e7), color-stop (100%, # 0053a6)); background-image: -webkit-linear-gradient (in alto, # 4495e7 0, # 0053a6 100%); background-image: linear-gradient (in basso, # 4495e7 0, # 0053a6 100%); text-shadow: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: hover border-color: # 002d59 # 002d59 # 000; -moz-box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -ms-box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0,25); -webkit-box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, .25); filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); background-image: -moz-linear-gradient (in alto, # 3a8cdf 0, # 0053a6 100%); background-image: -ms-linear-gradient (in alto, # 3a8cdf 0, # 0053a6 100%); background-image: -o-linear-gradient (in alto, # 3a8cdf 0, # 0053a6 100%); background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, color-stop (0, # 3a8cdf), color-stop (100%, # 0053a6)); background-image: -webkit-linear-gradient (in alto, # 3a8cdf 0, # 0053a6 100%); background-image: linear-gradient (in basso, # 3a8cdf 0, # 0053a6 100%);  .blues: active border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: inset 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-shadow: inset 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #ffff; -webkit-box-shadow: inset 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #ffff; box-shadow: inset 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); background-image: -moz-linear-gradient (in alto, # 005ab4 0, # 175ea6 100%); background-image: -ms-linear-gradient (in alto, # 005ab4 0, # 175ea6 100%); background-image: -o-linear-gradient (in alto, # 005ab4 0, # 175ea6 100%); background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, color-stop (0, # 005ab4), color-stop (100%, # 175ea6)); background-image: -webkit-linear-gradient (in alto, # 005ab4 0, # 175ea6 100%); background-image: linear-gradient (in basso, # 005ab4 0, # 175ea6 100%);

L'intero codice del pulsante è molto da vedere, ma ci stiamo provando per supportare quanti più browser possibile. Ci sono ombre di testo e ombre di riquadri con supporto di accompagnamento per MS Internet Explorer 7+. Inoltre stiamo impostando il immagine di sfondo proprietà con gradienti CSS3 su un ampio numero di prefissi specifici del fornitore.

Ma se ami questo stile di design allora il anche gli hover e gli stati attivi cattureranno la vostra attenzione. In pratica stiamo aggiornando il bordo per includere alcune ombre all'interno mentre spingi verso il basso, mentre aggiorni il gradiente dello sfondo per mostrare un po 'più scuro.

Dal momento che non ci sono immagini sul pulsante, puoi aggiornare i valori esadecimali e trasformarli in un qualsiasi schema di colori.

dimostrazione

4. Menu flyout delle notifiche

Non sono un grande utente di Facebook ma ho notato alcune tecniche di interfaccia utente dalle loro ridisegnazioni. Questo menu a comparsa può essere paragonato alle notifiche o ai popup delle richieste di amicizia presenti nella home page.

.flyout larghezza: 310px; margin-top: 10px; font-size: 11px; posizione: relativa; famiglia di font: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; colore di sfondo: bianco; imbottitura: 9px 11px; background: rgba (255, 255, 255, 0,9); border: 1px solid # c5c5c5; -webkit-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); -moz-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); box-shadow: 0 3px 8px rgba (0, 0, 0, .25); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;  .flyout #tip background-image: url ('images / tip.png'); background-repeat: no-repeat; background-size: auto; altezza: 11px; posizione: assoluta; inizio: -11px; a sinistra: 25px; larghezza: 20px;  .flyout h2 text-transform: uppercase; colore: # 666; font-size: 1.2em; imbottitura-fondo: 5px; margin-bottom: 12px; border-bottom: 1px solid #dcdbda;  .flyout p padding-bottom: 25px; font-size: 1.1em; colore: # 222;

Non c'è un intero nuovo codice di mind bending da mostrare qui. Sto usando un piccolo .mancia classe con un elemento di span interno per aggiungere il triangolo del suggerimento. È possibile creare triangoli CSS3 puri, ma questo metodo non è facile, come puoi immaginare. Se preferisci questo metodo, potrebbe valere la pena di hackerare qualcosa insieme. Ma le proprietà di rotazione CSS3 non sono supportate ovunque; nel frattempo le immagini non richiedono alcun metodo di fallback.

dimostrazione

5. Involucro della pagina Apple

Ci sono così tante impressionanti ombre box CSS3 che puoi trovare sul sito ufficiale di Apple. Questo esempio di seguito è un contenitore di piccole dimensioni con poche colonne span. Osservando il layout di Apple, noterai molte delle loro pagine composte da numerose scatole wrapper.

.applewrap width: 100%; blocco di visualizzazione; altezza: 150 px; sfondo: bianco; bordo: 1px solido; border-color: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba (0, 0, 0, 0,3) 0 1px 3px; -moz-box-shadow: rgba (0,0,0,0.3) 0 1px 3px; box-shadow: rgba (0, 0, 0, 0,3) 0 1px 3px;  .applewrap .col float: left; dimensionamento della scatola: border-box; larghezza: 250 px; altezza: 150 px; imbottitura: 16px 7px 6px 22px; font: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; colore: # 343434; border-right: 1px solid #dadada;

È possibile creare una pagina simile suddivisa in caselle di contenuto di varia larghezza e altezza. Anche se ho inserito alcune colonne in questa demo, non è una tecnica di formattazione necessaria in alcun modo. L'ombra del riquadro si adatta meglio su uno sfondo bianco / grigio. Ma penso che la visualizzazione di qualsiasi colore chiaro sembrerebbe piuttosto buona.

dimostrazione

6. Apple Content Box

Questo altro tipo di contenitore di contenuti sul sito Web di Apple viene utilizzato principalmente per i progetti di colonne. Questi sono principalmente nella parte inferiore della pagina che mostra le offerte e altre informazioni correlate. È uno stile di design totalmente diverso, con l'ombra della scatola che mostra l'interno dall'alto verso il basso.

.applebox larghezza: auto; altezza: 85 px; dimensionamento della scatola: border-box; sfondo: # f5f5f5; imbottitura: 20px 20px 10px; margine: 10px 0 20px; border: 1px solid #ccc; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-box-shadow: inset 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: inset 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: inset 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col width: 140px; float: a sinistra; margine: 0 0 0 30 px;

Non penso che questo codice dovrebbe essere troppo difficile da seguire e copiare su un altro contenitore div. L'unico box-shadow che stiamo applicando sta usando inserire con i codici cromatici trasparenti alfa rgba. Quindi, anche se l'ombreggiatura è impostata su nero puro, visualizziamo solo un'opacità del 30%.

dimostrazione

7. Collegamenti in primo piano

Questo è probabilmente il mio stile di box shadow preferito dal sito web attuale di Apple. Dovresti trovare uno stile demo live di questa tecnica sulla pagina di iCloud con una serie di caselle di collegamento fluttuanti.

.applefeature height: 150px; margine: 8px; vertical-align: top; display: blocco in linea;  .applefeature a display: block; larghezza: 168 px; altezza: 140px; border: 1px solid #ccc; colore: # 333; decorazione del testo: nessuna; font-weight: bold; line-height: 1.3em; sfondo: # f7f7f7; -webkit-box-shadow: inset 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: inset 0 1px 2px rgba (0, 0, 0, .3); box-shadow: inset 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;  .applefeature a: hover background: #fafafa; background: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (#fff), a (# f7f7f7)); background: -moz-linear-gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: inset 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: inset 0 1px 2px rgba (0,0,0, .3); box-shadow: inset 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;  .applefeature a img display: block; margine: 26px auto 4px;  .applefeature a h4 display: block; larghezza: 160 px; font-size: 1.3em; font-family: Arial, Tahoma, sans-serif; colore: # 646464; allineamento del testo: centro;

Questi collegamenti in primo piano sono impostati su una larghezza fissa e includono un'icona e un testo distinti. L'esempio di Apple usa un'ombra simile a quella che abbiamo visto nella precedente casella di contenuto. però ora l'intera casella può essere attivata come collegamento che include sia il : hover e :attivo stati. C'è molta flessibilità con questa finestra di collegamento e dovresti provare a giocare con il codice sorgente.

È possibile accorciare l'altezza / larghezza e creare un elenco di collegamenti molto più piccolo. Questi potrebbero essere un insieme di capitoli o pagine in un articolo, oppure potresti creare un sottomenu limitato con icone di collegamento. È onestamente una grande serie di nuove tecniche CSS3 che dimostrano quanto potere possiedi come web designer.

dimostrazione

8. Immagini incorniciate

Ho aggiunto uno sfondo grigio a questo esempio in modo da poter vedere più chiaramente gli stili di ombreggiatura. Questa casella è simile agli scatti di anteprima in primo piano su wordpress.com, tranne che ho aggiunto un po 'più di profondità al codice sorgente.

.wpframe background: #fff; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; imbottitura: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; box-shadow: 1px 2px 1px # d1d1d1;

Poiché alle immagini viene data una piccola imbottitura su entrambi i lati, questa cornice appare come un grande bordo bianco. Puoi sempre aggiornare il colore di sfondo o anche aggiungere un piccolo bordo esterno per separare l'immagine dallo sfondo. Ma questo insieme di stili abbastanza semplicistico può essere manovrato in varie tecniche di casella ombra. Gioca con il codice e scopri come migliorare il design delle immagini sul tuo sito web.

dimostrazione

9. Campi di input luminosi

Ho avuto questa idea dopo aver visitato la pagina di login di Pinterest un paio di volte. I loro stili animati mostrano in realtà alcuni esempi eloquenti di ombre multiple in linea, sia all'esterno che all'interno.

.formwrap display: block; margin-bottom: 15px;  .formwrap label display: inline-block; larghezza: 80 px; font-size: 11px; font-weight: bold; colore: # 444; font-family: Arial, Tahoma, sans-serif;  .formwrap .shadowfield position: relativo; larghezza: 250 px; font-size: 17px; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: normal; sfondo: # f7f8f8; colore: # 7c7c7c; altezza della linea: 1,4; imbottitura: 6px 12px; contorni: nessuno; transizione: tutti gli 0 secondi di easy-in-out dello 0,2; -webkit-transition: tutti gli 0s easy-in-out 0s; -moz-transition: tutti gli 0s easy-in-out 0s; border: 1px solid # ad9c9c; border-radius: 6px 6px 6px 6px; box-shadow: 0 1px rgba (34, 25, 25, 0,2), 0 1px #fff;  .formwrap .shadowfield: focus border-color: # 930; sfondo: #fff; colore: # 5d5d5d; box-shadow: inset 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0 0 7px rgba (235, 82, 82, 0,5); -moz-box-shadow: inset 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0 0 7px rgba (235, 82, 82, 0,5); -webkit-box-shadow: inset 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0 0 7px rgba (235, 82, 82, 0,5);

Sebbene gli stili iniziali siano molto attraenti, sono attratto dal effetti di transizione mentre ci si concentra su ciascun campo di input. Puoi passare da una all'altra e vedere la differenza immediata in così tante proprietà. L'ombra della scatola luminosa esterna viene applicata insieme a un'ombra di riquadro aggiornata. Anche il il colore del testo diventa più chiaro mentre ti concentri su un particolare input, poi svanisce quando ti sfochi.

Anche la copia su uno di questi effetti migliorerebbe notevolmente l'esperienza utente dei campi del modulo. Assicurati di non esagerare fino al punto in cui le tue forme sono appena utilizzabili. Tuttavia, la maggior parte dei visitatori apprezzerà i piacevoli effetti estetici che favoriscono anche l'interazione e l'ulteriore coinvolgimento con il tuo sito web.

dimostrazione

10. Pulsanti ombra elastici

Questi pulsanti ombra unici sono stilizzati con una transizione lenta durante il passaggio del mouse e gli stati attivi. Puoi trovare esempi simili sulla homepage di Mozilla con i loro grandi “Scarica Firefox” pulsante. Alcuni dei box-ombra le proprietà effettivamente combinano tre diverse ombre insieme in un unico comando.

.blu-btn display: blocco in linea; -moz-border-radius: .25em; border-radius: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inserto 0 -2px 0 0 rgba (0,0,0,0,2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), riquadro 0 -2px 0 0 rgba (0,0,0,0,2); background-color: # 276195; background-image: -moz-linear-gradient (# 3c88cc, # 276195); background-image: -ms-linear-gradient (# 3c88cc, # 276195); background-image: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # 3c88cc), color-stop (100%, # 276195)); background-image: -webkit-linear-gradient (# 3c88cc, # 276195); background-image: -o-linear-gradient (# 3c88cc, # 276195); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; background-image: linear-gradient (# 3c88cc, # 276195); confine: 0; cursore: puntatore; colore: #fff; decorazione del testo: nessuna; allineamento del testo: centro; font-size: 16px; imbottitura: 0px 20px; altezza: 40px; altezza della linea: 40px; larghezza minima: 100 px; text-shadow: 0 1px 0 rgba (0,0,0,0.35); font-family: Arial, Tahoma, sans-serif; -webkit-transition: tutto lineare .2s; -moz-transition: all linear .2s; -o-transizione: tutto lineare .2s; -ms-transizione: tutto lineare .2s; transizione: tutto lineare .2s .blu-btn: hover, .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inserto 0 -2px 0 0 rgba (0,0,0,0,3), inserto 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), riquadro 0 -2px 0 0 rgba (0,0,0,0,3), riquadro 0 12px 20px 2px # 3089d8; box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), riquadro 0 -2px 0 0 rgba (0,0,0,0,3), riquadro 0 12px 20px 2px # 3089d8;  .blu-btn: active -webkit-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0,2), inserto 0 12px 20px 6px rgba (0,0,0,0,2), riquadro 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), riquadro 0 12px 20px 6px rgba (0,0,0,0,2), riquadro 0 0 2px 2px rgba (0,0, 0,0.3); box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), riquadro 0 12px 20px 6px rgba (0,0,0,0,2), riquadro 0 0 2px 2px rgba (0,0,0,0,3 );  .grn-btn display: inline-block; -moz-border-radius: .25em; border-radius: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inserto 0 -2px 0 0 rgba (0,0,0,0,2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), riquadro 0 -2px 0 0 rgba (0,0,0,0,2); background-color: # 659324; background-image: -moz-linear-gradient (# 81bc2e, # 659324); background-image: -ms-linear-gradient (# 81bc2e, # 659324); background-image: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # 81bc2e), color-stop (100%, # 659324)); background-image: -webkit-linear-gradient (# 81bc2e, # 659324); background-image: -o-linear-gradient (# 81bc2e, # 659324); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; background-image: linear-gradient (# 81bc2e, # 659324); confine: 0; cursore: puntatore; colore: #fff; decorazione del testo: nessuna; allineamento del testo: centro; font-size: 16px; imbottitura: 0px 20px; altezza: 40px; altezza della linea: 40px; larghezza minima: 100 px; text-shadow: 0 1px 0 rgba (0,0,0,0.35); font-family: Arial, Tahoma, sans-serif; -webkit-transition: tutto lineare .2s; -moz-transition: all linear .2s; -o-transizione: tutto lineare .2s; -ms-transizione: tutto lineare .2s; transizione: tutto lineare .2s;  .grn-btn: hover, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inserto 0 -2px 0 0 rgba (0,0,0 , 0,3), inserto 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), riquadro 0 -2px 0 0 rgba (0,0,0,0,3), riquadro 0 12px 20px 2px # 85ca26; box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), riquadro 0 -2px 0 0 rgba (0,0,0,0,3), riquadro 0 12px 20px 2px # 85ca26;  .grn-btn: attivo -webkit-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), inserto 0 12px 20px 6px rgba (0,0,0,0,2), riquadro 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), riquadro 0 12px 20px 6px rgba (0,0,0,0,2), riquadro 0 0 2px 2px rgba (0,0, 0,0.3); box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), riquadro 0 12px 20px 6px rgba (0,0,0,0,2), riquadro 0 0 2px 2px rgba (0,0,0,0,3 );

Sto utilizzando transizioni complete per 200 millisecondi sugli stati dei pulsanti al passaggio del mouse e attivi. La cosa eccezionale di questi stili è che puoi applicarli a quasi tutti gli elementi cliccabili. Pulsanti, collegamenti di ancoraggio, elementi di forma o qualsiasi altra cosa che ritieni sia appropriata, anche se questi stili dovrebbero essere usati scarsamente per non sovraccaricare il tuo design.

Pulsanti come questi sono spesso salvati al meglio nello stesso modo in cui Mozilla li usa. Collega questi stili al tuo blog in cui hai pulsanti per download gratuiti o qualcosa di simile. Gli utenti amano interagire con interfacce uniche e questo spesso si traduce in una percentuale molto più alta per la valutazione di click-through.

dimostrazione

Pensieri finali

Spero che tu possa trarre qualche grande lezione da questa raccolta di tecniche di box shadow. Ci sono molte aree diverse su cui potresti concentrarti a includere moduli, caselle modali, pulsanti, barre degli strumenti e persino i layout completi del sito web.

Sentiti libero di implementare questi effetti ombra in porzioni del tuo sito web. Ci sono molte altre tecniche là fuori, ma questa collezione è perfetta sia per i principianti che per gli sviluppatori avanzati. Inoltre, se hai suggerimenti o domande sull'articolo che puoi condividere con noi nell'area di discussione dei commenti qui sotto.