10 Kreativa tekniker som använder CSS3 Box Shadow

Vi har sett ett enormt antal framsteg i CSS3 webbutveckling under de senaste åren. Populära webbplatser runt om i världen har börjat integrera många unika stilar, såsom avrundade hörn och mobila responsiva mediefrågor. Men ännu viktigare har det öppnat dörren för kreativa gränssnitt att prototyperas om några minuter.

I den här artikeln vill jag dela 10 kodrapporter relaterade till briljanta CSS3-boxskuggdesigner. Jag ska förklara hur koden fungerar och hur du kan implementera varje boxskugga på din egen hemsida.

Dessa stilar tillskrivs alla stora designpåverkan från andra populära webbplatser. Detta är ett bra exempel på hur dagens webbutvecklare bygger effektiva trender för framtiden för webdesign.

1. Fasta toppverktygsfältet

Den rumänska sociala medietjänsten Trilulilu använder en flytande toppverktygsfält runt hela webbplatsen. Detta kan skapas snabbt med hjälp av a position: fast; egendom på något toppstångselement. Men den här extra boxskuggan får effekten på en helt ny nivå.

#banner position: fixed; höjd: 60px; bredd: 100%; topp: 0; vänster: 0; border-top: 5px solid # a1cb2f; bakgrund: #fff; -moz-box-skugga: 0 2px 3px 0px rgba (0, 0, 0, 0,16); -webkit-box-skugga: 0 2px 3px 0px rgba (0, 0, 0, 0,16); boxskugga: 0 2px 3px 0px rgba (0, 0, 0, 0,16); z-index: 999999;  #banner h1 linjehöjd: 60px;

Du kommer märka att boxskuggegenskapen faktiskt ställs in med en relativt enkel värdekombination. Skuggan kommer att falla under lådan och oskärpa med 3px på vardera sidan.

Vi kan använda RGBA () Metod för att applicera liten opacitet på skuggan, så elementet visas inte för mörkt. Det är en subtil tillägg som säkert kommer att fånga din besökares uppmärksamhet.

demo

2. Delnavigation Dropdown

Här är en annan skuggmetod med kreativ box applicerad på en skalär dropdown-undermeny. En liknande effekt kan ses på entreprenören när du sveper över var och en av de viktigaste navigeringslänkarna. Det här är definitivt lite svårare att konfigurera men väl värt tålamodet.

#bar display: block; höjd: 45px; bakgrund: # 22385a; padding-top: 5px; marginal-botten: 150px; position: relativ;  #bar ul margin: 0px 15px; font-family: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li bakgrund: # 22385a; display: block; typsnittstorlek: 1.2em; position: relativ; flyta till vänster;  #bar ul li a display: block; färg: # fffff7; linjehöjd: 45px; font-weight: bold; vaddering: 0px 10px; text-dekoration: ingen; z-index: 9999;  #bar ul li a: svävar, #bar ul li a.selected color: # 365977; bakgrund: #fff; gränsen till vänstra radien: 3px; gränsen till höger-radie: 3px; -webkit-gränsen-övre-vänstra radien: 3px; -webkit-gräns-topp-högra radie: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px;  #bar ul .subnav display: block; vänster: 14px; topp: 48px; z-index: -1; bredd: 500px; position: absolut; höjd: 90px; gräns: 1px fast # edf0f3; border-top: 0; vaddering: 10px 0 10px 10px; översvämning: gömd; -moz-gränsen-radie-bottomleft: 3px; -moz-gränsen-radie-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; gränsbotten-högra radie: 3px; gränsbotten-högra radie: 3px; -moz-box-skugga: 0px 2px 7px rgba (0,0,0,0,25); -webkit-box-skugga: 0px 2px 7px rgba (0,0,0,0,25); boxskugga: 0px 2px 7px rgba (0,0,0,0,25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (Styrka = 3, Riktning = 180, Färg =" # 333333 ")"; filter: progid: DXImageTransform.Microsoft.Shadow (Styrka = 3, Riktning = 180, Färg = "# 333333");

Nav-länkarna kan stylas för att ändra färg när den väljs eller på muspekaren. Jag lägger också till några rundade gränser på länkarna och över rullgardinsmenyn. Detta ger en snyggare känsla än hård kanter runt omkring. Jag utnyttjar också användningen av -ms-filter och filtrera Egenskaper som endast är proprietära till Internet Explorer.

Om du konfigurerar ett helt navigationssystem kan du ändra skärmen till ingen och gömma menyn när sidan laddas. Då kan du använda vissa jQuery-adresser till målet .hover () och visa subnavfältet med uppdaterat innehåll.

demo

3. Glänsande skuggknapp

Det här är möjligen en av mina favoritstilar att skapa bara på grund av hur dynamiskt det visas på sidan. Om du inte kan berätta är det den lilla blå knappen som finns på YouTubes startsida efter att du loggat in.

blues color: #fff; bredd: 190px; höjd: 35px; markör: pekare; font-family: Arial, Tahoma, sans-serif; typsnittstorlek: 1,0em; font-weight: bold; -moz-gränsen-radien: 2px; -webkit-gränsen-radien: 2px; gränsstråle: 2px; kantbredd: 1px; kantfärg: # 0053a6 # 0053a6 # 000; bakgrundsfärg: # 6891e7; bakgrundsbild: -moz-linjär gradient (topp, # 4495e7 0, # 0053a6 100%); bakgrundsbild: -ms-linjär gradient (topp, # 4495e7 0, # 0053a6 100%); bakgrundsbild: -o-linjär gradient (topp, # 4495e7 0, # 0053a6 100%); bakgrundsbild: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0, # 4495e7), färgstopp (100%, # 0053a6)); bakgrundsbild: -webkit-linjär gradient (topp, # 4495e7 0, # 0053a6 100%); bakgrundsbild: linjär gradient (till botten, # 4495e7 0, # 0053a6 100%); textskugga: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-skugga: inset 0 1px 0 rgba (256, 256, 256, 35); -ms-box-skugga: inset 0 1px 0 rgba (256, 256, 256, 35); -webkit-box-skugga: inset 0 1px 0 rgba (256, 256, 256, 35); boxskugga: 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-skugga: inset 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -ms-box-skugga: inmatning 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -webkit-box-skugga: inmatning 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); boxskugga: 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); bakgrundsbild: -moz-linjär gradient (topp, # 3a8cdf 0, # 0053a6 100%); bakgrundsbild: -ms-linjär gradient (topp, # 3a8cdf 0, # 0053a6 100%); bakgrundsbild: -o-linjär gradient (topp, # 3a8cdf 0, # 0053a6 100%); bakgrundsbild: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0, # 3a8cdf), färgstopp (100%, # 0053a6)); bakgrundsbild: -webkit-linjär-gradient (topp, # 3a8cdf 0, # 0053a6 100%); bakgrundsbild: linjär gradient (till botten, # 3a8cdf 0, # 0053a6 100%);  .blues: active border-color: # 000 # 002d59 # 002d59; -moz-box-skugga: inset 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -ms-box-skugga: inset 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -webkit-box-skugga: inset 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; boxskugga: 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); bakgrundsbild: -moz-linjär gradient (topp, # 005ab4 0, # 175ea6 100%); bakgrundsbild: -ms-linjär gradient (topp, # 005ab4 0, # 175ea6 100%); bakgrundsbild: -o-linjär gradient (topp, # 005ab4 0, # 175ea6 100%); bakgrundsbild: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0, # 005ab4), färgstopp (100%, # 175ea6)); bakgrundsbild: -webkit-linjär-gradient (topp, # 005ab4 0, # 175ea6 100%); bakgrundsbild: linjär gradient (till botten, # 005ab4 0, # 175ea6 100%);

Hela knappen är mycket att titta på, men vi försöker att stödja så många webbläsare som möjligt. Det finns textskuggor och boxskuggor med åtföljande stöd för MS Internet Explorer 7+. Vi ställer också in bakgrundsbild egendom med CSS3-gradienter över ett brett antal leverantörsspecifika prefix.

Men om du älskar denna design stil då svävar och aktiva stater kommer också fånga din uppmärksamhet. Vi uppdaterar i grunden gränsen för att inkludera några skuggor inuti när du trycker ner, medan du uppdaterar bakgrundsgraden för att visa lite mörkare.

Eftersom det inte finns några bilder på knappen kan du uppdatera hex-värdena och morph detta för att blanda i praktiskt taget alla färgscheman.

demo

4. Meddelanden Flyout Menu

Jag är inte en stor användare av Facebook men jag har märkt några UI-tekniker från deras redesigns. Den här flyttmenyn kan jämföras med dina meddelanden eller vänförfrågningar popup finns på hemsidan.

.flyout width: 310px; marginal-topp: 10px; typsnittstorlek: 11px; position: relativ; font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; bakgrundsfärg: vit; vaddering: 9px 11px; bakgrund: rgba (255, 255, 255, 0,9); gränsen: 1px solid # c5c5c5; -webkit-box-skugga: 0 3px 8px rgba (0, 0, 0, .25); -moz-box-skugga: 0 3px 8px rgba (0, 0, 0, .25); boxskugga: 0 3px 8px rgba (0, 0, 0, .25); -webkit-gränsen-radien: 3px; -moz-gränsen-radien: 3px; gränsstråle: 3px;  .flyout #tip background-image: url ('images / tip.png'); bakgrundsrepetition: nej-repetera; bakgrundsstorlek: auto; höjd: 11px; position: absolut; topp: -11px; vänster: 25px; bredd: 20px;  .flyout h2 text-transform: uppercase; färg: # 666; typsnittstorlek: 1.2em; vadderande-botten: 5px; marginalbotten: 12px; border-bottom: 1px solid #dcdbda;  .flyout p padding-bottom: 25px; typsnittstorlek: 1.1em; färg: # 222;

Det finns inte en hel del nya tankar för att visa här. Jag använder en liten .tips klass med ett internt spänningselement för att lägga till verktygstips triangeln. Det är möjligt att skapa rena CSS3-trianglar, men den här metoden är inte lätt, som du kan tänka dig. Om du föredrar den här metoden kan det vara värt att hacka något tillsammans. Men CSS3-rotationsegenskaperna stöds inte överallt; Under tiden behöver bilder inte ha någon återgångsmetod.

demo

5. Apple Pages Wrapper

Det finns så många imponerande CSS3-boxskuggor som du hittar på Apples officiella hemsida. Detta exempel nedan är en liten lådabehållare med några kolumnsträckor. När du tittar på Apples layout ser du många av deras sidor som består av många lådor.

.applewrap bredd: 100%; display: block; höjd: 150px; bakgrund: vit; gräns: 1px solid; border-color: # e5e5e5 #dbdbdb # d2d2d2; -webkit-gräns-radie: 4px; -moz-gränsen-radien: 4px; gränsstråle: 4px; -webkit-box-skugga: rgba (0, 0, 0, 0.3) 0 1px 3px; -moz-box-skugga: rgba (0,0,0,0,3) 0 1px 3px; boxskugga: rgba (0, 0, 0, 0.3) 0 1px 3px;  .applewrap .col float: left; box-dimensionering: gränsvärde; bredd: 250px; höjd: 150px; vaddering: 16px 7px 6px 22px; font: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; färg: # 343434; gränsen-höger: 1px solid #dadada;

Du kan sätta ihop en liknande sida uppdelad av innehållslådor med olika bredd och höjd. Även om jag har lagt in några kolumner i den här demo är det inte nödvändigt med en formateringsteknik på något sätt. Boxskuggan passar bäst på en vit / grå bakgrund. Men jag tror att visa över någon ljus färg skulle se ganska bra ut.

demo

6. Apple Content Box

Denna andra stil av innehållsruta på Apples hemsida används mest för kolumndesign. Dessa är främst längst ner på sidan som visar upphandlingar och annan relaterad information. Det är en helt annan designstil med boxskuggan inifrån från toppen ner.

.applebox width: auto; höjd: 85px; box-dimensionering: gränsvärde; bakgrund: # f5f5f5; vaddering: 20px 20px 10px; marginal: 10px 0 20px; gränsen: 1px solid #ccc; gränsstråle: 4px; -webkit-gräns-radie: 4px; -moz-gränsen-radien: 4px; -gränsradio: 4px; -webkit-box-skugga: inset 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-skugga: inset 0px 1px 1px rgba (0, 0, 0, .3); boxskugga: inset 0px 1px 1px rgba (0, 0, 0, .3);  .applebox. col width: 140px; flyta till vänster; marginal: 0 0 0 30px;

Jag tycker inte att den här koden ska vara för svår att följa och kopiera till en annan div-container. Den enda rutaskuggan vi tillämpar använder infälld med rgba alfa-transparenta färgkoder. Så även om vi har drop skuggan satt till ren svart visar vi bara en 30% opacitet.

demo

7. Utvalda länkar

Detta är förmodligen min favoritlåda skuggstil från Apples nuvarande hemsida. Du bör hitta en live demostil av denna teknik på iCloud-sidan med en serie flytande länklådor.

.applefeature höjd: 150px; marginal: 8px; vertikaljustering: topp; display: inline-block;  .applefeature a display: block; bredd: 168px; höjd: 140px; gränsen: 1px solid #ccc; färg: # 333; text-dekoration: ingen; font-weight: bold; linjehöjd: 1,3em; bakgrund: # f7f7f7; -webkit-box-skugga: inset 0 1px 2px rgba (0, 0, 0, .3); -moz-box-skugga: inset 0 1px 2px rgba (0, 0, 0, .3); boxskugga: inset 0 1px 2px rgba (0, 0, 0, .3); -webkit-gräns-radie: 4px; -moz-gränsen-radien: 4px; gränsstråle: 4px;  .applefeature a: hover background: #fafafa; bakgrund: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (#fff) till (# f7f7f7)); bakgrund: -moz-linjär gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-skugga: inset 0 1px 2px rgba (0,0,0, .3); -moz-box-skugga: inset 0 1px 2px rgba (0,0,0, .3); boxskugga: inset 0 1px 2px rgba (0,0,0, .3); -webkit-gräns-radie: 4px; -moz-gränsen-radien: 4px; gränsstråle: 4px;  .applefeature a img display: block; marginal: 26px auto 4px;  .applefeature a h4 display: block; bredd: 160px; fontstorlek: 1.3em; font-family: Arial, Tahoma, sans-serif; färg: # 646464; text-align: center;

De här länkarna är inställda på en fast bredd och innehåller en distinkt ikon och displaytext. Apples exempel använder en liknande boxskugga som vi såg i föregående innehållsruta. dock hela rutan kan nu aktiveras som länk som inkluderar både :sväva och :aktiva stater. Det finns mycket flexibilitet med den här länkrutan och du bör försöka leka med källkoden.

Det är möjligt att förkorta höjd / bredd och skapa en mycket mindre lista med länkar. Dessa kan vara en uppsättning av kapitel eller sidor i en artikel, eller du kan göra en undermeny begränsad med länkikoner. Det är ärligt en bra uppsättning av nyare CSS3-tekniker som visar hur mycket ström du har som webbdesigner.

demo

8. Inramade bilder

Jag har lagt till en grå bakgrund på det här exemplet så att du kan se rutans skuggstilar tydligare. Den här rutan liknar de förhandsgranskade bilderna på wordpress.com förutom att jag har lagt lite mer djup i källkoden.

.wpframe bakgrund: #fff; gränsstråle: 2px; -webkit-gränsen-radien: 2px; -moz-gränsen-radien: 2px; vaddering: 8px; -webkit-box-skugga: 1px 2px 1px # d1d1d1; -moz-box-skugga: 1px 2px 1px # d1d1d1; boxskugga: 1px 2px 1px # d1d1d1;

Eftersom bilderna ges en liten polstring på båda sidor visas denna ram som en stor vit kant. Du kan alltid uppdatera bakgrundsfärgen, eller till och med lägga till en liten yttre kant för att skilja bilden från bakgrunden. Men denna ganska enkla uppsättning stilar kan manövreras i olika boxskuggtekniker. Spela runt med koden och se hur du kan förbättra bilddesigner på din egen hemsida.

demo

9. Glödande inmatningsfält

Jag fick den här tanken efter att ha besökt Pinterest inloggningssidan ett par gånger. Deras animerade stilar visar verkligen några vältaliga exempel på flera inline box skuggor, både utanför och inset.

.formwrap display: block; marginalbotten: 15px;  .formwrap-etikett display: inline-block; bredd: 80px; typsnittstorlek: 11px; font-weight: bold; färg: # 444; font-family: Arial, Tahoma, sans-serif;  .formwrap .shadowfield position: relative; bredd: 250px; fontstorlek: 17px; font-family: "Helvetica Neue", Arial, sans-serif; typsnitt: normal; bakgrund: # f7f8f8; färg: # 7c7c7c; linjehöjd: 1,4; vaddering: 6px 12px; kontur: ingen; övergång: alla 0.2s lätt-in-out 0s; -webkit-övergång: alla 0.2s lätt-i-ut 0s; -moz-övergång: alla 0.2s lätt-in-out 0s; gränsen: 1px fast # ad9c9c; gränsstråle: 6px 6px 6px 6px; boxskugga: 0 1px rgba (34, 25, 25, 0.2) inmatning, 0 1px #fff;  .formwrap .shadowfield: fokus border-color: # 930; bakgrund: #fff; färg: # 5d5d5d; boxskugga: inmatning 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-skugga: 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-skugga: inmatning 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);

Även om de ursprungliga stilarna är väldigt attraktiva, dras jag till övergångseffekter när du fokuserar på varje inmatningsfält. Du kan fliken mellan dem och se den omedelbara skillnaden i så många egenskaper. Den externa glödlådans skugga appliceras tillsammans med en uppdaterad insatsskugga. Även Textfärgen blir lättare eftersom du fokuserar på en viss inmatning, då blir den svagare när du defokuserar.

Även kopiering över en av dessa effekter skulle förbättra användarupplevelsen av dina formulärfält. Var säker på att du inte går för långt överbord till den punkt där dina formulär knappt är användbara. De flesta besökare kommer dock att njuta av de behagliga estetiska effekter som också uppmuntrar till interaktion och ytterligare engagemang med din webbplats.

demo

10. Elastiska skuggknappar

Dessa unika skuggknappar är utformade med en långsam övergång under svävar och aktiva tillstånd. Du hittar liknande exempel på Mozilla hemsida med deras stora “Hämta Firefox” knapp. Några av box-shadow egenskaper kombinerar faktiskt tre olika skuggor tillsammans i ett kommando.

.blu-btn display: inline-block; -moz-gränsen-radien: .25em; gränsstråle: .25em; -webkit-box-skugga: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-skugga: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,2); boxskugga: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,2); bakgrundsfärg: # 276195; bakgrundsbild: -moz-linjär gradient (# 3c88cc, # 276195); bakgrundsbild: -ms-linjär gradient (# 3c88cc, # 276195); bakgrundsbild: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # 3c88cc), färgstopp (100%, # 276195)); bakgrundsbild: -webkit-linjär-gradient (# 3c88cc, # 276195); bakgrundsbild: -o-linjär 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)"; bakgrundsbild: linjär gradient (# 3c88cc, # 276195); gräns: 0; markör: pekare; färg: #fff; text-dekoration: ingen; text-align: center; typsnittstorlek: 16px; vaddering: 0px 20px; höjd: 40px; linjehöjd: 40px; min bredd: 100px; textskugga: 0 1px 0 rgba (0,0,0,0,35); font-family: Arial, Tahoma, sans-serif; -webkit-övergång: alla linjära .2s; -moz-övergång: alla linjära .2s; -o-övergång: alla linjära .2s; -ms-övergång: alla linjära .2s; övergång: alla linjära .2s .blu-btn: sväva, .blu-btn: fokus -webkit-box-skugga: 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; -moz-box-skugga: 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; boxskugga: 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: aktiv -webkit-box-skugga: 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-skugga: inset 0 2px 0 0 rgba (0,0,0,0,2), insats 0 12px 20px 6px rgba (0,0,0,0,2), inset 0 0 2px 2px rgba (0,0, 0,0.3); boxskugga: inset 0 2px 0 0 rgba (0,0,0,0,2), insats 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-gränsen-radien: .25em; gränsstråle: .25em; -webkit-box-skugga: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-skugga: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,2); boxskugga: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0,0,2); bakgrundsfärg: # 659324; bakgrundsbild: -moz-linjär-gradient (# 81bc2e, # 659324); bakgrundsbild: -ms-linjär gradient (# 81bc2e, # 659324); bakgrundsbild: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # 81bc2e), färgstopp (100%, # 659324)); bakgrundsbild: -webkit-linjär-gradient (# 81bc2e, # 659324); bakgrundsbild: -o-linjär 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)"; bakgrundsbild: linjär gradient (# 81bc2e, # 659324); gräns: 0; markör: pekare; färg: #fff; text-dekoration: ingen; text-align: center; typsnittstorlek: 16px; vaddering: 0px 20px; höjd: 40px; linjehöjd: 40px; min bredd: 100px; textskugga: 0 1px 0 rgba (0,0,0,0,35); font-family: Arial, Tahoma, sans-serif; -webkit-övergång: alla linjära .2s; -moz-övergång: alla linjära .2s; -o-övergång: alla linjära .2s; -ms-övergång: alla linjära .2s; övergång: alla linjära .2s;  .grn-btn: sväva, .grn-btn: fokus -webkit-box-skugga: 0 2px 0 0 rgba (0,0,0,0,1), inset 0 -2px 0 0 rgba (0,0,0 , 0,3), insats 0 12px 20px 2px # 85ca26; -moz-box-skugga: 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; boxskugga: 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: aktiv -webkit-box-skugga: inset 0 2px 0 0 rgba (0,0,0,0,2), inset 0 12px 20px 6px rgba (0,0,0,0,2), inmatning 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-skugga: inset 0 2px 0 0 rgba (0,0,0,0,2), insats 0 12px 20px 6px rgba (0,0,0,0,2), inset 0 0 2px 2px rgba (0,0, 0,0.3); boxskugga: inset 0 2px 0 0 rgba (0,0,0,0,2), insats 0 12px 20px 6px rgba (0,0,0,0,2), inset 0 0 2px 2px rgba (0,0,0,0,3 );

Jag använder fulla övergångar i 200 millisekunder på svävar och aktiva knapptillstånd. Vad som är så bra med dessa stilar är att du kan tillämpa dem på nästan alla klickbara element. Knappar, ankarlänkar, formelement eller något annat du tycker är lämpligt - även om dessa stilar ska användas sparsamt för att inte överbelasta din design.

Knappar som dessa sparas ofta bäst på samma sätt som Mozilla använder dem. Fäst dessa stilar i din blogg där du har knappar för freebie-nedladdningar eller något liknande. Användare älskar att interagera med unika gränssnitt och detta innebär ofta en mycket högre andel för din klickfrekvens.

demo

Slutgiltiga tankar

Jag hoppas att du kan ta bort några bra lektioner från den här samlingen av boxskuggtekniker. Det finns många olika områden du kan fokusera på att inkludera formulär, modalboxar, knappar, verktygsfält och till och med fullständiga webbsidor.

Känn dig fri att genomföra någon av dessa skuggeffekter i delar på din egen hemsida. Det finns många andra tekniker där ute, men den här samlingen är perfekt för både nybörjare och avancerade utvecklare. Också om du har några förslag eller frågor om artikeln kan du dela med oss i kommentarfältet nedan.