10 Kreative teknikker ved hjelp av CSS3 Box Shadow

Vi har sett et enormt antall fremskritt i CSS3 webutvikling i løpet av de siste årene. Populære nettsteder over hele Internett har begynt å inkludere mange unike stilarter som avrundede hjørner og mobile responsive medieforespørsler. Men enda viktigere dette har åpnet døren for kreative grensesnitt som skal prototypes om noen minutter.

I denne artikkelen vil jeg dele 10 kodestykker relatert til briljante CSS3-bokseskyggedesigner. Jeg skal forklare hvordan koden fungerer, og hvordan du kan implementere hver bokseskygge inn i ditt eget nettsted.

Disse stilene er alle tilskrevet stor designpåvirkning fra andre populære nettsteder. Dette er et godt eksempel på hvordan dagens webutviklere bygger effektive trender for fremtiden for webdesign.

1. Fast topp verktøylinje

Den rumensk sosiale media-tjenesten Trilulilu bruker en flytende topp verktøylinje rundt hele nettstedet. Dette kan opprettes raskt ved hjelp av a posisjon: fast; eiendom på et hvilket som helst toppstangelement. Men denne ekstra boks skyggen tar effekten til et helt nytt nivå.

#banner posisjon: fast; høyde: 60px; bredde: 100%; topp: 0; venstre: 0; border-top: 5px solid # a1cb2f; bakgrunn: #fff; -moz-boks-skygge: 0 2px 3px 0px rgba (0, 0, 0, 0.16); -webkit-boks-skygge: 0 2px 3px 0px rgba (0, 0, 0, 0.16); boks-skygge: 0 2px 3px 0px rgba (0, 0, 0, 0.16); z-indeks: 999999;  #banner h1 linjehøyde: 60px;

Du vil legge merke til at boksskyggeegenskapen faktisk er satt opp med en ganske enkel verdi kombinasjon. Skyggen vil falle under boksen, og uskarpe ved 3px på hver side.

Vi kan bruke RGBA () Metode for å bruke liten opasitet på skyggen, slik at elementet ikke ser for mørkt ut. Det er en subtil tillegg som sikkert vil fange din besøkendes oppmerksomhet.

Demo

2. Sub-Navigation Dropdown

Her er en annen kreativ bokseskyggemetode som brukes på en undermeny i skalar dropdown. En tilsvarende effekt kan sees på Entreprenør mens du svinger over hver av de viktigste navigasjonskoblingene. Dette er definitivt litt vanskeligere å konfigurere, men vel verdt tålmodigheten.

#bar display: block; høyde: 45px; bakgrunn: # 22385a; polstring: 5px; margin-bunn: 150px; posisjon: relativ;  #bar ul margin: 0px 15px; font-familie: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li bakgrunn: # 22385a; skjerm: blokk; fontstørrelse: 1.2em; posisjon: relativ; flyte: venstre;  #bar ul li a display: block; farge: # fffff7; linjehøyde: 45px; font-weight: bold; polstring: 0px 10px; tekst-dekorasjon: ingen; z-indeks: 9999;  #bar ul li a: svever, #bar ul li a.selected color: # 365977; bakgrunn: #fff; Grense øverst til venstre: 3px; grense-topp-høyre-radius: 3px; -webkit-grense-topp-venstre-radius: 3px; -webkit-grense-topp-høyre-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px;  #bar ul .subnav display: block; igjen: 14px; topp: 48px; z-indeks: -1; bredde: 500px; posisjon: absolutt; høyde: 90px; grense: 1px solid # edf0f3; border-top: 0; polstring: 10px 0 10px 10px; overløp: skjult; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-grense-bunn-venstre-radius: 3px; -webkit-grense-bunn-høyre-radius: 3px; grense bunn-høyre-radius: 3px; grense bunn-høyre-radius: 3px; -moz-boks-skygge: 0px 2px 7px rgba (0,0,0,0,25); -webkit-boks-skygge: 0px 2px 7px rgba (0,0,0,0,25); boks-skygge: 0px 2px 7px rgba (0,0,0,0,25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (Styrke = 3, Retning = 180, Farge =" # 333333 ")"; filter: progid: DXImageTransform.Microsoft.Shadow (Styrke = 3, Retning = 180, Farge = "# 333333");

Nav-koblingene kan styles for å endre farge når den er valgt eller på musepekeren. Jeg legger også noen avrundede grenser inn på koblingene og over rullegardinmenyen. Dette gir en bedre følelse enn hardkanter rundt. Jeg benytter også godt av -ms-filteret og filter egenskaper som bare er proprietære til Internet Explorer.

Hvis du konfigurerer et fullt navigasjonssystem, kan du endre visningen til ingen og skjule menyen når siden laster. Deretter kan du bruke litt jQuery til å målrette hendelsen .hover () og vise undernavnet med oppdatert innhold.

Demo

3. Glanset skygge knapp

Dette er muligens en av mine favorittstiler å lage bare på grunn av hvor dynamisk den vises på siden. Hvis du ikke kan fortelle, er dette den lille blåknappen som er funnet på YouTubes hjemmeside etter at du først logget inn.

blues color: #fff; bredde: 190px; høyde: 35px; markør: pointer; font-familie: Arial, Tahoma, sans-serif; fontstørrelse: 1.0em; font-weight: bold; -moz-grense-radius: 2px; -webkit-grense-radius: 2px; border-radius: 2px; kantbredde: 1px; border-farge: # 0053a6 # 0053a6 # 000; bakgrunnsfarge: # 6891e7; bakgrunnsbilde: -moz-lineær gradient (topp, # 4495e7 0, # 0053a6 100%); bakgrunnsbilde: -ms-lineær gradient (topp, # 4495e7 0, # 0053a6 100%); bakgrunnsbilde: -o-lineær gradient (topp, # 4495e7 0, # 0053a6 100%); bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0, # 4495e7), fargestopp (100%, # 0053a6)); bakgrunnsbilde: -webkit-lineær gradient (topp, # 4495e7 0, # 0053a6 100%); bakgrunnsbilde: lineær gradient (til bunn, # 4495e7 0, # 0053a6 100%); tekstskygge: 1px 1px 0 rgba (0, 0, 0, .6); -moz-boks-skygge: innsett 0 1px 0 rgba (256, 256, 256, .35); -ms-boks-skygge: innsett 0 1px 0 rgba (256, 256, 256, .35); -webkit-boks-skygge: innsett 0 1px 0 rgba (256, 256, 256, .35); boks-skygge: innsett 0 1px 0 rgba (256, 256, 256, .35); filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: svever border-color: # 002d59 # 002d59 # 000; -moz-boks-skygge: innsett 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -ms-boks-skygge: innsett 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -webkit-boks-skygge: innsett 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); boksskygge: innsett 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); bakgrunnsbilde: -moz-lineær-gradient (topp, # 3a8cdf 0, # 0053a6 100%); bakgrunnsbilde: -ms-lineær gradient (topp, # 3a8cdf 0, # 0053a6 100%); bakgrunnsbilde: -o-lineær gradient (topp, # 3a8cdf 0, # 0053a6 100%); bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0, # 3a8cdf), fargestopp (100%, # 0053a6)); bakgrunnsbilde: -webkit-lineær gradient (topp, # 3a8cdf 0, # 0053a6 100%); bakgrunnsbilde: lineær gradient (til bunn, # 3a8cdf 0, # 0053a6 100%);  .blues: active border-color: # 000 # 002d59 # 002d59; -moz-boks-skygge: innsett 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -ms-boks-skygge: innsett 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -webkit-boks-skygge: innsett 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; boks-skygge: innsett 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); bakgrunnsbilde: -moz-lineær-gradient (topp, # 005ab4 0, # 175ea6 100%); bakgrunnsbilde: -ms-lineær-gradient (topp, # 005ab4 0, # 175ea6 100%); bakgrunnsbilde: -o-lineær gradient (topp, # 005ab4 0, # 175ea6 100%); bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0, # 005ab4), fargestopp (100%, # 175ea6)); bakgrunnsbilde: -webkit-lineær-gradient (topp, # 005ab4 0, # 175ea6 100%); bakgrunnsbilde: lineær gradient (til bunn, # 005ab4 0, # 175ea6 100%);

Hele knappekoden er mye å se på, men vi prøver å støtte så mange nettlesere som mulig. Det er tekstskygger og bokseskygger med tilhørende støtte for MS Internet Explorer 7+. Også vi setter inn bakgrunnsbilde eiendom med CSS3-gradienter over et stort antall leverandørspesifikke prefikser.

Men hvis du elsker denne designstilen, så svever og aktive stater vil også få oppmerksomheten din. Vi oppdaterer grensen for å inkludere noen skygger inni, mens du trykker ned, mens du oppdaterer bakgrunnsgraden for å vise litt mørkere.

Siden det ikke er noen bilder på knappen, kan du oppdatere hex-verdiene og morph dette for å blande seg i praktisk talt alle fargevalg.

Demo

4. Varsler Flyttemeny

Jeg er ikke en stor bruker av Facebook, men jeg har lagt merke til noen UI-teknikker fra deres redesigner. Denne flytmenyen kan sammenlignes med dine varsler eller vennsforespørsler popup funnet på hjemmesiden.

.flyout bredde: 310px; margin-topp: 10px; skriftstørrelse: 11px; posisjon: relativ; font-familie: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; bakgrunnsfarge: hvit; polstring: 9px 11px; bakgrunn: rgba (255, 255, 255, 0,9); grense: 1px solid # c5c5c5; -webkit-boks-skygge: 0 3px 8px rgba (0, 0, 0, .25); -moz-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); boks-skygge: 0 3px 8px rgba (0, 0, 0, .25); -webkit-grense-radius: 3px; -moz-grense-radius: 3px; border-radius: 3px;  .flyout #tip bakgrunnsbilde: url ('images / tip.png'); Bakgrunn-gjenta: nei-gjenta; bakgrunnsstørrelse: auto; høyde: 11px; posisjon: absolutt; topp: -11px; igjen: 25px; bredde: 20px;  .flyout h2 text-transform: store bokstaver; farge: # 666; fontstørrelse: 1.2em; polstring-bunn: 5px; margin-bunn: 12px; grensebunn: 1px solid #dcdbda;  .flyout p polstring-bunn: 25px; skriftstørrelse: 1.1em; farge: # 222;

Det er ikke mange nye tankekodekoder som kan vises her. Jeg bruker en liten .Tips klasse med et internt spenningselement for å legge til verktøytip-trekanten. Det er mulig å lage rene CSS3 trekanter, men denne metoden er ikke lett, som du kanskje kan forestille deg. Hvis du foretrekker denne metoden, kan det være verdt å hacking noe sammen. Men CSS3-rotasjonsegenskapene støttes ikke overalt; Imidlertid krever bilder ikke noen tilbakekallingsmetode.

Demo

5. Apple Page Wrapper

Det er så mange imponerende CSS3-bokseskygger du finner på Apples offisielle nettside. Dette eksempelet nedenfor er en liten boksbeholder med noen få kolonnespenner. Når du ser over Apples oppsett, vil du legge merke til at mange av sidene deres består av en rekke innpakningsbokser.

.applewrap bredde: 100%; skjerm: blokk; høyde: 150px; bakgrunn: hvit; grense: 1px solid; border-farge: # e5e5e5 #dbdbdb # d2d2d2; -webkit-grense-radius: 4px; -moz-grense-radius: 4px; grense-radius: 4px; -webkit-boks-skygge: rgba (0, 0, 0, 0.3) 0 1px 3px; -moz-boks-skygge: rgba (0,0,0,0,3) 0 1px 3px; boks-skygge: rgba (0, 0, 0, 0.3) 0 1px 3px;  .applewrap .col float: left; boks-størrelse: border-box; bredde: 250px; høyde: 150px; polstring: 16px 7px 6px 22px; font: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; farge: # 343434; grense-høyre: 1px solid #dadada;

Du kan sette sammen en lignende side splittet av innholdskasser av forskjellig bredde og høyde. Selv om jeg har satt noen få kolonner i denne demoen, er det ikke nødvendig med en formateringsteknikk på noen måte. Boksskyggen passer best på en hvit / grå bakgrunn. Men jeg synes å vise over noen lys farge ville se ganske bra ut.

Demo

6. Apple Content Box

Denne andre stilen av innholds boksen på Apples nettside brukes hovedsakelig for kolonne design. Disse er først og fremst nederst på siden, presentasjoner og annen relatert informasjon. Det er en helt annen designstil med boksskyggen som vises innefra fra toppen ned.

.eplekasse bredde: auto; høyde: 85px; boks-størrelse: border-box; bakgrunn: # f5f5f5; polstring: 20px 20px 10px; margin: 10px 0 20px; grense: 1px solid #ccc; grense-radius: 4px; -webkit-grense-radius: 4px; -moz-grense-radius: 4px; -grense-radius: 4px; -webkit-boks-skygge: innsett 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-skygge: innsett 0px 1px 1px rgba (0, 0, 0, .3); boks-skygge: innsett 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col width: 140px; flyte: venstre; margin: 0 0 0 30px;

Jeg tror ikke at denne koden skal være for vanskelig å følge og kopiere til en annen div-container. Den eneste boksskyggen vi bruker bruker innfelt med rgba alfa-gjennomsiktige fargekoder. Så selv om vi har dropshadow satt til ren svart, viser vi bare om en 30% opasitet.

Demo

7. Utvalgte linker

Dette er sannsynligvis min favoritt boks skygge stil fra Apples nåværende nettside. Du bør finne en live demo stil av denne teknikken på iCloud siden med en rekke flytende link bokser.

.applefeature høyde: 150px; margin: 8px; vertikaljustering: topp; display: inline-block;  .applefeature a display: block; bredde: 168px; høyde: 140px; grense: 1px solid #ccc; farge: # 333; tekst-dekorasjon: ingen; font-weight: bold; linjehøyde: 1,3em; bakgrunn: # f7f7f7; -webkit-boks-skygge: innsett 0 1px 2px rgba (0, 0, 0, .3); -moz-boks-skygge: innsett 0 1px 2px rgba (0, 0, 0, .3); boks-skygge: innsett 0 1px 2px rgba (0, 0, 0, .3); -webkit-grense-radius: 4px; -moz-grense-radius: 4px; grense-radius: 4px;  .applefeature a: svever bakgrunn: #fafafa; bakgrunn: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (#fff) til (# f7f7f7)); bakgrunn: -moz-lineær gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-boks-skygge: innsett 0 1px 2px rgba (0,0,0, .3); -moz-boks-skygge: innsett 0 1px 2px rgba (0,0,0, .3); boks-skygge: innsett 0 1px 2px rgba (0,0,0, .3); -webkit-grense-radius: 4px; -moz-grense-radius: 4px; grense-radius: 4px;  .applefeature a img display: block; margin: 26px auto 4px;  .applefeature a h4 display: block; bredde: 160px; skriftstørrelse: 1,3em; font-familie: Arial, Tahoma, sans-serif; farge: # 646464; tekstjustering: center;

Disse kjennetegnene er satt til en fast bredde og inkluderer et klart ikon og skjermtekst. Apples eksempel bruker en lignende bokseskygge som vi så i forrige innholds boks. derimot hele boksen kan nå aktiveres som en lenke som inkluderer både :sveve og :aktiv stater. Det er mye fleksibilitet med denne lenken, og du bør prøve å leke med kildekoden.

Det er mulig å forkorte høyden / bredden og lage en mye mindre liste over lenker. Disse kan være et sett med kapitler eller sider i en artikkel, eller du kan gjøre en undermeny begrenset med linkikoner. Det er ærlig et flott sett med nyere CSS3-teknikker som viser hvor mye strøm du har som webdesigner.

Demo

8. Innrammede bilder

Jeg har lagt til en grå bakgrunn på dette eksempelet, slik at du kan se bokseskyggestiler tydeligere. Denne boksen ligner på forhåndsvisningshittene på wordpress.com, bortsett fra at jeg har lagt litt mer dybde til kildekoden.

.wpframe bakgrunn: #fff; border-radius: 2px; -webkit-grense-radius: 2px; -moz-grense-radius: 2px; polstring: 8px; -webkit-boks-skygge: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; boks-skygge: 1px 2px 1px # d1d1d1;

Siden bildene er gitt en liten polstring på hver side, vises denne rammen som en stor hvit ramme. Du kan alltid oppdatere bakgrunnsfargen, eller til og med legge til en liten ytre kant for å skille bildet fra bakgrunnen. Men dette ganske enkle settet av stiler kan manøvreres i ulike bokseskyggeteknikker. Spill deg rundt med koden og se hvordan du kan forbedre bildesignalene på ditt eget nettsted.

Demo

9. Glødende inngangsfelt

Jeg fikk denne ideen etter å ha besøkt Pinterest login siden et par ganger. Deres animerte stiler viser egentlig noen veltalende eksempler på flere inline-boksskygger, både ute og inne.

.formwrap display: block; margin-bunn: 15px;  .formwrap label display: inline-block; bredde: 80px; skriftstørrelse: 11px; font-weight: bold; farge: # 444; font-familie: Arial, Tahoma, sans-serif;  .formwrap .shadowfield posisjon: relative; bredde: 250px; skriftstørrelse: 17px; font-familie: "Helvetica Neue", Arial, sans-serif; font-weight: normal; bakgrunn: # f7f8f8; farge: # 7c7c7c; linjehøyde: 1,4; polstring: 6px 12px; disposisjon: ingen; overgang: alle 0.2s lett-i-ut 0s; -webkit-overgang: alle 0.2s enkel-i-ut 0s; -moz-overgang: alle 0.2s enkel-i-ut 0s; grense: 1px solid # ad9c9c; border-radius: 6px 6px 6px 6px; boksskygge: 0 1px rgba (34, 25, 25, 0.2) innsett, 0 1px #fff;  .formwrap .shadowfield: fokus border-color: # 930; bakgrunn: #fff; farge: # 5d5d5d; boksskygge: innsett 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-boks-skygge: innsett 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-boks-skygge: innsett 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);

Selv om de første stilene er veldig attraktive, er jeg trukket til overgangseffekter som du fokuserer på hvert innfelt felt. Du kan flippe mellom dem og se den umiddelbare forskjellen i så mange egenskaper. Den eksterne glødende bokseskyggen blir brukt sammen med en oppdatert innstillingsskygge. Også tekstfargen blir lettere etter hvert som du er fokusert på en bestemt innføring, og fades da du defokuserer.

Selv å kopiere over en av disse effektene vil forbedre brukeropplevelsen av skjemafeltene dine. Pass på at du ikke går for langt overbord til det punktet der skjemaene dine knapt er brukbare. Imidlertid vil de fleste besøkende nyte de behagelige estetiske effektene som også oppmuntrer til interaksjon og videre involvering med nettstedet ditt.

Demo

10. Elastiske skygge knapper

Disse unike skyggeknappene er utformet med en langsom overgang under svinger og aktive tilstander. Du kan finne lignende eksempler på Mozilla-hjemmesiden med deres store “Last ned Firefox” knapp. Noen av box-shadow egenskaper kombinerer faktisk tre forskjellige skygger sammen i én kommando.

.blu-btn display: inline-block; -moz-grense-radius: .25em; border-radius: .25em; -webkit-boks-skygge: 0 2px 0 0 rgba (0,0,0,0,1), innsett 0 -2px 0 0 rgba (0,0,0,0,2); -moz-boks-skygge: 0 2px 0 0 rgba (0,0,0,0,1), innsett 0 -2px 0 0 rgba (0,0,0,0,2); boksskygge: 0 2px 0 0 rgba (0,0,0,0,1), innsett 0 -2px 0 0 rgba (0,0,0,0,2); bakgrunnsfarge: # 276195; bakgrunnsbilde: -moz-lineær-gradient (# 3c88cc, # 276195); bakgrunnsbilde: -ms-lineær-gradient (# 3c88cc, # 276195); bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # 3c88cc), fargestopp (100%, # 276195)); bakgrunnsbilde: -webkit-lineær-gradient (# 3c88cc, # 276195); bakgrunnsbilde: -o-lineæ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)"; bakgrunnsbilde: lineær gradient (# 3c88cc, # 276195); grense: 0; markør: pointer; farge: #fff; tekst-dekorasjon: ingen; tekstjustering: center; skriftstørrelse: 16px; polstring: 0px 20px; høyde: 40px; linjehøyde: 40px; min bredde: 100px; tekstskygge: 0 1px 0 rgba (0,0,0,0,35); font-familie: Arial, Tahoma, sans-serif; -webkit-overgang: alle lineære .2s; -moz-overgang: alle lineære .2s; -o-overgang: alle lineære .2s; -ms-overgang: alle lineære .2s; overgang: alle lineære .2s .blu-btn: svever, .blu-btn: fokus -webkit-boks-skygge: 0 2px 0 0 rgba (0,0,0,0,1), innsett 0 -2px 0 0 rgba (0,0,0,0,3), innsett 0 12px 20px 2px # 3089d8; -moz-boks-skygge: 0 2px 0 0 rgba (0,0,0,0,1), innsett 0 -2px 0 0 rgba (0,0,0,0,3), innsett 0 12px 20px 2px # 3089d8; boksskygge: 0 2px 0 0 rgba (0,0,0,0,1), innsett 0 -2px 0 0 rgba (0,0,0,0,3), innsett 0 12px 20px 2px # 3089d8;  .blu-btn: aktiv -webkit-boks-skygge: innsett 0 2px 0 0 rgba (0,0,0,0,2), innsett 0 12px 20px 6px rgba (0,0,0,0,2), innspill 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-skygge: innsett 0 2px 0 0 rgba (0,0,0,0,2), innsett 0 12px 20px 6px rgba (0,0,0,0,2), innsett 0 0 2px 2px rgba (0,0, 0,0.3); boks-skygge: innsett 0 2px 0 0 rgba (0,0,0,0,2), innsett 0 12px 20px 6px rgba (0,0,0,0,2), innsett 0 0 2px 2px rgba (0,0,0,0,3 );  .grn-btn display: inline-block; -moz-grense-radius: .25em; border-radius: .25em; -webkit-boks-skygge: 0 2px 0 0 rgba (0,0,0,0,1), innsett 0 -2px 0 0 rgba (0,0,0,0,2); -moz-boks-skygge: 0 2px 0 0 rgba (0,0,0,0,1), innsett 0 -2px 0 0 rgba (0,0,0,0,2); boksskygge: 0 2px 0 0 rgba (0,0,0,0,1), innsett 0 -2px 0 0 rgba (0,0,0,0,2); bakgrunnsfarge: # 659324; bakgrunnsbilde: -moz-lineær-gradient (# 81bc2e, # 659324); bakgrunnsbilde: -ms-lineær-gradient (# 81bc2e, # 659324); bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # 81bc2e), fargestopp (100%, # 659324)); bakgrunnsbilde: -webkit-lineær gradient (# 81bc2e, # 659324); bakgrunnsbilde: -o-lineæ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)"; bakgrunnsbilde: lineær gradient (# 81bc2e, # 659324); grense: 0; markør: pointer; farge: #fff; tekst-dekorasjon: ingen; tekstjustering: center; skriftstørrelse: 16px; polstring: 0px 20px; høyde: 40px; linjehøyde: 40px; min bredde: 100px; tekstskygge: 0 1px 0 rgba (0,0,0,0,35); font-familie: Arial, Tahoma, sans-serif; -webkit-overgang: alle lineære .2s; -moz-overgang: alle lineære .2s; -o-overgang: alle lineære .2s; -ms-overgang: alle lineære .2s; overgang: alle lineære .2s;  .grn-btn: svever, .grn-btn: fokus -webkit-boks-skygge: 0 2px 0 0 rgba (0,0,0,0,1), innsett 0 -2px 0 0 rgba (0,0,0 , 0,3), innsett 0 12px 20px 2px # 85ca26; -moz-boks-skygge: 0 2px 0 0 rgba (0,0,0,0,1), innsett 0 -2px 0 0 rgba (0,0,0,0,3), innsett 0 12px 20px 2px # 85ca26; bokseskygge: 0 2px 0 0 rgba (0,0,0,0,1), innsett 0 -2px 0 0 rgba (0,0,0,0,3), innsett 0 12px 20px 2px # 85ca26;  .grn-btn: aktiv -webkit-boks-skygge: innsett 0 2px 0 0 rgba (0,0,0,0,2), innsett 0 12px 20px 6px rgba (0,0,0,0,2), innspill 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-skygge: innsett 0 2px 0 0 rgba (0,0,0,0,2), innsett 0 12px 20px 6px rgba (0,0,0,0,2), innsett 0 0 2px 2px rgba (0,0, 0,0.3); boks-skygge: innsett 0 2px 0 0 rgba (0,0,0,0,2), innsett 0 12px 20px 6px rgba (0,0,0,0,2), innsett 0 0 2px 2px rgba (0,0,0,0,3 );

Jeg bruker full overganger i 200 millisekunder på svinger og aktive knapptilstander. Det som er så bra med disse stilene er at du kan bruke dem til nesten hvilket som helst klikkbart element. Knapper, ankerforbindelser, formelementer eller alt annet du synes er passende - selv om disse stilene skal brukes sparsomt for ikke å overbelaste designet ditt.

Knapper som disse blir ofte lagret best på samme måte som Mozilla bruker dem. Fest disse stilene inn i bloggen din der du har knapper for freebie-nedlastinger, eller noe lignende. Brukere elsker å samhandle med unike grensesnitt og dette oversetter ofte til en mye høyere prosentandel for klikk gjennom vurdering.

Demo

Siste tanker

Jeg håper du kan ta bort noen gode leksjoner fra denne samlingen av bokseskyggeteknikker. Det er mange forskjellige områder du kan fokusere på, inkludert skjemaer, modalbokser, knapper, verktøylinjer og til og med fulle nettsider.

Du er velkommen til å implementere noen av disse skyggeeffektene i deler av ditt eget nettsted. Det er mange andre teknikker der ute, men denne samlingen er perfekt for både nybegynnere og avanserte utviklere. Også hvis du har noen forslag eller spørsmål om artikkelen du kan dele med oss i kommentarfeltet nedenfor.