10 kreatív technika a CSS3 Box Shadow használatával

A CSS3 webes fejlesztésében az utóbbi években hatalmas számú előrelépést tapasztaltunk. A népszerű internetes oldalak számos egyedi stílust tartalmaznak, mint például a lekerekített sarkok és a mobil válaszadók. De ami még ennél is fontosabb, ez megnyitotta az ajtót, hogy a kreatív interfészek prototípusok legyenek percek alatt.

Ebben a cikkben meg szeretném osztani 10 kódrészlet a ragyogó CSS3 doboz árnyéktervekkel kapcsolatban. Megmagyarázom, hogyan működik a kód, és hogyan tudja megvalósítani az egyes dobozok árnyékát a saját webhelyére.

Ezeket a stílusokat más népszerű webhelyek nagyszerű dizájnhatásának tulajdonítják. Ez egy nagyszerű példa arra, hogy a webes fejlesztők hogyan alakítanak hatásos trendeket a web design jövőjére.

1. Rögzített felső eszköztár

A romániai szociális médiaszolgáltatás Trilulilu a teljes webhelyükön lebegő felső eszköztárat használ. Ez gyorsan létrehozható a pozíció: fix; bármelyik felső sávon lévő tulajdonság. De ez a kiegészítő doboz árnyék egészen új szintre emeli a hatást.

#banner pozíció: fix; magasság: 60px; szélesség: 100%; top: 0; balra: 0; border-top: 5px szilárd # a1cb2f; háttér: #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); doboz-árnyék: 0 2px 3px 0px rgba (0, 0, 0, 0,16); z-index: 999999;  #banner h1 vonalmagasság: 60px;

Észreveszed, hogy a doboz-árnyék tulajdonságok valójában egy egyszerű értékkombinációval vannak beállítva. Az árnyék a doboz alá esik, és mindkét oldalon 3px-el elmosódik.

Használhatjuk a RGBA () az árnyékra enyhe opacitás alkalmazása, így az elem nem tűnik túl sötétnek. Ez egy finom kiegészítés, amely biztosan befogja a látogató figyelmét.

Demó

2. Sub-Navigation Dropdown

Itt van egy másik kreatív doboz árnyék módszer, amelyet egy skalár legördülő almenüre alkalmaznak. Hasonló hatás figyelhető meg az Entrepreneur-on, ahogy a felső fő navigációs linkek felett mozog. Ez minden bizonnyal bonyolultabb, de megéri a türelmet.

#bar kijelző: blokk; magasság: 45px; háttér: # 22385a; padding-top: 5px; margin-bottom: 150px; pozíció: relatív;  #bar ul margó: 0px 15px; font-család: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li háttér: # 22385a; kijelző: blokk; betűméret: 1.2em; pozíció: relatív; balra lebeg;  #bar ul li a kijelző: blokk; szín: # fffff7; vonalmagasság: 45px; font-súly: félkövér; párnázás: 0px 10px; szöveg-dekoráció: nincs; z-index: 9999;  #bar ul li a: hover, #bar ul li a.selected color: # 365977; háttér: #fff; határ-bal felső sugár: 3px; határ-jobb felső sugár: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-sugár: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px;  #bar ul .subnav kijelző: blokk; balra: 14px; top: 48px; z-index: -1; szélesség: 500px; pozíció: abszolút; magasság: 90px; határ: 1px szilárd # edf0f3; border-top: 0; párnázás: 10px 0 10px 10px; túlcsordulás: rejtett; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-sugár: 3px; határ-alsó-jobb sugár: 3px; határ-alsó-jobb sugár: 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); doboz-árnyék: 0px 2px 7px rgba (0,0,0,0,25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (Strength = 3, Direction = 180, Color =" # 333333 ")"; szűrő: progid: DXImageTransform.Microsoft.Shadow (Strength = 3, Direction = 180, Color = "# 333333");

A navigációs linkek úgy alakíthatók ki, hogy megváltoztassák a színt, ha kiválasztják, vagy az egér mozgatására. Néhány lekerekített szegélyt is hozzáadok a linkekhez és a legördülő menübe. Ez sokkal szebb érzetet ad, mint a kemény élek. Én is jól használom -ms-szűrő és szűrő olyan tulajdonságok, amelyek kizárólag az Internet Explorerhez tartoznak.

Ha teljes navigációs rendszert állít be, akkor megváltoztathatja a kijelzőt, és az oldal betöltésekor elrejtheti a menüt. Ezután néhány jQuery használatával megcélozhatja a .hover () eseményt, és megjelenítheti a frissített tartalommal rendelkező résznav sávot.

Demó

3. Fényes árnyék gomb

Ez valószínűleg az egyik kedvenc stílusom, amit csak azért hozok létre, mert dinamikusan jelenik meg az oldalon. Ha nem tudja megmondani, ez az első bejelentkezés után a YouTube kezdőlapján található kis kék gomb.

blues color: #fff; szélesség: 190px; magasság: 35px; kurzor: mutató; font-család: Arial, Tahoma, sans-serif; betűméret: 1.0em; font-súly: félkövér; -moz-border-sugár: 2px; -webkit-border-radius: 2px; határ-sugár: 2px; határszélesség: 1px; szegélyszín: # 0053a6 # 0053a6 # 000; háttérszín: # 6891e7; háttérkép: -moz-lineáris gradiens (felső, # 4495e7 0, # 0053a6 100%); háttérkép: -ms-lineáris gradiens (felső, # 4495e7 0, # 0053a6 100%); háttérkép: -o-lineáris gradiens (felső, # 4495e7 0, # 0053a6 100%); háttérkép: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (0, # 4495e7), szín-stop (100%, # 0053a6)); háttérkép: -webkit-lineáris gradiens (felső, # 4495e7 0, # 0053a6 100%); háttérkép: lineáris gradiens (alul, # 4495e7 0, # 0053a6 100%); szöveg-árnyék: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: beillesztés 0 1px 0 rgba (256, 256, 256, 35); -ms-box-shadow: beillesztés 0 1px 0 rgba (256, 256, 256, 35); -webkit-box-shadow: beillesztés 0 1px 0 rgba (256, 256, 256, 35); box-shadow: betét 0 1px 0 rgba (256, 256, 256, 35); szűrő: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: hover border-color: # 002d59 # 002d59 # 000; -moz-box-shadow: beillesztés 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0,25); -ms-box-shadow: beillesztés 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -webkit-box-shadow: beillesztés 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); box-shadow: betét 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 25); szűrő: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); háttérkép: -moz-lineáris gradiens (felső, # 3a8cdf 0, # 0053a6 100%); háttérkép: -ms-lineáris gradiens (felső, # 3a8cdf 0, # 0053a6 100%); háttérkép: -o-lineáris gradiens (felső, # 3a8cdf 0, # 0053a6 100%); háttérkép: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (0, 3a8cdf), szín-stop (100%, # 0053a6)); háttérkép: -webkit-lineáris gradiens (felső, # 3a8cdf 0, # 0053a6 100%); háttérkép: lineáris gradiens (alul, # 3a8cdf 0, # 0053a6 100%);  .blues: aktív border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: beillesztés 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-shadow: betét 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-box-shadow: beillesztés 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; box-shadow: betét 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; szűrő: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); háttérkép: -moz-lineáris gradiens (felső, # 005ab4 0, # 175ea6 100%); háttérkép: -ms-lineáris gradiens (felső, # 005ab4 0, # 175ea6 100%); háttérkép: -o-lineáris gradiens (felső, # 005ab4 0, # 175ea6 100%); háttérkép: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (0, 005ab4), szín-stop (100%, # 175ea6)); háttérkép: -webkit-lineáris gradiens (felső, # 005ab4 0, # 175ea6 100%); háttérkép: lineáris gradiens (alul, # 005ab4 0, # 175ea6 100%);

Az egész gomb kódja sokat néz, de próbálkozunk támogatja a lehető legtöbb böngészőt. Vannak szöveges árnyékok és doboz árnyékok, amelyek támogatják az MS Internet Explorer 7+ alkalmazást. Azt is beállítjuk, hogy háttérkép CSS3-gradiensű tulajdonságok számos szállítóspecifikus előtagon.

De ha szereted ezt a dizájnstílust, akkor a a lebegés és az aktív állapotok is elkapják a figyelmet. Alapvetően frissítjük a szegélyt, hogy néhány árnyékot belehelyezzünk, miközben lenyomjuk, miközben frissítjük a háttér színátmenetet, hogy egy kicsit sötétebb legyen.

Mivel nincsenek képek a gombon, frissíthetjük a hex értékeket és morph ezt a gyakorlatilag bármilyen színsémához való illesztéshez.

Demó

4. Értesítések Flyout menü

Nem vagyok a Facebook nagy felhasználója, de észrevettem néhány UI technikát az újratervezésből. Ez a szórólap menü összehasonlítható az Ön bejelentéseivel vagy barátja kéréseivel, amelyek a honlapon találhatók.

.flyout szélesség: 310px; margin-top: 10px; betűméret: 11px; pozíció: relatív; font-család: „Lucida Grande”, Tahoma, Verdana, Arial, sans-serif; háttérszín: fehér; párnázás: 9px 11px; háttér: rgba (255, 255, 255, 0,9); határ: 1px szilárd # 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-határ-sugár: 3px; határ-sugár: 3px;  .flyout #tip background-image: url ('images / tip.png'); háttér-ismétlés: nincs ismétlés; háttérméret: auto; magasság: 11px; pozíció: abszolút; top: -11px; balra: 25px; szélesség: 20px;  .flyout h2 text-transform: nagybetűs; szín: # 666; betűméret: 1.2em; alátét: 5px; margin-bottom: 12px; határ alsó: 1px szilárd #dcdbda;  .flyout p padding-bottom: 25px; betűméret: 1.1em; szín: # 222;

Itt nincs sok új elme-hajlító kód. Kicsit használok .tipp osztály, egy belső span elemgel, hogy hozzáadja az eszköztipp háromszöget. Lehetőség van tiszta CSS3 háromszögek létrehozására, de ez a módszer nem könnyű, ahogy elképzelhető. Ha jobban kedveli ezt a módszert, érdemes lehet valamit összeütközni. A CSS3 rotációs tulajdonságai azonban nem támogathatók mindenhol; közben a képek nem igényelnek más módszereket.

Demó

5. Apple Page Wrapper

Nagyon sok lenyűgöző CSS3 doboz árnyék található az Apple hivatalos honlapján. Az alábbi példa egy kis dobozos tartály néhány oszlopdarabdal. Amikor az Apple elrendezését megnézzük, sok lapja számos csomagoló dobozból áll.

.applewrap szélesség: 100%; kijelző: blokk; magasság: 150px; háttér: fehér; határ: 1px szilárd; szegélyszín: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-határ-sugár: 4px; határ-sugár: 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; doboz-árnyék: rgba (0, 0, 0, 0,3) 0 1px 3px;  .applewrap .col float: balra; doboz-méretezés: szegélydoboz; szélesség: 250x; magasság: 150px; párnázás: 16px 7px 6px 22px; betűtípus: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; szín: # 343434; jobbra: 1db szilárd #dadada;

Egy hasonló oldalt különféle szélességű és magasságú tartalomdobozokból fel lehet osztani. Bár néhány oszlopot tettem bele a demóba, ez nem szükséges formázási technika. A doboz árnyéka a legjobban illeszkedik fehér / szürke háttérre. De úgy gondolom, hogy bármely fényszín felett megjelenítés nagyon jó lenne.

Demó

6. Apple Content Box

Ezt az Apple weboldalán található egyéb tartalomstílust leginkább oszlopmintákhoz használják. Ezek elsősorban az oldal alján találhatók, amelyek bemutatják az ügyleteket és egyéb kapcsolódó információkat. Ez egy teljesen más tervezési stílus, a doboz árnyéka a felülről lefelé jelenik meg.

.applebox szélesség: auto; magasság: 85x; doboz-méretezés: szegélydoboz; háttér: # f5f5f5; párnázás: 20px 20px 10px; margin: 10px 0 20px; határ: 1px szilárd #ccc; határ-sugár: 4px; -webkit-border-radius: 4px; -moz-határ-sugár: 4px; -o-határ-sugár: 4px; -webkit-box-shadow: 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: betét 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col szélesség: 140px; balra lebeg; margin: 0 0 0 30px;

Nem hiszem, hogy ezt a kódot túl nehéz követni és más Div-konténerre másolni. Az egyetlen doboz-árnyék, amit alkalmazunk, használja betétlap az rgba alfa-átlátszó színkódokkal. Tehát bár a csepp árnyék tiszta fekete lesz, csak 30% -os átlátszóságot mutatunk.

Demó

7. Kiemelt linkek

Ez valószínűleg az én kedvenc weboldalam árnyéka az Apple jelenlegi webhelyén. Az iCloud oldalon találhat egy élő demo stílust a lebegő link dobozok sorozatával.

.applefeature magasság: 150px; margin: 8px; függőleges illesztés: felső; kijelző: inline-block;  .applefeature a display: block; szélesség: 168px; magasság: 140px; határ: 1px szilárd #ccc; szín: # 333; szöveg-dekoráció: nincs; font-súly: félkövér; vonalmagasság: 1.3em; háttér: # f7f7f7; -webkit-box-shadow: beillesztés 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: beillesztés 0 1px 2px rgba (0, 0, 0, .3); box-shadow: betét 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-határ-sugár: 4px; határ-sugár: 4px;  .applefeature a: lebeg háttér: #fafafa; háttér: -webkit-gradiens (lineáris, 0% 0%, 0% 100%, (#fff), (# f7f7f7)); háttér: -moz-lineáris gradiens (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: beillesztés 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: beillesztés 0 1px 2px rgba (0,0,0, .3); box-shadow: betét 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-határ-sugár: 4px; határ-sugár: 4px;  .applefeature a img display: block; margin: 26px auto 4px;  .applefeature a h4 kijelző: blokk; szélesség: 160px; betűméret: 1.3em; font-család: Arial, Tahoma, sans-serif; szín: # 646464; szöveg-igazítás: központ;

Ezek a linkek rögzített szélességre vannak beállítva, és tartalmazzák a különálló ikont és a megjelenítő szöveget. Az Apple példája hasonló doboz árnyékot használ, ahogyan azt az előző tartalmi mezőben láttuk. azonban a teljes mező most kapcsolatként aktiválható amely magában foglalja mind a :lebeg és :aktív Államok. A linkdoboz sok rugalmassággal rendelkezik, és meg kell próbálni a forráskóddal játszani.

Lehetőség van a magasság / szélesség lerövidítésére és egy sokkal kisebb linkek létrehozására. Ezek lehetnek egy cikkek vagy oldalak egy csoportja, vagy egy almenüt lehet korlátozni a link ikonokkal. Őszintén szólva újabb CSS3 technikák, amelyek megmutatják, hogy mennyi hatalom van web-tervezőjeként.

Demó

8. Keretes képek

Egy szürke hátteret adtam ehhez a példához, így a doboz árnyékstílusait jobban láthatja. Ez a mező hasonlít a Wordpress.com-on megjelenített előnézeti felvételekhez, kivéve, ha egy kicsit több mélységet adtam a forráskódhoz.

.wpframe háttér: #fff; határ-sugár: 2px; -webkit-border-radius: 2px; -moz-border-sugár: 2px; párnázás: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; box-shadow: 1px 2px 1px # d1d1d1;

Mivel a képek egy kis lapátot kapnak mindkét oldalon, ez a keret nagy fehér szegélyként jelenik meg. Mindig frissítheti a háttérszínt, vagy akár egy kis külső szegélyt is hozzáadhat, hogy elválassza a képet a háttérben. De ez a meglehetősen egyszerűsített stílussorozatot különböző doboz árnyék technikákkal lehet irányítani. Játssz a kóddal, és nézd meg, hogyan javíthatod a képmintákat a saját weboldaladon.

Demó

9. Ragyogó bemeneti mezők

Ezt a gondolatot néhányszor meglátogattam a Pinterest bejelentkezési oldalán. Az animált stílusukban valóban néhány kitűnő példát mutatnak be a többszörös inline doboz árnyékára, mind a külső, mind a beillesztett dobozra.

.formwrap display: block; margin-bottom: 15px;  .formwrap címke display: inline-block; szélesség: 80px; betűméret: 11px; font-súly: félkövér; szín: # 444; font-család: Arial, Tahoma, sans-serif;  .formwrap .shadowfield pozíció: relatív; szélesség: 250x; betűméret: 17px; font-család: "Helvetica Neue", Arial, sans-serif; font-súly: normál; háttér: # f7f8f8; szín: # 7c7c7c; vonalmagasság: 1,4; párnázás: 6px 12px; vázlat: nincs; átmenet: az összes 0.2s-os kimenet 0-as; -webkit-átmenet: az összes 0.2s-os kimenet 0-as; -moz-átmenet: az összes 0.2s-os kimenet 0-as; határ: 1px szilárd # ad9c9c; határ-sugár: 6px 6px 6px 6px; doboz-árnyék: 0 1px rgba (34, 25, 25, 0,2) betét, 0 1px #fff;  .formwrap .shadowfield: focus border-color: # 930; háttér: #fff; szín: # 5d5d5d; doboz-árnyék: 0 1px rgba (34, 25, 25, 0,2), 0pp rgba (255, 255, 255, 0,6), 0 7px rgba (235, 82, 82, 0,5); -moz-box-árnyék: 0 1px rgba (34, 25, 25, 0,2), 0pp rgba (255, 255, 255, 0,6), 0 7px rgba (235, 82, 82, 0,5); -webkit-box-shadow: 0 1px rgba (34, 25, 25, 0,2), 0pp rgba (255, 255, 255, 0,6), 0 7px rgba (235, 82, 82, 0,5);

Bár a kezdeti stílusok nagyon vonzóak, felhívom a átmeneti hatások, amikor minden beviteli mezőre fókuszál. Ezek között lehet lapozni, és látni az azonnali különbséget a sok tulajdonságban. A külső izzó doboz árnyékát egy frissített betét árnyékkal együtt alkalmazzák. Szintén a A szöveg színe könnyebb lesz, amikor egy adott bemenetre fókuszál, majd a fókuszáláskor eltűnik.

Még ezen effektusok másolása is jelentősen javítaná az űrlapmezők felhasználói élményét. Győződjön meg róla, hogy nem megy túl messzire a fedélzetre azon a ponton, ahol az űrlapok alig használhatók. Azonban a legtöbb látogató élvezni fogja a kellemes esztétikai hatásokat, amelyek szintén ösztönzik az interakciót és a további részvételt az Ön weboldalán.

Demó

10. Rugalmas árnyékgombok

Ezek az egyedülálló árnyékgombok lassú átmenetet képeznek a lebegő és aktív állapotokban. Hasonló példákat talál a Mozilla kezdőlapján a nagy méretükkel “Töltse le a Firefoxot” gomb. Néhány box-shadow A tulajdonságok három különböző árnyékot egyesítenek egy parancsba.

.blu-btn display: inline-block; -moz-határ-sugár: .25em; határ-sugár: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), beillesztés 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), beillesztés 0 -2px 0 0 rgba (0,0,0,0,2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), beillesztés 0 -2px 0 0 rgba (0,0,0,0,2); háttérszín: # 276195; háttérkép: -moz-lineáris gradiens (# 3c88cc, # 276195); háttérkép: -ms-lineáris gradiens (# 3c88cc, # 276195); háttérkép: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (0%, # 3c88cc), szín-stop (100%, # 276195)); háttérkép: -webkit-lineáris gradiens (# 3c88cc, # 276195); háttérkép: -o-lineáris gradiens (# 3c88cc, # 276195); szűrő: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; háttérkép: lineáris gradiens (# 3c88cc, # 276195); határ: 0; kurzor: mutató; szín: #fff; szöveg-dekoráció: nincs; szöveg-igazítás: központ; betűméret: 16px; párnázás: 0px 20px; magasság: 40px; vonalmagasság: 40px; min-szélesség: 100px; szöveg-árnyék: 0 1px 0 rgba (0,0,0,0,35); font-család: Arial, Tahoma, sans-serif; -webkit-átmenet: minden lineáris .2s; -moz-átmenet: minden lineáris .2s; -o-átmenet: minden lineáris .2s; -ms-átmenet: minden lineáris .2s; átmenet: minden lineáris .2s .blu-btn: hover, .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), beillesztés 0 -2px 0 0 rgba (0,0,0,0,3), betét 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), betét 0 -2px 0 0 rgba (0,0,0,0.3), beillesztés 0 12px 20px 2px # 3089d8; árnyék: 0 2px 0 0 rgba (0,0,0,0.1), beillesztés 0 -2px 0 0 rgba (0,0,0,0.3), beillesztés 0 12px 20px 2px # 3089d8;  .blu-btn: aktív -webkit-box-shadow: betét 0 2px 0 0 rgba (0,0,0,0.2), betét 0 12px 20px 6px rgba (0,0,0,0.2), beillesztve 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: betét 0 2px 0 0 rgba (0,0,0,0.2), betét 0 12px 20px 6px rgba (0,0,0,0.2), betét 0 0 2px 2px rgba (0,0, 0,0.3); árnyékolás: betét 0 2px 0 0 rgba (0,0,0,0.2), betét 0 12px 20px 6px rgba (0,0,0,0.2), betét 0 0 2px 2px rgba (0,0,0,0,3 );  .grn-btn display: inline-block; -moz-határ-sugár: .25em; határ-sugár: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), beillesztés 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), beillesztés 0 -2px 0 0 rgba (0,0,0,0,2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), beillesztés 0 -2px 0 0 rgba (0,0,0,0,2); háttérszín: # 659324; háttérkép: -moz-lineáris gradiens (# 81bc2e, # 659324); háttérkép: -ms-lineáris gradiens (# 81bc2e, # 659324); háttérkép: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (0%, # 81bc2e), szín-stop (100%, # 659324)); háttérkép: -webkit-lineáris gradiens (# 81bc2e, # 659324); háttérkép: -o-lineáris gradiens (# 81bc2e, # 659324); szűrő: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; háttérkép: lineáris gradiens (# 81bc2e, # 659324); határ: 0; kurzor: mutató; szín: #fff; szöveg-dekoráció: nincs; szöveg-igazítás: központ; betűméret: 16px; párnázás: 0px 20px; magasság: 40px; vonalmagasság: 40px; min-szélesség: 100px; szöveg-árnyék: 0 1px 0 rgba (0,0,0,0,35); font-család: Arial, Tahoma, sans-serif; -webkit-átmenet: minden lineáris .2s; -moz-átmenet: minden lineáris .2s; -o-átmenet: minden lineáris .2s; -ms-átmenet: minden lineáris .2s; átmenet: minden lineáris .2s;  .grn-btn: hover, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), beillesztés 0 -2px 0 0 rgba (0,0,0 , 0,3), beillesztve 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), betét 0 -2px 0 0 rgba (0,0,0,0.3), beillesztés 0 12px 20px 2px # 85ca26; árnyékolás: 0 2px 0 0 rgba (0,0,0,0.1), betét 0 -2px 0 0 rgba (0,0,0,0.3), beillesztés 0 12px 20px 2px # 85ca26;  .grn-btn: aktív -webkit-box-shadow: betét 0 2px 0 0 rgba (0,0,0,0.2), betét 0 12px 20px 6px rgba (0,0,0,0.2), betét 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: betét 0 2px 0 0 rgba (0,0,0,0.2), betét 0 12px 20px 6px rgba (0,0,0,0.2), betét 0 0 2px 2px rgba (0,0, 0,0.3); árnyékolás: betét 0 2px 0 0 rgba (0,0,0,0.2), betét 0 12px 20px 6px rgba (0,0,0,0.2), betét 0 0 2px 2px rgba (0,0,0,0,3 );

A teljes átmeneteket 200 milliszekundumra használom a lebegő és az aktív gombállapotokban. Ami annyira nagyszerű ezeknek a stílusoknak, az, hogy szinte minden kattintható elemre alkalmazhatja őket. Gombok, horgony linkek, formanyomtatványok, vagy bármi más, amit Ön szerint megfelelő - bár ezeket a stílusokat ritkán kell használni, hogy ne terhelje túl a designot.

Az ilyen gombokat gyakran mentik a legjobban a Mozilla által használt módon. Csatlakoztassa ezeket a stílusokat a blogjához, ahol gombok vannak a freebie letöltésekhez, vagy valami hasonló. A felhasználók szeretik az egyedi interfészekkel való kapcsolatot és ez gyakran sokkal nagyobb százalékos arányt jelent az átkattintási minősítéshez.

Demó

Végső gondolatok

Remélem, elvehetsz néhány nagyszerű tanulságot a doboz árnyék technikák gyűjteményéből. Számos különböző terület van, amelyek a formákra, a modális dobozokra, a gombokra, az eszköztárakra és a teljes webhely-elrendezésekre is összpontosíthatnak.

Nyugodtan hajtsa végre ezen árnyékhatások valamelyikét saját webhelyének részévé. Rengeteg egyéb technika létezik, de ez a gyűjtemény tökéletes a kezdőknek és a fejlett fejlesztőknek is. Továbbá, ha bármilyen javaslata vagy kérdése van a cikkhez, amelyet az alábbiakban meg lehet osztani velünk a megjegyzések vita területén.