10 kreative teknikker ved hjælp af CSS3 Box Shadow
Vi har set et enormt antal fremskridt inden for CSS3 webudvikling i løbet af de sidste par år. Populære websites over hele internettet er begyndt at inkorporere mange unikke stilarter som afrundede hjørner og mobilresponsive medieforespørgsler. Men endnu vigtigere har dette åbnet døren for kreative grænseflader, der skal prototypes i løbet af få minutter.
I denne artikel vil jeg dele 10 kodestykker vedrørende brilliant CSS3 box skygge design. Jeg vil forklare, hvordan koden fungerer, og hvordan du kan implementere hver bokseskygge til din egen hjemmeside.
Disse stilarter er alle henført til stor designpåvirkning fra andre populære hjemmesider. Dette er et godt eksempel på, hvordan nuværende webudviklere bygger effektive tendenser for fremtiden for webdesign.
1. Fixed Top Toolbar
Den rumænske socialmedietjeneste Trilulilu bruger en flydende top værktøjslinje rundt om hele deres hjemmeside. Dette kan oprettes hurtigt ved hjælp af en stilling: fast; ejendom på ethvert øverste bjælkeelement. Men denne ekstra boks skygge får effekten til et helt nyt niveau.
#banner position: fast; højde: 60px; bredde: 100%; top: 0; venstre: 0; border-top: 5px solid # a1cb2f; baggrund: #fff; -moz-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0,16); -webkit-boks-skygge: 0 2px 3px 0px rgba (0, 0, 0, 0,16); box-skygge: 0 2px 3px 0px rgba (0, 0, 0, 0.16); z-indeks: 999999; #banner h1 linie-højde: 60px;
Du vil bemærke, at boksskyggeegenskaben faktisk er oprettet med en forholdsvis enkel værdi kombination. Skyggen falder under kassen og blur ved 3 px på hver side.
Vi kan bruge RGBA () metode til at anvende lille uigennemsigtighed på skyggen, så elementet ikke vises for mørkt. Det er en subtil tilføjelse, der sikkert vil fange din besøgendes opmærksomhed.
- Demo
2. Sub-Navigation Dropdown
Her er en anden kreativ boks skygge metode anvendt på en scalar dropdown undermenu. En lignende effekt kan ses på iværksætteren, mens du svæver over hver af de øverste hovednavigationsforbindelser. Dette er helt sikkert lidt vanskeligere at konfigurere men værd at tålmodigheden.
#bar display: block; højde: 45px; baggrund: # 22385a; polstring-top: 5px; margin-bund: 150px; stilling: relativ; #bar ul margin: 0px 15px; font-familie: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif; #bar ul li baggrund: # 22385a; display: blok; skrifttypestørrelse: 1.2em; stilling: relativ; flyde: venstre; #bar ul li a display: block; farve: # fffff7; linjens højde: 45px; font-weight: bold; polstring: 0px 10px; tekst dekoration: ingen; z-indeks: 9999; #bar ul li a: svinger, #bar ul li a.selected color: # 365977; baggrund: #fff; grænse-top-venstre-radius: 3px; grænse-top-højre-radius: 3px; -webkit-grænse-top-venstre-radius: 3px; -webkit-grænse-top-højre-radius: 3px; -moz-grænse-radius-topleft: 3px; -moz-grænse-radius-topright: 3px; #bar ul .subnav display: block; venstre: 14px; top: 48px; z-indeks: -1; bredde: 500px; position: absolut; højde: 90px; grænse: 1px solid # edf0f3; border-top: 0; polstring: 10px 0 10px 10px; overløb: skjult; -moz-grænse-radius-bottomleft: 3px; -moz-grænse-radius-bottomleft: 3px; -webkit-grænse-bund-venstre-radius: 3px; -webkit-grænse-bund-højre-radius: 3px; grænse-bund-højre-radius: 3px; grænse-bund-højre-radius: 3px; -moz-box-skygge: 0px 2px 7px rgba (0,0,0,0,25); -webkit-boks-skygge: 0px 2px 7px rgba (0,0,0,0,25); box-skygge: 0px 2px 7px rgba (0,0,0,0,25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (Styrke = 3, Retning = 180, Farve =" # 333333 ")"; filter: progid: DXImageTransform.Microsoft.Shadow (Styrke = 3, Retning = 180, Farve = "# 333333");
Nav-linkene kan styles til at ændre farve, når de er valgt, eller på musemarkøren. Jeg tilføjer også nogle afrundede grænser på linkene og over rullemenuen. Dette giver en pænere føler end hardkanter rundt omkring. Jeg gør også god brug af -ms-filter og filter egenskaber, der udelukkende er proprietære til Internet Explorer.
Hvis du opsætter et komplet navigationssystem, kan du ændre skærmen til ingen og skjule menuen, når siden er indlæst. Derefter kan du bruge nogle jQuery til at målrette mod .hover () -hændelsen og vise undernavnet med opdateret indhold.
- Demo
3. Glossy Shadow Button
Dette er muligvis en af mine yndlingsstile til at oprette bare på grund af, hvor dynamisk den vises på siden. Hvis du ikke kan se det, er det den lille blå knap, der findes på YouTubes hjemmeside, efter du først logger ind.
blues farve: #fff; bredde: 190px; højde: 35px; markør: pointer; skrifttype-familie: Arial, Tahoma, sans-serif; skrifttypestørrelse: 1.0em; font-weight: bold; -moz-grænse-radius: 2px; -webkit-grænse-radius: 2px; grænse-radius: 2px; kantbredde: 1px; border-farve: # 0053a6 # 0053a6 # 000; baggrundsfarve: # 6891e7; baggrundsbillede: -moz-lineær gradient (top, # 4495e7 0, # 0053a6 100%); baggrundsbillede: -ms-lineær gradient (top, # 4495e7 0, # 0053a6 100%); baggrundsbillede: -o-lineær gradient (top, # 4495e7 0, # 0053a6 100%); baggrundsbillede: -webkit-gradient (lineær, venstre top, venstre bund, farve stop (0, # 4495e7), farve stop (100%, # 0053a6)); baggrundsbillede: -webkit-lineær gradient (top, # 4495e7 0, # 0053a6 100%); baggrundsbilde: lineær gradient (til bund, # 4495e7 0, # 0053a6 100%); tekstskygge: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: input 0 1px 0 rgba (256, 256, 256, 35); -ms-box-shadow: input 0 1px 0 rgba (256, 256, 256, .35); -webkit-boks-skygge: indsæt 0 1px 0 rgba (256, 256, 256, .35); box-skygge: indsæt 0 1px 0 rgba (256, 256, 256, .35); filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6); .blues: hover border-color: # 002d59 # 002d59 # 000; -moz-box-shadow: input 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -ms-boks-skygge: indsæt 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -webkit-boks-skygge: indsæt 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); boksskygge: indsæt 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); baggrundsbillede: -moz-lineær-gradient (top, # 3a8cdf 0, # 0053a6 100%); baggrundsbillede: -ms-lineær gradient (top, # 3a8cdf 0, # 0053a6 100%); baggrundsbillede: -o-lineær gradient (top, # 3a8cdf 0, # 0053a6 100%); baggrundsbillede: -webkit-gradient (lineær, venstre top, venstre bund, farve stop (0, # 3a8cdf), farve stop (100%, # 0053a6)); baggrundsbillede: -webkit-lineær-gradient (top, # 3a8cdf 0, # 0053a6 100%); baggrundsbilde: lineær gradient (til bund, # 3a8cdf 0, # 0053a6 100%); .blues: active border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: input 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -mask-skygge: indsæt 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -webkit-boks-skygge: indsæt 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; box-skygge: indsæt 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); baggrundsbillede: -moz-lineær-gradient (top, # 005ab4 0, # 175ea6 100%); baggrundsbillede: -ms-lineær gradient (top, # 005ab4 0, # 175ea6 100%); baggrundsbillede: -o-lineær gradient (top, # 005ab4 0, # 175ea6 100%); Baggrundsbillede: -webkit-gradient (lineær, venstre top, venstre bund, farve stop (0, # 005ab4), farve stop (100%, # 175ea6)); baggrundsbillede: -webkit-lineær-gradient (top, # 005ab4 0, # 175ea6 100%); baggrundsbilde: lineær gradient (til bund, # 005ab4 0, # 175ea6 100%);
Hele knappen kode er meget at se på, men vi forsøger at støtte så mange browsere som muligt. Der er tekstskygger og boksskygger med tilhørende support til MS Internet Explorer 7+. Vi indstiller også baggrundsbillede ejendom med CSS3 gradienter over et stort antal leverandørspecifikke præfikser.
Men hvis du elsker denne design stil så den svømmer og aktive stater vil også fange din opmærksomhed. Vi opdaterer i grunden grænsen for at inkludere nogle skygger inde i, mens du trykker ned, mens du opdaterer baggrundsgraden for at vise en smule mørkere.
Da der ikke er billeder på knappen, kan du opdatere hex-værdierne og morph dette for at blande ind i stort set alle farveskemaer.
- Demo
4. Notifikationer Flyout Menu
Jeg er ikke en stor bruger af Facebook, men jeg har bemærket nogle UI-teknikker fra deres redesigns. Denne flyve menu kan sammenlignes med dine meddelelser eller venneforespørgsler popup fundet på hjemmesiden.
.flyout width: 310px; margin-top: 10px; skrifttypestørrelse: 11px; stilling: relativ; font-familie: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; baggrundsfarve: hvid; polstring: 9px 11px; baggrund: rgba (255, 255, 255, 0,9); grænse: 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); box-skygge: 0 3px 8px rgba (0, 0, 0, .25); -webkit-grænse-radius: 3px; -moz-grænse-radius: 3px; grænse-radius: 3px; .flyout #tip background-image: url ('images / tip.png'); background-repeat: no-repeat; baggrundsstørrelse: auto; højde: 11px; position: absolut; top: -11px; venstre: 25px; bredde: 20px; .flyout h2 text-transform: store bogstaver; farve: # 666; skrifttypestørrelse: 1.2em; polstring-bund: 5px; margin-bund: 12px; border-bottom: 1px solid #dcdbda; .flyout p polstring-bund: 25px; skrifttypestørrelse: 1.1em; farve: # 222; Der er ikke en hel masse nye mind-bending-kode, der kan vises her. Jeg bruger en lille .tip klasse med et internt spændelement for at tilføje værktøjstip-trekanten. Det er muligt at oprette rene CSS3-trekanter, men denne metode er ikke let, som du måske forestiller dig. Hvis du foretrækker denne metode, kan det være værd at hacking noget sammen. Men CSS3-rotationsegenskaberne understøttes ikke overalt; Imidlertid kræver billeder ikke nogen tilbagefaldsmetode.
- Demo
5. Apple Page Wrapper
Der er så mange imponerende CSS3 box skygger, du kan finde på Apples officielle hjemmeside. Dette eksempel nedenfor er en lille kasse beholder med nogle få kolonne spændinger. Når du kigger på Apples layout, opdager du mange af deres sider, der består af mange indpakningsbokse.
.æblepapir bredde: 100%; display: blok; højde: 150px; baggrund: hvid; grænse: 1px solid; randfarve: # e5e5e5 #dbdbdb # d2d2d2; -webkit-grænse-radius: 4px; -moz-grænse-radius: 4px; grænse-radius: 4px; -webkit-box-skygge: rgba (0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba (0,0,0,0,3) 0 1px 3px; box-skygge: rgba (0, 0, 0, 0.3) 0 1px 3px; .applewrap .col float: left; box-dimensionering: border-box; bredde: 250px; højde: 150px; polstring: 16px 7px 6px 22px; skrifttype: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; farve: # 343434; grænse-højre: 1px solid #dadada;
Du kan sammensætte en lignende side opdelt af indholdskasser af forskellig bredde og højde. Selv om jeg har lagt et par kolonner i denne demo, er det ikke en nødvendig formateringsteknik på nogen måde. Bokskyggen passer bedst på en hvid / grå baggrund. Men jeg synes at vise over nogen lys farve ville se ret godt ud.
- Demo
6. Apple Content Box
Denne anden stil af indholds boks på Apples hjemmeside bruges hovedsagelig til kolonne design. Disse er primært nederst på siden, fremvisningsaftaler og anden relateret information. Det er en helt anden design stil med boksen skygge viser indefra fra toppen ned.
.æbleboks bredde: auto; højde: 85px; box-dimensionering: border-box; baggrund: # f5f5f5; polstring: 20px 20px 10px; margin: 10px 0 20px; grænse: 1px solid #ccc; grænse-radius: 4px; -webkit-grænse-radius: 4px; -moz-grænse-radius: 4px; -grense-radius: 4px; -webkit-boks-skygge: indsæt 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: indsæt 0px 1px 1px rgba (0, 0, 0, .3); box-skygge: indsæt 0px 1px 1px rgba (0, 0, 0, .3); .applebox .col width: 140px; flyde: venstre; margin: 0 0 0 30px;
Jeg tror ikke, at denne kode skal være for svær at følge og kopiere til en anden div-container. Den eneste bokseskygge, vi anvender, bruger nedfældning med de rgba alpha-transparente farvekoder. Så selv om vi har drop shadow indstillet til ren sort, viser vi kun en 30% opacitet.
- Demo
7. Udvalgte Links
Dette er nok min favorit box skygge stil fra Apples nuværende hjemmeside. Du bør finde en live demo stil af denne teknik på iCloud siden med en række flydende link bokse.
.applefeature højde: 150px; margen: 8px; vertikaljustering: top; display: inline-block; .applefeature a display: block; bredde: 168px; højde: 140px; grænse: 1px solid #ccc; farve: # 333; tekst dekoration: ingen; font-weight: bold; linjehøjde: 1,3em; baggrund: # f7f7f7; -webkit-boks-skygge: indsæt 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: input 0 1px 2px rgba (0, 0, 0, .3); box-skygge: indsæt 0 1px 2px rgba (0, 0, 0, .3); -webkit-grænse-radius: 4px; -moz-grænse-radius: 4px; grænse-radius: 4px; .applefeature a: hover background: #fafafa; baggrund: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (#fff) til (# f7f7f7)); baggrund: -moz-lineær gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-skygge: input 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: input 0 1px 2px rgba (0,0,0, .3); box-skygge: indsæt 0 1px 2px rgba (0,0,0, .3); -webkit-grænse-radius: 4px; -moz-grænse-radius: 4px; grænse-radius: 4px; .applefeature a img display: block; margin: 26px auto 4px; .applefeature a h4 display: block; bredde: 160px; skrifttypestørrelse: 1.3em; skrifttype-familie: Arial, Tahoma, sans-serif; farve: # 646464; tekst-align: center;
Disse featured links er indstillet til en fast bredde og indeholder et særligt ikon og displaytekst. Apples eksempel bruger en lignende bokseskygge, som vi så i den forrige indholds boks. Imidlertid hele boksen kan nu aktiveres som et link som omfatter både : hover og :aktiv stater. Der er meget fleksibilitet med denne linkboks, og du bør prøve at spille rundt med kildekoden.
Det er muligt at forkorte højden / bredden og skabe en meget mindre liste over links. Disse kan være et sæt kapitler eller sider i en artikel, eller du kan gøre en undermenu begrænset med linkikoner. Det er ærligt et stort sæt nyere CSS3 teknikker, der viser, hvor meget strøm du har som webdesigner.
- Demo
8. Indrammede billeder
Jeg har tilføjet en grå baggrund til dette eksempel, så du kan se boksens skyggeformater mere tydeligt. Denne boks ligner de fremhævede preview shots på wordpress.com, medmindre jeg har tilføjet en smule mere dybde til kildekoden.
.wpframe baggrund: #fff; grænse-radius: 2px; -webkit-grænse-radius: 2px; -moz-grænse-radius: 2px; polstring: 8px; -webkit-boks-skygge: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; box-skygge: 1px 2px 1px # d1d1d1;
Da billederne får en lille polstring på begge sider, vises denne ramme som en stor hvid kant. Du kan altid opdatere baggrundsfarven, eller endda tilføje en lille ydre grænse for at adskille billedet fra baggrunden. Men dette forholdsvis enkle sæt stilarter kan manøvrere i forskellige boksskyggeteknikker. Spil rundt med koden og se, hvordan du kan forbedre billeddesign på din egen hjemmeside.
- Demo
9. Glødende indtastningsfelter
Jeg fik denne idé efter at have besøgt Pinterest login siden et par gange. Deres animerede stilarter viser virkelig nogle veltalende eksempler på flere inline box skygger, både udenfor og input.
.formwrap display: block; margin-bund: 15px; .formwrap label display: inline-block; bredde: 80px; skrifttypestørrelse: 11px; font-weight: bold; farve: # 444; skrifttype-familie: Arial, Tahoma, sans-serif; .formwrap .shadowfield position: relative; bredde: 250px; skrifttypestørrelse: 17px; font-familie: "Helvetica Neue", Arial, sans-serif; skrifttype-vægt: normal; baggrund: # f7f8f8; farve: # 7c7c7c; linjehøjde: 1,4; polstring: 6px 12px; disposition: ingen; overgang: alle 0.2s let-in-out 0s; -webkit-overgang: alle 0.2s let-in-out 0s; -moz-overgang: alle 0.2s let-in-out 0s; grænse: 1px solid # ad9c9c; border-radius: 6px 6px 6px 6px; box-skygge: 0 1px rgba (34, 25, 25, 0.2) input, 0 1px #fff; .formwrap .shadowfield: fokus border-color: # 930; baggrund: #fff; farve: # 5d5d5d; boksskygge: indsæt 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: input 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-skygge: input 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);
Selvom de oprindelige stilarter er meget attraktive, er jeg trukket til overgangseffekter som du fokuserer på hvert inputfelt. Du kan fane mellem dem og se den umiddelbare forskel i så mange egenskaber. Den eksterne glødende bokseskygge anvendes sammen med en opdateret indsatsskygge. Også den tekstfarven bliver lettere, da du er fokuseret på en bestemt indgang, så falmer du ud, mens du defokuserer.
Selv at kopiere over en af disse effekter vil forbedre brugeroplevelsen af dine formularer. Vær sikker på at du ikke går for langt overbord til det punkt, hvor dine skemaer næppe er anvendelige. Men de fleste besøgende vil nyde de behagelige æstetiske effekter, som også tilskynder til interaktion og yderligere engagement med dit websted.
- Demo
10. Elastiske skyggeknapper
Disse unikke skyggeknapper er stylet med en langsom overgang under hover og aktive tilstande. Du kan finde lignende eksempler på Mozilla hjemmeside med deres store “Download Firefox” knap. Nogle af box-shadow Egenskaber kombinerer faktisk tre forskellige skygger sammen i en kommando.
.blu-btn display: inline-block; -moz-grænse-radius: .25em; grænse-radius: .25em; -webkit-boks-skygge: 0 2px 0 0 rgba (0,0,0,0,1), indsæt 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-skygge: 0 2px 0 0 rgba (0,0,0,0,1), indsæt 0 -2px 0 0 rgba (0,0,0,0,2); boksskygge: 0 2px 0 0 rgba (0,0,0,0,1), indsæt 0 -2px 0 0 rgba (0,0,0,0,2); baggrundsfarve: # 276195; baggrundsbilde: -moz-lineær gradient (# 3c88cc, # 276195); baggrundsbillede: -ms-lineær gradient (# 3c88cc, # 276195); baggrundsbillede: -webkit-gradient (lineær, venstre top, venstre bund, farve stop (0%, # 3c88cc), farve stop (100%, # 276195)); baggrundsbillede: -webkit-lineær-gradient (# 3c88cc, # 276195); baggrundsbillede: -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)"; baggrundsbilde: lineær gradient (# 3c88cc, # 276195); grænse: 0; markør: pointer; farve: #fff; tekst dekoration: ingen; tekst-align: center; skrifttypestørrelse: 16px; polstring: 0px 20px; højde: 40px; linjens højde: 40px; min bredde: 100px; tekstskygge: 0 1px 0 rgba (0,0,0,0,35); skrifttype-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), indsæt 0 -2px 0 0 rgba (0,0,0,0,3), indsats 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), indsæt 0 -2px 0 0 rgba (0,0,0,0,3), indsæt 0 12px 20px 2px # 3089d8; boksskygge: 0 2px 0 0 rgba (0,0,0,0,1), indsæt 0 -2px 0 0 rgba (0,0,0,0,3), indsæt 0 12px 20px 2px # 3089d8; .blu-btn: aktiv -webkit-boks-skygge: indsæt 0 2px 0 0 rgba (0,0,0,0,2), indsæt 0 12px 20px 6px rgba (0,0,0,0,2), indsæt 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: input 0 2px 0 0 rgba (0,0,0,0,2), indsats 0 12px 20px 6px rgba (0,0,0,0,2), indgang 0 0 2px 2px rgba (0,0, 0,0.3); box-skygge: indsats 0 2px 0 0 rgba (0,0,0,0,2), indsats 0 12px 20px 6px rgba (0,0,0,0,2), indgang 0 0 2px 2px rgba (0,0,0,0,3 ); .grn-btn display: inline-block; -moz-grænse-radius: .25em; grænse-radius: .25em; -webkit-boks-skygge: 0 2px 0 0 rgba (0,0,0,0,1), indsæt 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-skygge: 0 2px 0 0 rgba (0,0,0,0,1), indsæt 0 -2px 0 0 rgba (0,0,0,0,2); boksskygge: 0 2px 0 0 rgba (0,0,0,0,1), indsæt 0 -2px 0 0 rgba (0,0,0,0,2); baggrundsfarve: # 659324; baggrundsbillede: -moz-lineær gradient (# 81bc2e, # 659324); baggrundsbillede: -ms-lineær gradient (# 81bc2e, # 659324); baggrundsbillede: -webkit-gradient (lineær, venstre top, venstre bund, farve stop (0%, # 81bc2e), farve stop (100%, # 659324)); baggrundsbillede: -webkit-lineær-gradient (# 81bc2e, # 659324); baggrundsbillede: -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)"; baggrundsbilde: lineær gradient (# 81bc2e, # 659324); grænse: 0; markør: pointer; farve: #fff; tekst dekoration: ingen; tekst-align: center; skrifttypestørrelse: 16px; polstring: 0px 20px; højde: 40px; linjens højde: 40px; min bredde: 100px; tekstskygge: 0 1px 0 rgba (0,0,0,0,35); skrifttype-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: hover, .grn-btn: fokus -webkit-boks-skygge: 0 2px 0 0 rgba (0,0,0,0,1), indsæt 0 -2px 0 0 rgba (0,0,0 , 0,3), indgang 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), indsæt 0 -2px 0 0 rgba (0,0,0,0,3), indsæt 0 12px 20px 2px # 85ca26; boks-skygge: 0 2px 0 0 rgba (0,0,0,0,1), indsæt 0 -2px 0 0 rgba (0,0,0,0,3), indsats 0 12px 20px 2px # 85ca26; .grn-btn: aktiv -webkit-boks-skygge: indsæt 0 2px 0 0 rgba (0,0,0,0,2), indsæt 0 12px 20px 6px rgba (0,0,0,0,2), indsæt 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: input 0 2px 0 0 rgba (0,0,0,0,2), indsats 0 12px 20px 6px rgba (0,0,0,0,2), indgang 0 0 2px 2px rgba (0,0, 0,0.3); box-skygge: indsats 0 2px 0 0 rgba (0,0,0,0,2), indsats 0 12px 20px 6px rgba (0,0,0,0,2), indgang 0 0 2px 2px rgba (0,0,0,0,3 );
Jeg bruger fuld overgange i 200 millisekunder på hover og aktive knapstilstande. Hvad der er så godt med disse stilarter er, at du kan anvende dem på næsten ethvert klikbart element. Knapper, ankerforbindelser, formelementer eller noget andet du synes er passende - selvom disse stilarter skal bruges sparsomt for ikke at overbelaste dit design.
Knapper som disse gemmes ofte bedst på samme måde som Mozilla bruger dem. Vedhæft disse stilarter i din blog, hvor du har knapper til freebie-downloads eller noget lignende. Brugere elsker at interagere med unikke grænseflader og det betyder ofte en meget højere procentdel for din klikfrekvens.
- Demo
Afsluttende tanker
Jeg håber du kan tage nogle gode lektioner væk fra denne samling af bokskyggeteknikker. Der er mange forskellige områder, du kan fokusere på, herunder formularer, modalbokse, knapper, værktøjslinjer og endda komplette website layouts.
Du er velkommen til at gennemføre nogen af disse skyggeeffekter i dele af din egen hjemmeside. Der er mange andre teknikker derude, men denne samling er perfekt til både begyndere og avancerede udviklere. Også hvis du har nogle forslag eller spørgsmål om artiklen, kan du dele med os i kommentar diskussionsområdet nedenfor.
