10 ustvarjalnih tehnik, ki uporabljajo CSS3 Box Shadow

Videli smo ogromno napredkov v razvoju spletnih strani CSS3 v zadnjih nekaj letih. Priljubljene spletne strani po vsem svetu so začele vključevati številne edinstvene sloge, kot so zaobljeni vogali in mobilne poizvedbe, ki se odzivajo na mobilne naprave. Še pomembneje pa je to odprlo vrata ustvarjalnim vmesnikom, ki bodo prototipirani v nekaj minutah.

V tem članku želim deliti 10 odrezkov kode, ki se nanašajo na briljantne CSS3 modele v senci. Razložil bom, kako deluje koda in kako lahko vsako senčno polje vgradite v svojo spletno stran.

Ti slogi se pripisujejo velikemu oblikovalskemu vplivu drugih priljubljenih spletnih mest. To je odličen primer, kako trenutni spletni razvijalci ustvarjajo vplivne trende za prihodnost spletnega oblikovanja.

1. Fixed Top Toolbar

Romunska storitev družabnih medijev Trilulilu uporablja plavajočo orodno vrstico okoli celotnega spletnega mesta. To lahko hitro ustvarite z a položaj: fiksno; na katerem koli zgornjem elementu. Toda ta dodatna senčna škatla vpliva na povsem novo raven.

#banner position: fixed; višina: 60px; širina: 100%; na vrh: 0; levo: 0; border-top: 5px solid # a1cb2f; ozadje: #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-indeks: 999999;  #banner h1 line-height: 60px;  

Opazili boste, da je lastnost box-shadow dejansko nastavljena z dokaj preprosto kombinacijo vrednosti. Senca bo padla pod škatlo in na obeh straneh bo zamegljena za 3 px.

Lahko uporabimo rgba () način nanašanja majhne motnosti na senco, tako da se element ne zdi preveč temen. To je prefinjen dodatek, ki bo zagotovo pritegnil pozornost vašega obiskovalca.

• Demo

2. Spustni meni pod-navigacijo

Tukaj je še ena kreativna senčna metoda, ki se uporablja na skalarnem spustnem podmeniju. Podoben učinek si lahko ogledate tudi pri podjetniku, ko se premikate nad vsako od glavnih povezav za navigacijo. To je vsekakor nekoliko bolj zapleteno, vendar vredno potrpežljivosti.

#bar display: block; višina: 45px; ozadje: # 22385a; padding-top: 5px; margin-bottom: 150px; položaj: relativna;  #bar ul rob: 0px 15px; družina pisav: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li ozadje: # 22385a; prikaz: blok; velikost pisave: 1.2em; položaj: relativna; plovec: levo;  #bar ul li a display: block; barva: # fffff7; line-height: 45px; font-weight: krepko; oblazinjenje: 0px 10px; dekoracija besedila: nobena; z-indeks: 9999;  #bar ul li a: hover, #bar ul li a.selected color: # 365977; ozadje: #fff; polmer meje: top-levo: 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; levo: 14px; vrh: 48px; z-indeks: -1; širina: 500px; položaj: absolutno; višina: 90px; obroba: 1px solid # edf0f3; meja-vrh: 0; oblazinjenje: 10px 0 10px 10px; overflow: hidden; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; polmer meje-spodaj-desno-3px; polmer meje-spodaj-desno-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 (moč = 3, smer = 180, barva =" # 333333 ")"; filter: progid: DXImageTransform.Microsoft.Shadow (moč = 3, smer = 180, barva = "# 333333");  

Nav povezave so lahko oblikovane tako, da spreminjajo barvo, ko jih izberete, ali na miški. Dodam še nekaj zaobljenih mej na povezave in v spustnem meniju. To daje lepši občutek, namesto trde robove vse okoli. Prav tako dobro izkoriščam -ms-filter in filter lastnosti, ki so izključno zaščitene za Internet Explorer.

Če ste nastavili poln navigacijski sistem, lahko spremenite nastavitev zaslona na nič in skrijete meni, ko se stran naloži. Nato lahko z uporabo jQuery ciljate na dogodek .hover () in prikažete podnapisno vrstico z posodobljeno vsebino.

• Demo

3. Sijajni senčni gumb

To je morda eden mojih najljubših slogov za ustvarjanje samo zaradi tega, kako dinamično se prikaže na strani. Če ne morete povedati, je to majhen modri gumb, ki ga najdete na domači strani YouTube po prvi prijavi.

blues color: #fff; širina: 190px; višina: 35px; kazalec: kazalec; družina pisav: Arial, Tahoma, sans-serif; velikost pisave: 1.0em; font-weight: krepko; -moz-border-radius: 2px; -webkit-border-radius: 2px; obrobni polmer: 2px; meja-širina: 1px; border-color: # 0053a6 # 0053a6 # 000; barva ozadja: # 6891e7; background-image: -moz-linear-gradient (vrh, # 4495e7 0, # 0053a6 100%); background-image: -ms-linearni gradient (top, # 4495e7 0, # 0053a6 100%); background-image: -o-linearni gradient (top, # 4495e7 0, # 0053a6 100%); background-image: -webkit-gradient (linearno, levo zgoraj, levo spodaj, barvno stop (0, # 4495e7), barvno stop (100%, # 0053a6)); background-image: -webkit-linear-gradient (vrh, # 4495e7 0, # 0053a6 100%); background-image: linearni gradient (do dna, # 4495e7 0, # 0053a6 100%); besedilna senca: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: vložek 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: vložek 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: vložek 0 1px 0 rgba (256, 256, 256, .35); box-shadow: vložek 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: vložek 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: vložek 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 (vrh, # 3a8cdf 0, # 0053a6 100%); background-image: -ms-linearni gradient (vrh, # 3a8cdf 0, # 0053a6 100%); background-image: -o-linearni gradient (zgoraj, # 3a8cdf 0, # 0053a6 100%); background-image: -webkit-gradient (linearno, levo zgoraj, levo spodaj, barvno stop (0, # 3a8cdf), barvno zaustavitev (100%, # 0053a6)); background-image: -webkit-linear-gradient (vrh, # 3a8cdf 0, # 0053a6 100%); background-image: linearni gradient (do spodaj, # 3a8cdf 0, # 0053a6 100%);  .blues: aktivno border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: vložek 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-shadow: vložek 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-box-shadow: vložek 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; box-shadow: vložek 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-linearni gradient (top, # 005ab4 0, # 175ea6 100%); background-image: -ms-linearni gradient (top, # 005ab4 0, # 175ea6 100%); background-image: -o-linearni gradient (top, # 005ab4 0, # 175ea6 100%); background-image: -webkit-gradient (linearno, levo zgoraj, levo spodaj, barvno stop (0, # 005ab4), barvno stop (100%, # 175ea6)); background-image: -webkit-linear-gradient (vrh, # 005ab4 0, # 175ea6 100%); background-image: linearni gradient (do spodaj, # 005ab4 0, # 175ea6 100%);  

Celotna koda gumba je veliko za pogledati, vendar poskušamo podpirati čim več brskalnikov. Obstajajo sence besedila in senčne škatle s spremljajočo podporo za MS Internet Explorer 7+. Tudi mi nastavljamo slika ozadja lastnost z gradientom CSS3 nad številnimi predponami proizvajalca.

Toda, če imate radi ta slog oblikovanja potem Hover in aktivne države bodo tudi pritegnile vašo pozornost. Običajno posodabljamo obrobo, da vključimo nekaj senc v notranjost, ko pritisnete navzdol, medtem ko posodabljate gradient ozadja, da se prikaže nekoliko temnejši.

Ker na gumbu ni slik, lahko posodobite hex vrednosti in jih pretvorite v praktično katero koli barvno shemo.

• Demo

4. Obvestila Izhodni meni

Nisem velik uporabnik Facebooka, vendar sem opazil nekaj tehnik uporabniškega vmesnika iz njihovih preoblikovanj. Ta meni se lahko primerja z vašimi obvestili ali zahtevami za prijatelje, ki se pojavijo na domači strani.

.flyout širina: 310px; margin-top: 10px; velikost pisave: 11px; položaj: relativna; družina pisav: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; barva ozadja: bela; oblazinjenje: 9px 11px; ozadje: rgba (255, 255, 255, 0.9); obroba: 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; obrobni polmer: 3px;  .flyout #tip ozadje-slika: url ('images / tip.png'); ponovitev v ozadju: brez ponovitve; velikost ozadja: auto; višina: 11px; položaj: absolutno; na vrh: -11px; levo: 25px; širina: 20px;  .flyout h2 preoblikovanje besedila: velike črke; barva: # 666; velikost pisave: 1.2em; padding-bottom: 5px; margin-bottom: 12px; obroba spodaj: 1px trdna #dcdbda;  .flyout p padding-bottom: 25px; velikost pisave: 1.1em; barva: # 222;  

Tukaj ni veliko novega, ki bi prikazal kodo za premikanje misli. Uporabljam majhno .konico razred z notranjim elementom razpona za dodajanje trikotnika opisa orodja. Možno je ustvariti čiste trikotnike CSS3, vendar ta metoda ni lahka, kot si lahko predstavljate. Če vam je bolj všeč ta način, je morda vredno nekaj skupaj. Vendar lastnosti rotacije CSS3 niso povsod podprte; medtem slike ne zahtevajo nobene nadomestne metode.

• Demo

5. Apple Page Wrapper

Obstaja toliko impresivnih sence CSS3, ki jih lahko najdete na uradni spletni strani podjetja Apple. Ta primer spodaj je majhen zabojček z nekaj razponi stolpcev. Ko pogledate preko Appleove postavitve, boste opazili veliko njihovih strani, sestavljenih iz številnih ovojnih škatel.

.jabolčni list širina: 100%; prikaz: blok; višina: 150px; ozadje: belo; meja: 1px trdna; border-color: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-radius: 4px; obrobni polmer: 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: levo; velikost škatle: obrobno polje; širina: 250px; višina: 150px; oblazinjenje: 16px 7px 6px 22px; font: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; barva: # 343434; obroba desno: 1px trdno #dadada;  

Podobno stran lahko razdelite po vsebini različnih velikosti in širine. Čeprav sem v ta demo postavil nekaj stolpcev, to ni potrebna tehnika formatiranja. Senca za škatle bo najbolje ustrezala beli / sivi podlagi. Ampak mislim, da bi bilo prikazovanje nad barvo svetlobe precej dobro.

• Demo

6. Apple Content Box

Ta drugi slog vsebine polje na spletni strani Apple se uporablja večinoma za kolone modelov. Te so v glavnem na dnu strani in prikazujejo posle in druge sorodne informacije. To je popolnoma drugačen slog oblikovanja, pri čemer je senčna škatla prikazana od zgoraj navzdol.

.applebox širina: avto; višina: 85px; velikost škatle: obrobno polje; ozadje: # f5f5f5; oblazinjenje: 20px 20px 10px; marža: 10px 0 20px; obroba: 1px trdna #ccc; obrobni polmer: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-obmejni polmer: 4px; -webkit-box-shadow: vložek 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: vložek 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: vložek 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col širina: 140px; plovec: levo; marža: 0 0 0 30px;  

Mislim, da ta koda ne bi smela biti pretežka za spremljanje in kopiranje v drug zaboj za div. Uporabljamo samo senco, ki jo uporabljamo inset s prosojnimi barvnimi kodami rgba alpha. Čeprav imamo senco padavine čisto črno, prikazujemo le 30% motnosti.

• Demo

7. Predstavljene povezave

To je verjetno moj najljubši slog sence iz Appleove trenutne spletne strani. Na strani iCloud bi morali najti živo demo slog te tehnike s serijo plavajočih polj za povezavo.

.applefeature višina: 150px; margin: 8px; navpično poravnavanje: vrh; prikaz: inline-block;  .applefeature a display: block; širina: 168px; višina: 140px; obroba: 1px trdna #ccc; barva: # 333; dekoracija besedila: nobena; font-weight: krepko; line-height: 1.3em; ozadje: # f7f7f7; -webkit-box-shadow: vložek 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: vložek 0 1px 2px rgba (0, 0, 0, .3); box-shadow: vložek 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; obrobni polmer: 4px;  .applefeature a: hover ozadje: #fafafa; ozadje: -webkit-gradient (linearno, 0% 0%, 0% 100%, od (#fff), do (# f7f7f7)); ozadje: -moz-linear-gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: vložek 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: vložek 0 1px 2px rgba (0,0,0, .3); box-shadow: vložek 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; obrobni polmer: 4px;  .applefeature a img display: block; margin: 26px auto 4px;  .applefeature a h4 display: block; širina: 160px; velikost pisave: 1.3em; družina pisav: Arial, Tahoma, sans-serif; barva: # 646464; text-align: center;  

Te prikazane povezave so nastavljene na fiksno širino in vključujejo ločeno ikono in besedilo na zaslonu. Primer Applea uporablja podobno senčno polje, kot smo videli v prejšnjem polju z vsebino. Vendar pa Celotno polje lahko zdaj aktivirate kot povezavo ki vključuje obe. \ t : hover in : aktivno držav. Obstaja veliko prilagodljivosti s to povezavo polje in morate poskusiti igranje okrog z izvorno kodo.

Možno je skrajšati višino / širino in ustvariti veliko manjši seznam povezav. To so lahko poglavja ali strani v članku ali pa podmeni omeji s ikonami povezav. To je resnično velik nabor novejših CSS3 tehnik, ki prikazujejo, koliko moči imate kot spletni oblikovalec.

• Demo

8. Uokvirjene slike

Na ta primer sem dodal sivo ozadje, tako da lahko jasneje vidite sloge senčnih polj. To polje je podobno predstavljenim posnetkom predogleda na wordpress.com, razen da sem dodal malo več globine v izvorno kodo.

.wpframe ozadje: #fff; obrobni polmer: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; oblazinjenje: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; box-shadow: 1px 2px 1px # d1d1d1;  

Ker so slike podane z majhno oblogo na obeh straneh, se ta okvir pojavi kot velika bela obroba. Barvo ozadja lahko vedno posodobite ali pa dodate majhno zunanjo mejo, da ločite sliko od ozadja. Toda ta precej poenostavljen nabor stilov se lahko premakne v različne tehnike senčnega polja. Igrajte se s kodo in si oglejte, kako lahko izboljšate slike na svoji spletni strani.

• Demo

9. Svetleča vnosna polja

To idejo sem dobil, ko sem nekajkrat obiskal stran za prijavo v Pinterest. Njihovi animirani slogi resnično prikazujejo nekaj zgovornih primerov večih senčnih polj, tako zunaj kot vstavljenih.

.formwrap display: block; margin-bottom: 15px;  .formwrap nalepka prikaz: inline-block; širina: 80px; velikost pisave: 11px; font-weight: krepko; barva: # 444; družina pisav: Arial, Tahoma, sans-serif;  .formwrap .shadowfield position: relative; širina: 250px; velikost pisave: 17px; družina pisav: "Helvetica Neue", Arial, sans-serif; font-weight: normalna; ozadje: # f7f8f8; barva: # 7c7c7c; line-height: 1.4; oblazinjenje: 6px 12px; oris: nič; prehod: vse 0.2s so enostavnejše-out-out; -webkit-prehod: vsi 0.2s poenostavijo-out-out 0s; -moz-prehod: vsi 0.2s poenostavijo-out-out 0s; meja: 1px solid # ad9c9c; obrobni polmer: 6px 6px 6px 6px; box-shadow: 0 1px rgba (34, 25, 25, 0.2) inset, 0 1px #fff;  .formwrap .shadowfield: focus border-color: # 930; ozadje: #fff; barva: # 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: vložek 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);  

Čeprav so začetni slogi zelo privlačni, me privlačijo učinke prehoda, ko se osredotočite na vsako vnosno polje. Lahko jih premikate in vidite takojšnjo razliko v toliko lastnostih. Zunanja senčna svetleča škatla se uporablja skupaj z osveženo senco. Tudi barva besedila postane svetlejša, ko ste osredotočeni na določen vhod, nato pa se zbledi, ko se raztegnete.

Tudi kopiranje preko enega od teh učinkov bi močno izboljšalo uporabniško izkušnjo v poljih obrazcev. Prepričajte se, da ne greste predaleč do točke, kjer so vaše oblike komaj uporabne. Večina obiskovalcev pa bo uživala v prijetnih estetskih učinkih, ki bodo spodbujali tudi interakcijo in nadaljnje sodelovanje z vašo spletno stranjo.

• Demo

10. Elastični senčni gumbi

Te edinstvene senčne tipke so oblikovane s počasnim prehodom med hover in aktivnim stanjem. Podobne primere najdete na Mozilla domači strani z velikimi “Prenesite Firefox” gumb. Nekateri od box-shadow Lastnosti dejansko združujejo tri različne sence v en ukaz.

.blu-btn prikaz: inline-blok; -moz-border-radius: .25em; obrobni polmer: .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), inset 0 -2px 0 0 rgba (0,0,0,0,2); box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0.2); barva ozadja: # 276195; background-image: -moz-linear-gradient (# 3c88cc, # 276195); background-image: -ms-linearni gradient (# 3c88cc, # 276195); background-image: -webkit-gradient (linearno, levo zgoraj, levo spodaj, barvno stop (0%, # 3c88cc), barvno stop (100%, # 276195)); background-image: -webkit-linear-gradient (# 3c88cc, # 276195); background-image: -o-linearni 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: linearni gradient (# 3c88cc, # 276195); meja: 0; kazalec: kazalec; barva: #fff; dekoracija besedila: nobena; text-align: center; velikost pisave: 16px; oblazinjenje: 0px 20px; višina: 40px; line-height: 40px; min-width: 100px; besedilna senca: 0 1px 0 rgba (0,0,0,0.35); družina pisav: Arial, Tahoma, sans-serif; -webkit-prehod: vsi linearni .2s; -moz-prehod: vsi linearni .2s; -o-prehod: vsi linearni .2s; -ms-prehod: vsi linearni .2s; prehod: vsi linearni .2s .blu-btn: hover, .blu-btn: fokus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0,0.3), vložek 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0,0.3), inset 0 12px 20px 2px # 3089d8; box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0.3), inset 0 12px 20px 2px # 3089d8;  .blu-btn: aktivno -webkit-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0,2), inset 0 12px 20px 6px rgba (0,0,0,0,2), inset 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: vložek 0 2px 0 0 rgba (0,0,0,0.2), inset 0 12px 20px 6px rgba (0,0,0,0.2), inset 0 0 2px 2px rgba (0,0, 0,0,3); box-shadow: vložek 0 2px 0 0 rgba (0,0,0,0.2), inset 0 12px 20px 6px rgba (0,0,0,0.2), inset 0 0 2px 2px rgba (0,0,0,0,3 );  .grn-btn display: inline-block; -moz-border-radius: .25em; obrobni polmer: .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), inset 0 -2px 0 0 rgba (0,0,0,0,2); box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0.2); barva ozadja: # 659324; background-image: -moz-linearni gradient (# 81bc2e, # 659324); background-image: -ms-linearni gradient (# 81bc2e, # 659324); background-image: -webkit-gradient (linearno, levo zgoraj, levo spodaj, barvno stop (0%, # 81bc2e), barvno stop (100%, # 659324)); background-image: -webkit-linear-gradient (# 81bc2e, # 659324); background-image: -o-linearni 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: linearni gradient (# 81bc2e, # 659324); meja: 0; kazalec: kazalec; barva: #fff; dekoracija besedila: nobena; text-align: center; velikost pisave: 16px; oblazinjenje: 0px 20px; višina: 40px; line-height: 40px; min-width: 100px; besedilna senca: 0 1px 0 rgba (0,0,0,0.35); družina pisav: Arial, Tahoma, sans-serif; -webkit-prehod: vsi linearni .2s; -moz-prehod: vsi linearni .2s; -o-prehod: vsi linearni .2s; -ms-prehod: vsi linearni .2s; prehod: vsi linearni .2s;  .grn-btn: hover, .grn-btn: fokus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0 , 0,3), vložek 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,3), inset 0 12px 20px 2px # 85ca26; box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0.3), inset 0 12px 20px 2px # 85ca26;  .grn-btn: aktivno -webkit-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), inset 0 12px 20px 6px rgba (0,0,0,0.2), inset 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: vložek 0 2px 0 0 rgba (0,0,0,0.2), inset 0 12px 20px 6px rgba (0,0,0,0.2), inset 0 0 2px 2px rgba (0,0, 0,0,3); box-shadow: vložek 0 2px 0 0 rgba (0,0,0,0.2), inset 0 12px 20px 6px rgba (0,0,0,0.2), inset 0 0 2px 2px rgba (0,0,0,0,3 );  

V stanju mirovanja in aktivnih gumbov uporabljam polne prehode za 200 milisekund. Kaj je tako veliko o teh stilov je, da jih lahko uporabite za skoraj vsak klikni element. Gumbi, povezave sidra, elementi obrazca ali karkoli drugega, kar menite, da je primerno - čeprav je treba te sloge uporabljati redko, da ne bi preobremenili svojega modela.

Gumbi, kot so ti, se pogosto najbolje shranijo na enak način, kot jih uporablja Mozilla. Priložite te sloge v svoj blog, kjer imate gumbe za freebie prenose ali kaj podobnega. Uporabniki radi sodelujejo z edinstvenimi vmesniki in to se pogosto prevede v veliko višji odstotek za vašo oceno klikov.

• Demo

Končne misli

Upam, da boste lahko iz te zbirke tehnik za senčno polje vzeli nekaj dobrih lekcij. Obstaja veliko različnih področij, na katere bi se lahko osredotočili, vključno z obrazci, modalnimi polji, gumbi, orodnimi vrsticami in celo popolno postavitvijo spletnega mesta.

Vsak od teh senčnih učinkov lahko uveljavite v delih vaše spletne strani. Obstaja veliko drugih tehnik, vendar je ta zbirka odlična tako za začetnike kot za napredne razvijalce. Tudi, če imate kakšne predloge ali vprašanja o članku, ki jih lahko delite z nami v razpravi za komentarje spodaj.