10 kreativnih tehnika pomoću CSS3 kutije sjena

Vidjeli smo ogroman broj napredaka u razvoju CSS3 weba u posljednjih nekoliko godina. Popularne web-lokacije diljem Interneta počele su sadržavati mnoge jedinstvene stilove kao što su zaobljeni kutovi i medijski upiti s mobilnim uređajima. No, što je još važnije, to je otvorilo vrata kreativnim sučeljima koja su prototipirana u nekoliko minuta.

U ovom članku želim podijeliti 10 isječaka koda koji se odnose na briljantne CSS3 crteže u kutiji. Objasnit ću kako radi kôd i kako možete implementirati svaku kutiju u svoju web-lokaciju.

Ovi stilovi se sve pripisuju velikom utjecaju dizajna s drugih popularnih web-mjesta. Ovo je sjajan primjer kako trenutni web-programeri grade utjecajne trendove za budućnost web-dizajna.

1. Fiksna glavna alatna traka

Rumunjska društvena mreža Trilulilu koristi plutajuću gornju alatnu traku oko cijele web stranice. To se može brzo izraditi pomoću a položaj: fiksno; na bilo kojem gornjem elementu trake. No, ova dodatna sjena u kutiji utječe na novu razinu.

#banner position: fixed; visina: 60px; širina: 100%; na vrh: 0; lijevo: 0; border-top: 5px solid # a1cb2f; pozadina: #fff; -moz-box-shadow: 0 2px 3px 0px rgba (0, 0, 0,16); -webkit-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0.16); kutija-sjena: 0 2px 3px 0px rgba (0, 0, 0, 0.16); z-indeks: 999999;  #banner h1 line-height: 60px;  

Primijetit ćete da je svojstvo box-shadow zapravo postavljeno s prilično jednostavnom kombinacijom vrijednosti. Sjena će pasti ispod kutije i zamagliti se za 3 piksela s obje strane.

Možemo koristiti RGBA () način nanošenja lagane neprozirnosti na sjenu, tako da se element ne čini pretamnom. To je suptilni dodatak koji će zasigurno privući pažnju vašeg posjetitelja.

• Demo

2. Pad-navigacija

Ovdje je još jedna metoda sjenila kreativnog okvira koja se primjenjuje na skalarni padajući izbornik. Sličan učinak možete vidjeti i na Poduzetniku dok prelazite preko svake od glavnih glavnih navigacijskih veza. Ovo je definitivno malo složenije za konfiguriranje, ali vrijedno strpljenja.

#bar display: block; visina: 45px; pozadina: # 22385a; padding-top: 5px; margin-bottom: 150px; pozicija: relativna;  #bar ul margin: 0px 15px; obitelj fonta: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li pozadina: # 22385a; prikaz: blok; veličina fonta: 1.2em; pozicija: relativna; plutajući: lijevo;  #bar ul li a display: block; boja: # fffff7; visina linije: 45px; font-weight: bold; obloga: 0px 10px; text-decoration: none; z-indeks: 9999;  #bar ul li a: hover, #bar ul li a.selected color: # 365977; pozadina: #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; lijevo: 14px; vrh: 48px; z-indeks: -1; širina: 500px; položaj: apsolutni; visina: 90px; granica: 1px solid # edf0f3; rub-vrh: 0; obloga: 10px 0 10px 10px; preljev: skriven; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; radius: border-bottom-right-radius: 3px; radius: 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); kutija-sjena: 0px 2px 7px rgba (0,0,0,0,25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (snaga = 3, smjer = 180, boja =" # 333333 ")"; filter: progid: DXImageTransform.Microsoft.Shadow (snaga = 3, smjer = 180, boja = "# 333333");  

Nav veze mogu biti oblikovane tako da mijenjaju boju kada su odabrane ili na mišu. Također dodajem neke zaobljene granice na veze i preko padajućeg izbornika. To daje ljepši osjećaj umjesto tvrdih rubova. Također dobro koristim -ms filter i filtar svojstva koja su isključivo vlasnička za Internet Explorer.

Ako postavite potpuni navigacijski sustav, moći ćete promijeniti postavku prikaza na ništa i sakriti izbornik nakon što se stranica učita. Zatim pomoću neke jQuery možete ciljati .hover () događaj i prikazati podnav bar s ažuriranim sadržajem.

• Demo

3. Sjajni gumb sjene

Ovo je vjerojatno jedan od mojih omiljenih stilova za stvaranje samo zato što se dinamički pojavljuje na stranici. Ako ne znate, ovo je mala plava tipka pronađena na početnoj stranici usluge YouTube nakon prve prijave.

blues boja: #fff; širina: 190px; visina: 35px; pokazivač: pokazivač; obitelj fontova: Arial, Tahoma, sans-serif; veličina fonta: 1.0em; font-weight: bold; -moz-border-radius: 2px; -webkit-border-radius: 2px; granični radijus: 2px; granica-širina: 1px; border-color: # 0053a6 # 0053a6 # 000; boja pozadine: # 6891e7; background-image: -moz-linearni gradijent (gore, # 4495e7 0, # 0053a6 100%); background-image: -ms-linearni gradijent (gore, # 4495e7 0, # 0053a6 100%); background-image: -o-linearni gradijent (gore, # 4495e7 0, # 0053a6 100%); background-image: -webkit-gradijent (linearni, lijevi vrh, lijevo dno, boja-stop (0, # 4495e7), zaustavljanje boje (100%, # 0053a6)); background-image: -webkit-linearni gradijent (gore, # 4495e7 0, # 0053a6 100%); background-image: linearni gradijent (na dnu, # 4495e7 0, # 0053a6 100%); tekst-sjena: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: umetak 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: umetak 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: umetak 0 1px 0 rgba (256, 256, 256, .35); kutija-sjena: umetak 0 1px 0 rgba (256, 256, 256, .35); filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: lebdjeti border-color: # 002d59 # 002d59 # 000; -moz-box-shadow: umetak 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -ms-box-shadow: umetak 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -webkit-box-shadow: umetak 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); kutija-sjena: umetak 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-linearni gradijent (vrh, # 3a8cdf 0, # 0053a6 100%); background-image: -ms-linearni gradijent (vrh, # 3a8cdf 0, # 0053a6 100%); background-image: -o-linearni gradijent (gore, # 3a8cdf 0, # 0053a6 100%); background-image: -webkit-gradijent (linearni, lijevi vrh, lijevo dno, boja-stop (0, # 3a8cdf), zaustavljanje boje (100%, # 0053a6)); background-image: -webkit-linear-gradijent (vrh, # 3a8cdf 0, # 0053a6 100%); background-image: linearni gradijent (na dnu, # 3a8cdf 0, # 0053a6 100%);  .blues: active border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: umetak 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-shadow: umetak 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-box-shadow: umetak 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; kutija-sjena: umetak 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 gradijent (vrh, # 005ab4 0, # 175ea6 100%); background-image: -ms-linearni gradijent (gore, # 005ab4 0, # 175ea6 100%); background-image: -o-linearni gradijent (gore, # 005ab4 0, # 175ea6 100%); background-image: -webkit-gradijent (linearni, lijevi vrh, lijevo dno, boja-stop (0, # 005ab4), zaustavljanje boje (100%, # 175ea6)); background-image: -webkit-linear-gradijent (vrh, # 005ab4 0, # 175ea6 100%); background-image: linearni gradijent (do dna, # 005ab4 0, # 175ea6 100%);  

Kôd cijelog gumba je puno za pogledati, ali pokušavamo za podršku što je više moguće preglednika. Postoje tekstne sjene i sjenila s pripadajućom podrškom za MS Internet Explorer 7+. Također postavljamo pozadinska slika svojstva s CSS3 gradijentima preko velikog broja prefiksa određenih proizvođača.

Ali ako volite ovaj stil dizajna onda Hover i aktivne države također će privući vašu pažnju. U osnovi ažuriramo obrub kako bismo uključili neke sjene unutra dok gurate prema dolje, dok ažurirate gradijent pozadine kako bi se prikazao malo tamniji.

Budući da na gumbu nema slika, možete ažurirati heksadecimalne vrijednosti i pretvoriti ih u praktički bilo koju shemu boja.

• Demo

4. Obavijesti Flyout izbornik

Nisam veliki korisnik Facebooka, ali sam primijetio neke tehnike korisničkog sučelja iz njihovih redizajna. Ovaj se izbornik može usporediti s vašim obavijestima ili zahtjevima prijatelja koji se pojavljuju na početnoj stranici.

.flyout širina: 310px; margina-gore: 10px; veličina fonta: 11px; pozicija: relativna; obitelj fontova: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; boja pozadine: bijela; obloga: 9px 11px; pozadina: rgba (255, 255, 255, 0.9); granica: 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); kutija-sjena: 0 3px 8px rgba (0, 0, 0, .25); -webkit-border-radius: 3px; -moz-border-radius: 3px; granični polumjer: 3px;  .flyout #tip background-image: url ('images / tip.png'); pozadina-ponavljanje: nema ponavljanja; veličina pozadine: auto; visina: 11px; položaj: apsolutni; vrh: -11px; lijevo: 25px; širina: 20px;  .flyout h2 text-transform: velika slova; boja: # 666; veličina fonta: 1.2em; padding-bottom: 5px; margin-bottom: 12px; granica-dno: 1px čvrsto #dcdbda;  .flyout p padding-bottom: 25px; veličina fonta: 1.1em; boja: # 222;  

Ovdje nema mnogo novog koda za umivanje. Koristim malu .Savjet klasa s elementom unutarnjeg raspona za dodavanje trokuta tooltip-a. Moguće je stvoriti čiste CSS3 trokute, ali ova metoda nije jednostavna, kao što možete zamisliti. Ako vam je draže ova metoda, možda vrijedi skupiti nešto. Ali svojstva rotacije CSS3 nisu svugdje podržana; u međuvremenu slike ne zahtijevaju nikakvu rezervnu metodu.

• Demo

5. Omotač stranice Apple

Postoji toliko mnogo impresivnih CSS3 sjenki koje možete pronaći na službenim stranicama tvrtke Apple. Ovaj primjer u nastavku je mali spremnik s nekoliko stupnjeva. Kada gledate preko Appleovog izgleda, primijetit ćete mnoge njihove stranice koje čine brojne kutije za omotavanje.

.jabukovac (širina: 100%; prikaz: blok; visina: 150px; pozadina: bijela; rub: 1px čvrsto; border-color: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-radius: 4px; granični radijus: 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; kutija-sjena: rgba (0, 0, 0, 0.3) 0 1px 3px;  .applewrap .col float: lijevo; dimenzioniranje kutije: granični okvir; širina: 250px; visina: 150px; obloga: 16px 7px 6px 22px; font: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; boja: # 343434; granica desno: 1px solid #dadada;  

Mogli biste sastaviti sličnu stranicu podijeljenu prema kutijama sadržaja različite širine i visine. Iako sam u ovaj demo stavio nekoliko stupaca, to nije potrebna tehnika formatiranja. Kutija sjena najbolje će se uklopiti u bijelo / sivo pozadinu. Ali mislim da bi prikazivanje bilo koje boje bilo prilično dobro.

• Demo

6. Apple Content Box

Ovaj drugi stil sadržaja na Appleovoj web stranici koristi se uglavnom za dizajn stupaca. To su prvenstveno na dnu stranice koje prikazuju ponude i druge srodne informacije. To je potpuno drugačiji stil dizajna s kutijom koja se prikazuje odozgo prema dolje.

.applebox širina: auto; visina: 85px; dimenzioniranje kutije: granični okvir; pozadina: # f5f5f5; obloga: 20px 20px 10px; margina: 10px 0 20px; granica: 1px solid #ccc; granični radijus: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-granični radijus: 4px; -webkit-box-shadow: umetak 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: umetak 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: umetak 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col širina: 140px; plutajući: lijevo; margina: 0 0 0 30px;  

Mislim da ovaj kôd ne bi trebao biti previše težak za praćenje i kopirati na drugi div kontejner. Koristi se jedina sjena koju koristimo umetak s rgba alfa-transparentnim kodovima boja. Dakle, iako je sjena postavljena na čisto crno, prikazujemo samo oko 30% neprozirnosti.

• Demo

7. Istaknute veze

Ovo je vjerojatno moj omiljeni okvir sjena iz Appleove trenutne web stranice. Trebali biste pronaći demo stil ove tehnike na stranici iCloud s nizom plutajućih okvira kutija.

.applefeature visina: 150px; margina: 8px; vertikalno poravnavanje: vrh; prikaz: inline-blok;  .applefeature a display: block; širina: 168px; visina: 140px; granica: 1px solid #ccc; boja: # 333; text-decoration: none; font-weight: bold; line-height: 1.3em; pozadina: # f7f7f7; -webkit-box-shadow: umetak 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: umetak 0 1px 2px rgba (0, 0, 0, .3); kutija-sjena: umetak 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; granični radijus: 4px;  .applefeature a: hover pozadina: #fafafa; pozadina: -webkit-gradijent (linearno, 0% 0%, 0% 100%, od (#fff), do (# f7f7f7)); background: -moz-linear-gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: umetak 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: umetak 0 1px 2px rgba (0,0,0, .3); kutija-sjena: umetak 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; granični radijus: 4px;  .applefeature a img display: block; margina: 26px auto 4px;  .applefeature a h4 display: block; širina: 160px; veličina fonta: 1.3em; obitelj fontova: Arial, Tahoma, sans-serif; boja: # 646464; poravnavanje teksta: centar;  

Te istaknute veze postavljene su na fiksnu širinu i uključuju zasebnu ikonu i tekst prikaza. Primjer tvrtke Apple koristi sličnu sjenu kutije kao što smo vidjeli u prethodnom okviru sadržaja. Međutim cijeli okvir sada može biti aktiviran kao veza koji uključuje oba : hover i :aktivan Države. Uz ovu vezu postoji velika fleksibilnost i trebali biste se pokušati igrati s izvornim kodom.

Moguće je skratiti visinu / širinu i stvoriti mnogo manji popis veza. To bi mogao biti skup poglavlja ili stranica u članku, ili možete podmeni ograničiti ikonama veza. Iskreno govoreći, to je veliki skup novih CSS3 tehnika koje pokazuju koliko snage imate kao web dizajner.

• Demo

8. Uokvirene slike

Na ovaj sam primjer dodao sivu pozadinu kako biste jasnije mogli vidjeti stilove okvira sjenila. Ovaj okvir je sličan značajkama pretpregleda snimaka na wordpress.com osim što sam dodao malo više dubine izvornom kodu.

.wpframe pozadina: #fff; granični radijus: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; obloga: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; kutija-sjena: 1px 2px 1px # d1d1d1;  

Budući da su slike dobivale malu podlogu na obje strane, ovaj okvir se pojavljuje kao velika bijela granica. Uvijek možete ažurirati boju pozadine ili čak dodati malu vanjsku granicu kako biste odvojili sliku od pozadine. No, ovaj prilično pojednostavljeni skup stilova može se manevrirati u različite tehnike kutije sjena. Igrajte se s kodom i pogledajte kako možete poboljšati dizajn slika na vlastitoj web-lokaciji.

• Demo

9. Sjajna polja za unos

Tu ideju sam dobio nakon što sam nekoliko puta posjetio stranicu za prijavu na Pinterest. Njihovi animirani stilovi doista pokazuju neke rječite primjere višestrukih sjenila unutarnjeg okvira, kako izvana tako i umetnutih.

.formwrap display: block; margin-bottom: 15px;  .formwrap naljepnica display: inline-block; širina: 80px; veličina fonta: 11px; font-weight: bold; boja: # 444; obitelj fontova: Arial, Tahoma, sans-serif;  .formwrap .shadowfield position: relative; širina: 250px; veličina fonta: 17px; obitelj fontova: "Helvetica Neue", Arial, sans-serif; težina fonta: normalna; pozadina: # f7f8f8; boja: # 7c7c7c; visina linije: 1,4; obloga: 6px 12px; pregled: nema; prijelaz: svi 0.2s olakšavaju u izlazu 0s; -webkit-tranzicija: svi 0.2s olakšavaju u izlazu 0s; -moz-tranzicija: svi 0.2s olakšavaju u izlazu 0s; granica: 1px solid # ad9c9c; granični polumjer: 6px 6px 6px 6px; box-shadow: 0 1px rgba (34, 25, 25, 0.2) umetnut, 0 1px #fff;  .formwrap .shadowfield: focus border-color: # 930; pozadina: #fff; boja: # 5d5d5d; kutija-sjena: umetak 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: umetak 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: umetak 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);  

Iako su početni stilovi vrlo atraktivni, privlači me efekte prijelaza dok se fokusirate na svako polje za unos. Možete staviti karticu između njih i vidjeti trenutnu razliku u toliko mnogo svojstava. Vanjska sjena s upaljenom kutijom primjenjuje se zajedno s ažuriranom inačicom u sjeni. Također i Boja teksta postaje svjetlija dok ste fokusirani na određeni ulaz, a zatim se gubi dok se defokusirate.

Čak i kopiranje preko jednog od tih efekata uvelike bi poboljšalo korisničko iskustvo polja polja obrasca. Budite sigurni da ne idete predaleko do točke gdje su vaši obrasci jedva upotrebljivi. Međutim, većina posjetitelja će uživati ​​u ugodnim estetskim efektima koji također potiču interakciju i daljnje uključivanje u vašu web stranicu.

• Demo

10. Gumbi elastične sjene

Ovi jedinstveni gumbi za sjene su stilizirani sporim prijelazom tijekom lebdenja i aktivnih stanja. Slične primjere možete pronaći na Mozilla početnoj stranici s njihovom velikom “Preuzmite Firefox” dugme. Neki od kutija-sjena svojstva zapravo kombiniraju tri različite sjene u jednu naredbu.

.blu-btn display: inline-block; -moz-border-radius: .25em; granični radijus: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), umetak 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), umetak 0 -2px 0 0 rgba (0,0,0,0.2); kutija-sjena: 0 2px 0 0 rgba (0,0,0,0.1), umetak 0 -2px 0 0 rgba (0,0,0,0.2); boja pozadine: # 276195; background-image: -moz-linearni gradijent (# 3c88cc, # 276195); background-image: -ms-linearni gradijent (# 3c88cc, # 276195); background-image: -webkit-gradijent (linearni, lijevi vrh, lijevo dno, boja-stop (0%, # 3c88cc), zaustavljanje boje (100%, # 276195)); background-image: -webkit-linearni gradijent (# 3c88cc, # 276195); background-image: -o-linearni gradijent (# 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 gradijent (# 3c88cc, # 276195); granica: 0; pokazivač: pokazivač; boja: #fff; text-decoration: none; poravnavanje teksta: centar; veličina fonta: 16px; obloga: 0px 20px; visina: 40px; visina linije: 40px; min-width: 100px; tekst-sjena: 0 1px 0 rgba (0,0,0,0.35); obitelj fontova: Arial, Tahoma, sans-serif; -webkit-prijelaz: svi linearni .2s; -moz-prijelaz: svi linearni .2s; -o-prijelaz: svi linearni .2s; -ms-tranzicija: svi linearni .2s; prijelaz: svi linearni .2s .blu-btn: hover, .blu-btn: fokus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), umetak 0 -2px 0 0 (0,0,0,0.3), umetak 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), umetak 0 -2px 0 0 rgba (0,0,0,0.3), umetak 0 12px 20px 2px # 3089d8; kutija-sjena: 0 2px 0 0 rgba (0,0,0,0.1), umetak 0 -2px 0 0 rgba (0,0,0,0.3), umetak 0 12px 20px 2px # 3089d8;  .blu-btn: aktivan -webkit-box-shadow: umetak 0 2px 0 0 rgba (0,0,0,0.2), umetak 0 12px 20px 6px rgba (0,0,0,0.2), umetak 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: umetak 0 2px 0 0 rgba (0,0,0,0.2), umetak 0 12px 20px 6px rgba (0,0,0,0.2), umetak 0 0 2px 2px rgba (0,0, 0,0.3); kutija-sjena: umetak 0 2px 0 0 rgba (0,0,0,0.2), umetak 0 12px 20px 6px rgba (0,0,0,0.2), umetak 0 0 2px 2px rgba (0,0,0,0,3 );  .grn-btn display: inline-block; -moz-border-radius: .25em; granični radijus: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), umetak 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), umetak 0 -2px 0 0 rgba (0,0,0,0.2); kutija-sjena: 0 2px 0 0 rgba (0,0,0,0.1), umetak 0 -2px 0 0 rgba (0,0,0,0.2); boja pozadine: # 659324; background-image: -moz-linearni gradijent (# 81bc2e, # 659324); background-image: -ms-linearni gradijent (# 81bc2e, # 659324); background-image: -webkit-gradijent (linearni, lijevi vrh, lijevo dno, boja-stop (0%, # 81bc2e), zaustavljanje boje (100%, # 659324)); background-image: -webkit-linearni gradijent (# 81bc2e, # 659324); background-image: -o-linearni gradijent (# 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 gradijent (# 81bc2e, # 659324); granica: 0; pokazivač: pokazivač; boja: #fff; text-decoration: none; poravnavanje teksta: centar; veličina fonta: 16px; obloga: 0px 20px; visina: 40px; visina linije: 40px; min-width: 100px; tekst-sjena: 0 1px 0 rgba (0,0,0,0.35); obitelj fontova: Arial, Tahoma, sans-serif; -webkit-prijelaz: svi linearni .2s; -moz-prijelaz: svi linearni .2s; -o-prijelaz: svi linearni .2s; -ms-tranzicija: svi linearni .2s; prijelaz: svi linearni .2s;  .grn-btn: hover, .grn-btn: fokus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), umetak 0 -2px 0 0 rgba (0,0,0 0,3), umetak 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), umetak 0 -2px 0 0 rgba (0,0,0,0.3), umetak 0 12px 20px 2px # 85ca26; kutija-sjena: 0 2px 0 0 rgba (0,0,0,0.1), umetak 0 -2px 0 0 rgba (0,0,0,0.3), umetak 0 12px 20px 2px # 85ca26;  .grn-btn: aktivno -webkit-box-shadow: umetak 0 2px 0 0 rgba (0,0,0,0.2), umetak 0 12px 20px 6px rgba (0,0,0,0.2), umetak 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: umetak 0 2px 0 0 rgba (0,0,0,0.2), umetak 0 12px 20px 6px rgba (0,0,0,0.2), umetak 0 0 2px 2px rgba (0,0, 0,0.3); kutija-sjena: umetak 0 2px 0 0 rgba (0,0,0,0.2), umetak 0 12px 20px 6px rgba (0,0,0,0.2), umetak 0 0 2px 2px rgba (0,0,0,0,3 );  

Koristim potpune prijelaze u trajanju od 200 milisekundi na stajalištima gumba i aktivnih gumba. Što je tako velik o tim stilovima je da ih možete primijeniti na gotovo svaki element koji se može kliknuti. Gumbi, veze sidra, elementi obrasca ili bilo što drugo što mislite da je prikladno - iako bi se ti stilovi trebali koristiti rijetko kako ne bi preopteretili vaš dizajn.

Tipke poput ovih često se najbolje pohranjuju na isti način na koji ih Mozilla koristi. Pričvrstite ove stilove u svoj blog gdje imate gumbe za freebie preuzimanja ili nešto slično. Korisnici vole komunicirati s jedinstvenim sučeljima i to se često prevodi u mnogo veći postotak za klikovnu ocjenu.

• Demo

Završne misli

Nadam se da možete oduzeti neke velike lekcije iz ove zbirke tehnika sjenila kutija. Postoji mnogo različitih područja na koja se možete usredotočiti, uključujući obrasce, modalne okvire, gumbe, alatne trake, pa čak i pune izglede web-lokacija.

Slobodno implementirajte bilo koji od ovih efekata u sjeni na dijelove vlastite web-lokacije. Postoji mnogo drugih tehnika, ali ova je zbirka savršena za početnike i napredne programere. Također, ako imate bilo kakve prijedloge ili pitanja o članku možete podijeliti s nama u komentarima u nastavku.