10 loovtehnikat, kasutades CSS3 Box Shadow
Me oleme näinud tohutut arvu edusamme CSS3 veebiarenduses viimastel aastatel. Internetist populaarsed veebisaidid on hakanud sisaldama paljusid ainulaadseid stiile, nagu ümarad nurgad ja mobiilile reageerivad meedia päringud. Veelgi olulisem on see, et see on avanud ukse loominguliste liideste prototüüpimiseks mõne minuti pärast.
Selles artiklis tahan jagada 10 koodilõiget geniaalse CSS3 kasti varjundiga. Ma selgitan, kuidas kood toimib ja kuidas saab iga kasti varju oma veebisaidile rakendada.
Need stiilid on tingitud teiste populaarsete veebisaitide suurest disaini mõjust. See on suurepärane näide sellest, kuidas praegused veebiarendajad loovad veebidisaini tuleviku jaoks mõjusaid suundumusi.
1. Fikseeritud ülemine tööriistariba
Rumeenia sotsiaalmeedia teenus Trilulilu kasutab kogu veebisaidi ümber ujuva ülemise tööriistariba. Seda saab luua kiiresti, kasutades a asend: fikseeritud; mis tahes ülemise riba elemendi omadus. Kuid see lisakasti vari võtab efekti täiesti uuele tasemele.
#banner asukoht: fikseeritud; kõrgus: 60 px; laius: 100%; top: 0; vasakul: 0; border-top: 5px tahke # a1cb2f; taust: #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); kasti vari: 0 2px 3px 0px rgba (0, 0, 0, 0,16); z-indeks: 999999; #banner h1 joone kõrgus: 60 px;
Te märkate, et kasti-vari on tegelikult loodud suhteliselt lihtsa väärtuse kombinatsiooniga. Vari langeb kasti alla ja ähmastab 3px mõlemal küljel.
Me saame seda kasutada rgba () meetod, mille abil varju on kerge läbipaistmatus, nii et element ei ole liiga tume. See on peen lisamine, mis kindlasti hoiab teie külastaja tähelepanu.
- Demo
2. All-navigatsiooni langetamine
Siin on veel üks loovkasti varju meetod, mida rakendatakse skalaarse rippmenüü alammenüüsse. Sarnast efekti võib näha ka Ettevõtjal, kui liigute iga peamise peamise navigatsioonilinki üle. See on kindlasti keerulisem seadistada, kuid kannatlik.
#bar kuva: plokk; kõrgus: 45 px; taust: # 22385a; polster-top: 5px; margin-bottom: 150px; positsioon: suhteline; #bar ul marginaal: 0px 15px; font-pere: Candara, Calibri, Segoe UI, Segoe, Arial, sans-serif; #bar ul li background: # 22385a; kuva: plokk; fondi suurus: 1.2em; positsioon: suhteline; float: vasakule; #bar ul li a kuva: plokk; värv: # fffff7; rea kõrgus: 45 px; fondi kaal: rasvane; polsterdus: 0px 10px; teksti kaunistus: mitte; z-indeks: 9999; #bar ul li a: hover, #bar ul li a.selected color: # 365977; taust: #fff; ülemine vasakpoolne raadius: 3px; ülemine parempoolne raadius: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3x; #bar ul .subnav kuva: plokk; vasakule: 14tk; top: 48px; z-indeks: -1; laius: 500 px; positsioon: absoluutne; kõrgus: 90 px; piir: 1px tahke # edf0f3; border-top: 0; polsterdus: 10px 0 10px 10px; ülevool: peidetud; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-piiri-alt-vasak-raadius: 3px; -webkit-piiri-alt-parem raadius: 3px; piir-alumine-parem raadius: 3px; piir-alumine-parem raadius: 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); kasti vari: 0px 2px 7px rgba (0,0,0,0,25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (tugevus = 3, suund = 180, värv =" # 333333 ")"; filter: progid: DXImageTransform.Microsoft.Shadow (tugevus = 3, suund = 180, värv = "# 333333");
Nav linke saab kujundada värvi valimiseks, kui see on valitud või hiire hover. Samuti lisan linkidele ja rippmenüü kastile mõned ümarad piirid. See annab ilusama tunde, mitte kõva serva. Ma kasutan ka seda -ms-filter ja filter omadused, mis on ainult Internet Exploreri omandis.
Kui seadistate täieliku navigatsioonisüsteemi, saate näidiku seadistust muuta ja peita menüü pärast lehekülje laadimist. Seejärel saate mõne jQuery abil sihtida .hover () sündmust ja kuvada uuendatud sisuga alamväljariba.
- Demo
3. läikiv varjunupp
See on tõenäoliselt üks minu lemmikstiile, sest see on leheküljel dünaamiline. Kui te ei oska öelda, on see väike sinine nupp, mis asub YouTube'i avalehel pärast esimest sisselogimist.
blues color: #fff; laius: 190px; kõrgus: 35px; kursor: pointer; font-pere: Arial, Tahoma, sans-serif; fondi suurus: 1.0em; fondi kaal: rasvane; -moz-border-radius: 2px; -webkit-border-radius: 2px; raadius: 2px; piiri laius: 1px; äärevärv: # 0053a6 # 0053a6 # 000; taustavärv: # 6891e7; taustapilt: -moz-linear-gradient (ülemine, # 4495e7 0, # 0053a6 100%); taustapilt: -ms-lineaarne gradient (ülemine, # 4495e7 0, # 0053a6 100%); taustapilt: -o-lineaarne gradient (ülemine, # 4495e7 0, # 0053a6 100%); taustapilt: -webkit-gradient (lineaarne, vasakul üleval, vasakul, värvipeatus (0, # 4495e7), värvipeatus (100%, # 0053a6)); taustapilt: -webkit-lineaarne gradient (ülemine, # 4495e7 0, # 0053a6 100%); taustapilt: lineaarne gradient (alumisse, # 4495e7 0, # 0053a6 100%); teksti vari: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: sisend 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: sisend 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: sisend 0 1px 0 rgba (256, 256, 256, .35); box-shadow: sisend 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-vari: sisend 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0,25); -ms-box-shadow: sisend 0 1px 0 rgba (256, 256, 256, 0,55), 1 px 1px 3px rgba (0, 0, 0,25); -webkit-box-shadow: sisend 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0,25); box-shadow: sisend 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); taustapilt: -moz-linear-gradient (ülemine, # 3a8cdf 0, # 0053a6 100%); taustapilt: -ms-lineaarne gradient (ülemine, # 3a8cdf 0, # 0053a6 100%); taustapilt: -o-lineaarne gradient (ülemine, # 3a8cdf 0, # 0053a6 100%); taustapilt: -webkit-gradient (lineaarne, vasakul üleval, vasakul, värvipeatus (0, # 3a8cdf), värvipeatus (100%, # 0053a6)); taustapilt: -webkit-lineaarne gradient (ülemine, # 3a8cdf 0, # 0053a6 100%); taustapilt: lineaarne gradient (alumisse, # 3a8cdf 0, # 0053a6 100%); .blues: aktiivne border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: sisend 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-shadow: sisend 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-box-shadow: sisend 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; box-shadow: sisend 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); taustapilt: -moz-linear-gradient (ülemine, # 005ab4 0, # 175ea6 100%); taustapilt: -ms-lineaarne gradient (ülemine, # 005ab4 0, # 175ea6 100%); taustapilt: -o-lineaarne gradient (ülemine, # 005ab4 0, # 175ea6 100%); taustapilt: -webkit-gradient (lineaarne, vasakpoolne ülemine, vasakpoolne, värvipeatus (0, # 005ab4), värvipeatus (100%, # 175ea6)); taustapilt: -webkit-lineaarne gradient (ülemine, # 005ab4 0, # 175ea6 100%); taustapilt: lineaarne gradient (alumisse, # 005ab4 0, # 175ea6 100%);
Kogu nupu kood on palju vaadata, kuid me püüame toetada võimalikult palju brausereid. MS Internet Explorer 7+ jaoks on olemas teksti varjud ja kasti varjud. Samuti seadistame taustapilt CSS3 gradiendiga kinnisvara paljude tarnija spetsiifiliste eesliidete üle.
Aga kui sa armastad seda disaini stiili, siis hover ja aktiivsed riigid püüavad ka teie tähelepanu. Oleme põhiliselt värskendamas piiri, et lisada alla mõned varjud, samal ajal värskendades tausta gradienti, et näidata veidi tumedamat.
Kuna nupul puuduvad pildid, saate värskendada hex-väärtusi ja morph seda, et see sobituks praktiliselt igasse värviskeemi.
- Demo
4. Teated Flyout Menu
Ma ei ole Facebooki suur kasutaja, kuid ma olen märganud, et mõned UI tehnikad on ümber kujundatud. Seda lendamismenüüd saab võrrelda oma koduleheküljel leiduvate teadete või sõbrakutsetega.
.lennuväli laius: 310 px; margin-top: 10px; fondi suurus: 11px; positsioon: suhteline; font-pere: „Lucida Grande”, Tahoma, Verdana, Arial, sans-serif; taustavärv: valge; polsterdus: 9px 11px; taust: rgba (255, 255, 255, 0,9); piir: 1px tahke # 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-border-radius: 3px; raadius: 3x; .flyout #tip background-image: url ('images / tip.png'); taustaproov: korduv; tausta suurus: auto; kõrgus: 11 px; positsioon: absoluutne; top: -11px; vasakule: 25px; laius: 20 px; .flyout h2 text-transform: suurtähted; värv: # 666; fondi suurus: 1.2em; polsterdatud: 5px; margin-bottom: 12px; alumine serv: 1tx tahke #dcdbda; .flyout p padding-bottom: 25px; fondi suurus: 1.1em; värv: # 222; Siin ei kuvata terve hulga uusi meeleharjumiskoode. Ma kasutan väikest .otsa klassi sisemise võrdluselemendiga, et lisada tööriista kolmnurk. On võimalik luua puhta CSS3 kolmnurga, kuid see meetod ei ole lihtne, nagu te võite ette kujutada. Kui eelistate seda meetodit, võib olla mõtet midagi kokku panna. Kuid CSS3 rotatsiooni omadusi ei toetata kõikjal; vahepeal ei vaja pilte tagastamismeetodit.
- Demo
5. Apple'i lehe ümbris
Apple'i ametlikul veebilehel on nii palju muljetavaldavaid CSS3 kasti varje. Allolev näide on väike kast, millel on mõned veergu. Apple'i paigutuse vaatamisel märkate paljusid nende lehekülgi, mis koosnevad paljudest pakendikastidest.
.applewrap laius: 100%; kuva: plokk; kõrgus: 150 px; taust: valge; piir: 1px tahke; äärevärv: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-radius: 4px; raadius: 4x; -webkit-box-shadow: rgba (0, 0, 0, 0,3) 0 1px 3px; -moz-box-shadow: rgba (0,0,0,0.3) 0 1px 3px; kast-vari: rgba (0, 0, 0, 0,3) 0 1px 3px; .applewrap .col float: vasakul; kastide suurus: piirikast; laius: 250 px; kõrgus: 150 px; polster: 16px 7px 6px 22px; font: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; värv: # 343434; paremal: 1tx tahke #dadada;
Sarnase lehekülje võib jagada erineva laiuse ja kõrgusega sisukastide kaupa. Kuigi see demo on paigutatud paar veergu, ei ole see mingil viisil vajalik vormindustehnika. Kasti vari sobib kõige paremini valge / hall taustal. Aga ma arvan, et mis tahes valguse värvi kuvamine näib päris hea.
- Demo
6. Apple'i sisu kast
Seda teist sisustekasti Apple'i veebisaidil kasutatakse peamiselt veergude kujundamiseks. Need on peamiselt lehe allosas, kus esitatakse tehinguid ja muud sellega seotud teavet. See on täiesti teistsugune disaini stiil, kus kasti vari kuvatakse ülevalt alla.
.applebox laius: auto; kõrgus: 85x; kastide suurus: piirikast; taust: # f5f5f5; polsterdus: 20px 20px 10px; varu: 10px 0 20 px; piir: 1px tahke #ccc; raadius: 4x; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-raadius: 4px; -webkit-box-shadow: sisend 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: sisend 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: sisend 0px 1px 1px rgba (0, 0, 0, .3); .applebox .col laius: 140px; float: vasakule; varu: 0 0 30 px;
Ma ei usu, et see kood peaks olema liiga raske järgida ja kopeerida teisele div-konteinerile. Ainus, mida me rakendame, kasutab sisetükk rgba alfa-läbipaistvate värvikoodidega. Niisiis, kuigi meil on varju varju puhas must, kuvame ainult umbes 30% läbipaistmatust.
- Demo
7. Soovitatavad lingid
See on ilmselt minu lemmikkasti varju stiil Apple'i praegusel veebilehel. ICloud lehel peaksite leidma selle tehnika reaalajas demo-stiili koos mitme ujuva lingi kastiga.
.applefeature kõrgus: 150 px; varu: 8x; vertikaalne joondus: ülemine; kuva: inline-block; .applefeature a kuva: plokk; laius: 168px; kõrgus: 140 px; piir: 1px tahke #ccc; värv: # 333; teksti kaunistus: mitte; fondi kaal: rasvane; rea kõrgus: 1.3em; taust: # f7f7f7; -webkit-box-shadow: sisend 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: sisend 0 1px 2px rgba (0, 0, 0, .3); box-shadow: sisend 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; raadius: 4x; .applefeature a: hover background: #fafafa; taust: -webkit-gradient (lineaarne, 0% 0%, 0% 100%, alates (#fff) kuni (# f7f7f7)); taust: -moz-lineaarne gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: sisend 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: sisend 0 1px 2px rgba (0,0,0, .3); box-shadow: sisend 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; raadius: 4x; .applefeature a img kuva: plokk; marginaal: 26px auto 4px; .applefeature a h4 kuva: plokk; laius: 160 px; fondi suurus: 1.3em; font-pere: Arial, Tahoma, sans-serif; värv: # 646464; teksti joondamine: keskus;
Need lingid on seatud fikseeritud laiusele ja sisaldavad eraldi ikooni ja teksti. Apple'i näide kasutab sarnast kasti varju, nagu nägime eelmises sisendkastis. Kuid kogu kasti saab nüüd linkina aktiveerida mis hõlmab nii :hõljuma ja : aktiivne riikides. Sellel lingikastil on palju paindlikkust ja te peaksite proovima mängida lähtekoodi abil.
Kõrgust / laiust on võimalik lühendada ja luua palju väiksemate linkide loend. Need võivad olla artiklites peatükkide või lehekülgede kogum või te saate teha alammenüü linkide ikoonidega. See on ausalt suur hulk uuemaid CSS3 tehnikaid, mis näitavad, kui palju energiat teil on veebidisainerina.
- Demo
8. Raamitud pildid
Ma olen selle näite peale lisanud halli tausta, et saaksite kasti varju stiile selgemalt näha. See kast sarnaneb Wordpress.comi eelvaatlusega, välja arvatud juhul, kui olen lisanud algkoodi veidi rohkem.
.wpframe background: #fff; raadius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; polsterdus: 8x; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; box-shadow: 1tk 2px 1px # d1d1d1;
Kuna piltidele antakse mõlemal küljel väike polster, kuvatakse see raam suurena valge servana. Pildi taustavärvi saab alati värskendada või lisada isegi väikese välispiiri. Kuid seda üsna lihtsustatud stiilide komplekti saab manööverdada erinevatesse kasti vari tehnikatesse. Mängi koodiga ja vaata, kuidas saate oma veebisaidil pildikujundusi parandada.
- Demo
9. Hõõguv sisendväljad
Ma sain selle idee pärast seda, kui külastasin paar korda Pinteresti sisselogimislehte. Nende animeeritud stiilid näitavad tõepoolest mõningaid väljapaistvaid näiteid mitmest sisemisest kasti varjestusest, nii väljaspool kui ka siseküljel.
.formwrap display: block; margin-bottom: 15px; .formwrap label display: inline-block; laius: 80 px; fondi suurus: 11px; fondi kaal: rasvane; värv: # 444; font-pere: Arial, Tahoma, sans-serif; .formwrap .shadowfield asukoht: suhteline; laius: 250 px; fondi suurus: 17px; font-pere: "Helvetica Neue", Arial, sans-serif; fondi kaal: normaalne; taust: # f7f8f8; värv: # 7c7c7c; rea kõrgus: 1,4; polsterdus: 6px 12px; ülevaade: mitte; üleminek: kõik 0,2-ndad lihtsustavad 0-d; -webkit-üleminek: kõik 0.2-ndad lihtsuse-out-0-d; -moz-üleminek: kõik 0.2-ndad lihtsuse-out-0-d; piir: 1px tahke # ad9c9c; raadius: 6px 6px 6px 6px; kast-vari: 0 1px rgba (34, 25, 25, 0,2) sisend, 0 1px #fff; .formwrap .shadowfield: focus border-color: # 930; taust: #fff; värv: # 5d5d5d; kast-vari: sisend 0 lpx rgba (34, 25, 25, 0,2), 0 1 px rgba (255, 255, 255, 0,6), 0 7px rgba (235, 82, 82, 0,5); -moz-box-vari: sisend 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: sisend 0 1px rgba (34, 25, 25, 0,2), 0pp rgba (255, 255, 255, 0,6), 0 7px rgba (235, 82, 82, 0,5);
Kuigi esialgsed stiilid on väga atraktiivsed, viitan ma sellele üleminekuefektid, kui keskendute igale sisendväljale. Te saate nende vahel vahekaardil vahele jätta ja näha paljude omaduste vahetut vahet. Välise hõõguva kasti vari rakendatakse koos värskendatud sisetoodetega. Ka teksti värv muutub heledamaks, kui olete keskendunud konkreetsele sisendile, seejärel kaob, kui te fookustate.
Isegi nende efektide kopeerimine parandaks oluliselt teie vormiväljade kasutajate kogemusi. Veenduge, et te ei liiguks liiga kaugele, kuni teie vormid on vaevalt kasutatavad. Kuid enamik külastajaid naudib meeldivat esteetilist efekti, mis soodustavad ka suhtlemist ja edasist osalemist teie veebisaidiga.
- Demo
10. Elastsed varju nupud
Need unikaalsed varjunupud on kujundatud aeglase üleminekuga hoveri ja aktiivsete olekute ajal. Sarnaseid näiteid saab leida Mozilla kodulehelt nende suure suurusega “Laadi alla Firefox” nuppu. Mõned kast-vari Omadused ühendavad tegelikult kolm erinevat varju üheks käsuks.
.blu-btn display: inline-block; -moz-border-radius: .25em; raadius: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), sisend 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), sisend 0 -2px 0 0 rgba (0,0,0,0.2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), sisetähis 0 -2px 0 0 rgba (0,0,0,0.2); taustavärv: # 276195; taustapilt: -moz-linear-gradient (# 3c88cc, # 276195); taustapilt: -ms-lineaarne gradient (# 3c88cc, # 276195); taustapilt: -webkit-gradient (lineaarne, vasakul üleval, vasakul, värvipeatus (0%, # 3c88cc), värvipeatus (100%, # 276195)); taustapilt: -webkit-lineaarne gradient (# 3c88cc, # 276195); taustapilt: -o-lineaarne 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)"; taustapilt: lineaarne gradient (# 3c88cc, # 276195); piir: 0; kursor: pointer; värv: #fff; teksti kaunistus: mitte; teksti joondamine: keskus; fondi suurus: 16px; polsterdus: 0px 20px; kõrgus: 40px; rea kõrgus: 40 pikslit; min-laius: 100 px; teksti-vari: 0 1px 0 rgba (0,0,0,0,35); font-pere: Arial, Tahoma, sans-serif; -webkit-üleminek: kõik lineaarsed .2s; -moz-üleminek: kõik lineaarsed .2s; -o-üleminek: kõik lineaarsed .2s; -ms-üleminek: kõik lineaarsed .2s; üleminek: kõik lineaarsed .2s .blu-btn: hover, .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), sisend 0 -2px 0 0 rgba (0,0,0,0,3), sisend 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), sisetähis 0 -2px 0 0 rgba (0,0,0,0.3), sisend 0 12px 20px 2px # 3089d8; box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), sisetähis 0 -2px 0 0 rgba (0,0,0,0.3), sisetähis 0 12px 20px 2px # 3089d8; .blu-btn: aktiivne -webkit-box-shadow: sisend 0 2px 0 0 rgba (0,0,0,0.2), sisetähis 0 12px 20px 6px rgba (0,0,0,0.2), sisetähis 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: sisetähis 0 2px 0 0 rgba (0,0,0,0.2), sisetähis 0 12px 20px 6px rgba (0,0,0,0.2), sisetähis 0 0 2px 2px rgba (0,0, 0,0.3); karp-vari: sisetald 0 2px 0 0 rgba (0,0,0,0.2), sisend 0 12px 20px 6px rgba (0,0,0,0.2), sisetähis 0 0 2px 2px rgba (0,0,0,0,3 ); .grn-btn display: inline-block; -moz-border-radius: .25em; raadius: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), sisend 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), sisend 0 -2px 0 0 rgba (0,0,0,0.2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), sisetähis 0 -2px 0 0 rgba (0,0,0,0.2); taustavärv: # 659324; taustapilt: -moz-linear-gradient (# 81bc2e, # 659324); taustapilt: -ms-line-gradient (# 81bc2e, # 659324); taustapilt: -webkit-gradient (lineaarne, vasakul üleval, vasakul, värvipeatus (0%, # 81bc2e), värvipeatus (100%, # 659324)); taustapilt: -webkit-lineaarne gradient (# 81bc2e, # 659324); taustapilt: -o-lineaarne 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)"; taustapilt: lineaarne gradient (# 81bc2e, # 659324); piir: 0; kursor: pointer; värv: #fff; teksti kaunistus: mitte; teksti joondamine: keskus; fondi suurus: 16px; polsterdus: 0px 20px; kõrgus: 40px; rea kõrgus: 40 pikslit; min-laius: 100 px; teksti-vari: 0 1px 0 rgba (0,0,0,0,35); font-pere: Arial, Tahoma, sans-serif; -webkit-üleminek: kõik lineaarsed .2s; -moz-üleminek: kõik lineaarsed .2s; -o-üleminek: kõik lineaarsed .2s; -ms-üleminek: kõik lineaarsed .2s; üleminek: kõik lineaarsed .2s; .grn-btn: hover, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), sisend 0 -2px 0 0 rgba (0,0,0 , 0,3), sisestus 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), sisetähis 0 -2px 0 0 rgba (0,0,0,0.3), sisend 0 12px 20px 2px # 85ca26; karp-vari: 0 2px 0 0 rgba (0,0,0,0.1), sisetähis 0 -2px 0 0 rgba (0,0,0,0.3), sisend 0 12px 20px 2px # 85ca26; .grn-btn: aktiivne -webkit-box-shadow: sisend 0 2px 0 0 rgba (0,0,0,0.2), sisend 0 12px 20px 6px rgba (0,0,0,0.2), sisetähis 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: sisetähis 0 2px 0 0 rgba (0,0,0,0.2), sisetähis 0 12px 20px 6px rgba (0,0,0,0.2), sisetähis 0 0 2px 2px rgba (0,0, 0,0.3); karp-vari: sisetald 0 2px 0 0 rgba (0,0,0,0.2), sisend 0 12px 20px 6px rgba (0,0,0,0.2), sisetähis 0 0 2px 2px rgba (0,0,0,0,3 );
Ma kasutan 200 millisekundi vältel täielikke üleminekuid hover- ja aktiivsete nuppude olekutes. Nende stiilide puhul on nii suur, et saate neid peaaegu igale klõpsatavale elemendile rakendada. Nupud, ankurlingid, vormielemendid või midagi muud, mida arvate, on asjakohane - kuigi neid stiile tuleks kasutada hõredalt, et mitte kujundust üle koormata.
Sellised nupud salvestatakse sageli kõige paremini samamoodi, nagu Mozilla neid kasutab. Lisage need stiilid oma blogisse, kus teil on vabakäe allalaadimise nupud või midagi sarnast. Kasutajad armastavad suhelda ainulaadsete liidestega ja see tähendab sageli suuremat protsenti teie läbiklõpsamissageduse kohta.
- Demo
Lõplikud mõtted
Loodan, et sa saad selle kastide vari tehnikate kogumist mõned suured õppetunnid ära võtta. Seal on palju erinevaid valdkondi, millele võiksid keskenduda vormide, modaalkastide, nuppude, tööriistaribade ja isegi täieliku veebilehe paigutuse lisamisele.
Julgelt rakendage mõnda neist varjulistest efektidest oma veebisaidi osadeks. Seal on palju muid tehnikaid, kuid see kollektsioon on ideaalne nii algajatele kui ka arenenud arendajatele. Samuti, kui teil on ettepanekuid või küsimusi selle artikli kohta, mida saate meiega jagada allpool olevas kommentaaride arutelu valdkonnas.
