10 kūrybinių metodų, naudojant CSS3 Box Shadow

Per pastaruosius kelerius metus matėme didžiulį pažangą CSS3 interneto svetainių kūrime. Populiariose interneto svetainėse pradėta daugybė unikalių stilių, pvz., Suapvalinti kampai ir mobiliosios žiniasklaidos užklausos. Bet dar svarbiau, kad tai atvėrė duris, kad kūrybinės sąsajos būtų prototipuojamos per kelias minutes.

Šiame straipsnyje noriu pasidalinti 10 kodų fragmentų, susijusių su puikiais CSS3 dėžutės šešėliniais dizainais. Aš paaiškinsiu, kaip veikia kodas ir kaip galite įgyvendinti kiekvieną langelio šešėlį į savo svetainę.

Šie stiliai yra priskirti kitoms populiarioms svetainėms. Tai puikus pavyzdys, kaip dabartiniai žiniatinklio kūrėjai kuria žinias apie interneto dizaino ateities tendencijas.

1. Ištaisyta viršutinė įrankių juosta

Rumunijos socialinės žiniasklaidos paslauga „Trilulilu“ naudoja visą slankiąją viršutinę įrankių juostą. Tai galima greitai sukurti naudojant a padėtis: fiksuota; nuosavybė bet kuriame viršutiniame juostoje. Tačiau šis papildomas langelio šešėlis veikia visiškai nauju lygiu.

#banner pozicija: fiksuota; aukštis: 60px; plotis: 100%; viršuje: 0; kairėje: 0; border-top: 5px kietas # a1cb2f; fonas: #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); dėžutės šešėlis: 0 2px 3px 0px rgba (0, 0, 0, 0,16); z-indeksas: 999999;  #banner h1 linijos aukštis: 60px;

Pastebėsite, kad dėžutės šešėlis yra faktiškai sukurtas su gana paprastu vertės deriniu. Šešėlis nukris žemiau dėžutės, o iš abiejų pusių - 3px.

Mes galime naudoti rgba () metodas, skirtas nedideliam skaidrumui pritaikyti ant šešėlio, todėl elementas neatrodo per tamsus. Tai subtilus papildymas, kuris tikrai užfiksuos jūsų lankytojo dėmesį.

Demo

2. Žemutinė navigacija

Čia yra dar vienas kūrybos langelio šešėlinis metodas, pritaikytas išskleidžiamam skalaro meniu. Panašus efektas gali būti pastebimas ir verslininkui, kai jūs judate virš visų pagrindinių navigacijos nuorodų. Tai tikrai šiek tiek sudėtinga konfigūruoti, bet verta kantrybės.

#bar ekranas: blokas; aukštis: 45px; fonas: # 22385a; apmušalas: 5px; paraštės apačia: 150px; pozicija: santykinis;  #bar ul margin: 0px 15px; šrifto šeima: Candara, Calibri, „Segoe UI“, Segoe, Arial, sans-serif;  #bar ul li fonas: # 22385a; ekranas: blokas; šrifto dydis: 1.2em; pozicija: santykinis; plūdė: kairė;  #bar ul li a ekranas: blokas; spalva: # fffff7; linijos aukštis: 45px; šrifto svoris: paryškintas; paminkštinimas: 0px 10px; teksto apdaila: nėra; z-indeksas: 9999;  #bar ul li a: hover, #bar ul li a.selected color: # 365977; fonas: #fff; pasienio viršutinis kairysis spindulys: 3px; viršutinis dešinysis spindulys: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px;  #bar ul .subnav ekranas: blokas; kairėje: 14px; viršuje: 48px; z-indeksas: -1; plotis: 500 px; pozicija: absoliutus; aukštis: 90px; siena: 1px kietas # edf0f3; pasienio viršus: 0; paminkštinimas: 10px 0 10px 10px; perteklius paslėptas; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-pasienio apačioje kairysis spindulys: 3px; -webkit-riba-apačioje dešinysis spindulys: 3px; apatinis dešinysis spindulys: 3px; apatinis dešinysis spindulys: 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); dėžutės šešėlis: 0px 2px 7px rgba (0,0,0,0,25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (jėga = 3, kryptis = 180, spalva =" # 333333 ")"; filtras: progid: DXImageTransform.Microsoft.Shadow (stiprumas = 3, kryptis = 180, spalva = "# 333333");

Navigacijos nuorodos gali būti sukurtos, kad pasirinktinai būtų pakeistos spalvos arba pelės judėjimas. Aš taip pat pridedu keletą apvalių sienų ant nuorodų ir virš meniu. Tai suteikia gražesniam jausmui, o ne kietiems kraštams. Aš taip pat gerai išnaudoju -ms-filter ir filtras savybės, kurios priklauso tik „Internet Explorer“.

Jei nustatysite pilną navigacijos sistemą, galėsite pakeisti ekraną be jokio ir paslėpti meniu, kai puslapis įkeliamas. Tada naudodami kai kuriuos jQuery galite nukreipti .hover () įvykį ir rodyti subnav juostą su atnaujintu turiniu.

Demo

3. Blizgus šešėlis mygtukas

Tai galbūt yra vienas iš mano mėgstamiausių stilių, nes tai yra dinamiška. Jei negalite pasakyti, tai yra mažas mėlynas mygtukas, rodomas „YouTube“ pagrindiniame puslapyje po pirmojo prisijungimo.

blues color: #fff; plotis: 190px; aukštis: 35px; žymeklis: žymeklis; šrifto šeima: Arial, Tahoma, sans-serif; šrifto dydis: 1.0em; šrifto svoris: paryškintas; -moz-border-spindulys: 2px; -webkit-border-radius: 2px; pasienio spindulys: 2px; sienos plotis: 1px; sienų spalva: # 0053a6 # 0053a6 # 000; fono spalva: # 6891e7; fono vaizdas: -moz-linijinis gradientas (viršuje, # 4495e7 0, # 0053a6 100%); fono vaizdas: -ms-linijinis gradientas (viršuje, # 4495e7 0, # 0053a6 100%); fono vaizdas: -o-linijinis gradientas (viršuje, # 4495e7 0, # 0053a6 100%); fono vaizdas: -webkit-gradientas (tiesinis, kairysis viršuje, kairėje apačioje, spalvų sustojimas (0, # 4495e7), spalvų sustojimas (100%, # 0053a6)); fono vaizdas: -webkit-linijinis gradientas (viršuje, # 4495e7 0, # 0053a6 100%); fono vaizdas: tiesinis gradientas (iki apačios, # 4495e7 0, # 0053a6 100%); teksto šešėlis: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: įterpti 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: įterpti 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: įterpti 0 1px 0 rgba (256, 256, 256, .35); dėžutės šešėlis: įterpimas 0 1px 0 rgba (256, 256, 256, .35); filtras: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: hover border-color: # 002d59 # 002d59 # 000; -moz-box-shadow: įdėjimas 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0,25); -ms-box-shadow: įdėjimas 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0,25); -webkit-box-shadow: įdėjimas 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0,25); dėžutės šešėlis: įdėjimas 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 25); filtras: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); fono vaizdas: -moz-linijinis gradientas (viršutinis, # 3a8cdf 0, # 0053a6 100%); fono vaizdas: -ms-linijinis gradientas (viršuje, # 3a8cdf 0, # 0053a6 100%); fono vaizdas: -o-linijinis gradientas (viršuje, # 3a8cdf 0, # 0053a6 100%); fono vaizdas: -webkit-gradientas (tiesinis, kairysis viršuje, kairėje apačioje, spalvų sustojimas (0, # 3a8cdf), spalvų stabdymas (100%, # 0053a6)); fono vaizdas: -webkit-linijinis gradientas (viršuje, # 3a8cdf 0, # 0053a6 100%); fono vaizdas: tiesinis gradientas (iki apačios, # 3a8cdf 0, # 0053a6 100%);  .blues: active border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: įdėklas 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #ff; -ms-box-shadow: įdėklas 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #ff; -webkit-box-shadow: įdėjimas 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #ff; dėžutės šešėlis: įdėklas 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #ff; filtras: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); fono vaizdas: -moz-linijinis gradientas (viršuje, # 005ab4 0, # 175ea6 100%); fono vaizdas: -ms-linijinis gradientas (viršuje, # 005ab4 0, # 175ea6 100%); fono vaizdas: -o-linijinis gradientas (viršutinis, # 005ab4 0, # 175ea6 100%); fono paveikslėlis: -webkit-gradientas (linijinis, kairysis viršuje, kairėje apačioje, spalvų sustojimas (0, # 005ab4), spalvų sustojimas (100%, # 175ea6)); fono vaizdas: -webkit-linijinis gradientas (viršuje, # 005ab4 0, # 175ea6 100%); fono vaizdas: tiesinis gradientas (iki apačios, # 005ab4 0, # 175ea6 100%);

Visas mygtuko kodas yra daug pažvelgti, bet mes bandome palaikyti kuo daugiau naršyklių. Yra teksto šešėliai ir dėžutės šešėliai su papildoma pagalba „MS Internet Explorer 7+“. Taip pat nustatome fono vaizdas nuosavybė su CSS3 gradientais per daugelį konkrečių tiekėjo specifinių prefiksų.

Bet jei jums patinka šis dizaino stilius, tada pakyla ir aktyvios valstybės taip pat sužadins jūsų dėmesį. Mes iš esmės atnaujiname sieną, kad įtrauktumėte tam tikrus šešėlius, kai paspaudžiate, o atnaujindami fono gradientą, kad būtų rodomas šiek tiek tamsesnis.

Kadangi ant mygtuko nėra jokių vaizdų, galite atnaujinti šešioliktaines reikšmes ir priderinti jas prie praktiškai bet kokios spalvų schemos.

Demo

4. Pranešimai „Flyout“ meniu

Aš nesu didelis „Facebook“ vartotojas, tačiau pastebėjau, kad kai kurie UI metodai yra perprojektuoti. Šį „flyout“ meniu galima palyginti su pranešimais ar draugo užklausomis, esančiomis pagrindiniame puslapyje.

.„flyout“ plotis: 310px; margin-top: 10px; šrifto dydis: 11px; pozicija: santykinis; šriftų šeima: „Lucida Grande“, Tahoma, Verdana, Arial, sans-serif; fono spalva: balta; pamušalas: 9px 11px; fonas: rgba (255, 255, 255, 0,9); siena: 1px kietas # c5c5c5; -webkit-box-shadow: 0 3px 8px rgba (0, 0, 0, 25); -moz-box-shadow: 0 3px 8px rgba (0, 0, 0, 25); dėžutės šešėlis: 0 3px 8px rgba (0, 0, 0, 25); -webkit-border-spindulys: 3px; -moz-border-spindulys: 3px; pasienio spindulys: 3px;  .flyout #tip background-image: url ('images / tip.png'); fono kartojimas: ne kartoti; fono dydis: auto; aukštis: 11px; pozicija: absoliutus; viršuje: -11px; kairėje: 25px; plotis: 20px;  .flyout h2 text-transform: didžiosios; spalva: # 666; šrifto dydis: 1.2em; apačia: 5px; paraštės apačia: 12px; apačioje: 1px kietas #dcdbda;  .flyout p padding-bottom: 25px; šrifto dydis: 1.1em; spalva: # 222;

Čia nėra daug naujo proto lenkimo kodo. Aš naudoju mažą .patarimas klasė su vidiniu span elementu, kad pridėtumėte įrankio taško trikampį. Galima sukurti grynus CSS3 trikampius, tačiau šis metodas nėra lengvas, kaip galite įsivaizduoti. Jei pageidaujate, kad šis metodas būtų naudingas, verta kažką kartu įsilaužti. Tačiau CSS3 rotacijos savybės visur nepalaikomos; tuo tarpu atvaizdams nereikia jokio atsarginio metodo.

Demo

5. „Apple Page Wrapper“

„Apple“ oficialioje svetainėje rasite tiek daug įspūdingų „CSS3“ langelių šešėlių. Šis pavyzdys yra mažas dėžutės konteineris su keliais stulpeliais. Pažvelgus į „Apple“ išdėstymą, pastebėsite daugelį jų puslapių, kuriuos sudaro daugybė pakuotės dėžių.

.obuolių pakuotė plotis: 100%; ekranas: blokas; aukštis: 150px; fonas: baltas; siena: 1px kietas; sienos spalva: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-spindulys: 4px; pasienio spindulys: 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; dėžutės šešėlis: rgba (0, 0, 0, 0,3) 0 1px 3px;  .applewrap .col float: kairėje; dėžutės dydžio: rėmelis; plotis: 250px; aukštis: 150px; pagalvėlė: 16px 7px 6px 22px; šriftas: 12px / 18px „Lucida Grande“, „Lucida Sans Unicode“, Helvetica, Arial, Verdana, sans-serifas; spalva: # 343434; dešinėje: 1px kietas #dadada;

Galite sujungti panašų puslapį, suskirstytą pagal turinio dėžutes, kurių plotis ir aukštis yra skirtingi. Nors į šią demonstraciją įtraukiau keletą stulpelių, tai jokiu būdu nėra būtina formatavimo technika. Dėžutės šešėlis geriausiai tinka balta / pilka fone. Bet manau, kad bet kokios šviesos spalvos rodymas būtų gana geras.

Demo

6. „Apple Content Box“

Šis kitas „Apple“ svetainės turinio langelis dažniausiai naudojamas stulpelių dizainui. Tai pirmiausia yra puslapio apačioje, kurioje pateikiami pasiūlymai ir kita susijusi informacija. Tai visiškai kitoks dizaino stilius, o langelio šešėlis rodomas viduje iš viršaus į apačią.

.applebox plotis: auto; aukštis: 85px; dėžutės dydžio: rėmelis; fonas: # f5f5f5; pagalvėlė: 20px 20px 10px; paraštė: 10px 0 20px; siena: 1px kietas #ccc; pasienio spindulys: 4px; -webkit-border-radius: 4px; -moz-border-spindulys: 4px; -o-pasienio spindulys: 4px; -webkit-box-shadow: įdėklas 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: įdėklas 0px 1px 1px rgba (0, 0, 0, .3); dėžutės šešėlis: įdėklas 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col plotis: 140px; plūdė: kairė; paraštė: 0 0 0 30px;

Nemanau, kad šis kodas turėtų būti pernelyg sunku sekti ir nukopijuoti į kitą „div“ konteinerį. Naudojame tik vienintelę dėžutės šešėlį įdėklas su rgba alfa skaidriais spalvų kodais. Taigi, nors mes turime švaraus juodo atspalvį, rodome tik apie 30% neskaidrumo.

Demo

7. Teminės nuorodos

Tikriausiai tai yra mano mėgstamiausia „Apple“ interneto svetainės šešėlio stilius. „ICloud“ puslapyje turėtumėte rasti šio metodo tiesioginį demo stilių su keliais plaukiojančių nuorodų langeliais.

.applefeature aukštis: 150px; skirtumas: 8px; vertikaliai lygiuoti: viršuje; ekranas: inline-block;  .applefeature a display: block; plotis: 168px; aukštis: 140px; siena: 1px kietas #ccc; spalva: # 333; teksto apdaila: nėra; šrifto svoris: paryškintas; linijos aukštis: 1.3em; fonas: # f7f7f7; -webkit-box-shadow: įterpimas 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: įdėjimas 0 1px 2px rgba (0, 0, 0, .3); dėžutės šešėlis: įterpimas 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-spindulys: 4px; pasienio spindulys: 4px;  .applefeature a: hover background: #fafafa; fonas: -webkit-gradientas (tiesinis, 0% 0%, 0% 100%, nuo (#fff) iki (# f7f7f7)); fonas: -moz-linijinis gradientas (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: įdėjimas 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: įdėjimas 0 1px 2px rgba (0,0,0, .3); box-shadow: įdėklas 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-border-spindulys: 4px; pasienio spindulys: 4px;  .applefeature a img display: block; paraštė: 26px auto 4px;  .applefeature a h4 ekranas: blokas; plotis: 160px; šrifto dydis: 1.3em; šrifto šeima: Arial, Tahoma, sans-serif; spalva: # 646464; teksto derinimas: centras;

Šios rodomos nuorodos nustatomos į fiksuotą plotį ir pateikiamos atskiros piktogramos ir rodomas tekstas. „Apple“ pavyzdyje naudojamas panašus langelio šešėlis, kaip matėme ankstesniame turinio laukelyje. Tačiau dabar visas langas gali būti suaktyvintas kaip nuoroda kuris apima ir : Pakimba ir : aktyvus narių. Šiame saitų lauke yra daug lankstumo, ir turėtumėte pabandyti žaisti su šaltinio kodu.

Galima sutrumpinti aukštį / plotį ir sukurti daug mažesnį nuorodų sąrašą. Tai gali būti straipsnių rinkinys arba straipsnių rinkinys, arba galite susieti submeniu su nuorodų piktogramomis. Tai sąžiningai puikus naujesnių CSS3 metodų rinkinys, rodantis, kiek galios turite kaip interneto dizaineris.

Demo

8. Rėmeliai

Prie šio pavyzdžio pridėjau pilką foną, kad būtų galima aiškiai matyti langelio šešėlių stilius. Šis langas yra panašus į rodomus „WordPress.com“ peržiūros vaizdus, išskyrus tai, kad pridėjau šiek tiek daugiau šaltinio kodo.

.wpframe background: #fff; pasienio spindulys: 2px; -webkit-border-radius: 2px; -moz-border-spindulys: 2px; įdėklas: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; dėžutės šešėlis: 1px 2px 1px # d1d1d1;

Kadangi vaizdai abiejose pusėse yra nedideli, šis rėmelis pasirodo kaip didelis baltas kraštas. Galite visada atnaujinti fono spalvą arba netgi pridėti mažą išorinę sieną, kad atvaizdas būtų atskirtas nuo fono. Tačiau šis gana paprastas stilių rinkinys gali būti manevruojamas į įvairius langelių šešėlių metodus. Žaiskite su kodu ir pažiūrėkite, kaip galite patobulinti vaizdo dizainą savo svetainėje.

Demo

9. Šviesūs įvesties laukai

Šią idėją po kelių kartų apsilankiau Pinterest prisijungimo puslapyje. Jų animaciniai stiliai iš tikrųjų rodo kai kuriuos iškalbingus daugelio inline dėžutės šešėlių, tiek išorės, tiek įdėklų pavyzdžius.

.formwrap display: block; blokas; paraštės apačia: 15px;  .formwrap label display: inline-block; plotis: 80px; šrifto dydis: 11px; šrifto svoris: paryškintas; spalva: # 444; šrifto šeima: Arial, Tahoma, sans-serif;  .formwrap .shadowfield pozicija: santykinis; plotis: 250px; šrifto dydis: 17px; šrifto šeima: "Helvetica Neue", Arial, sans-serif; šrifto svoris: normalus; fonas: # f7f8f8; spalva: # 7c7c7c; linijos aukštis: 1,4; pagalvėlė: 6px 12px; kontūras: nėra; perėjimas: visi 0.2s palengvinimo išėjimai 0s; -webkit-perėjimas: visi 0.2s palengvinimo išėjimai 0s; -moz-perėjimas: visi 0.2s palengvinimo išėjimai 0s; siena: 1px kietas # ad9c9c; pasienio spindulys: 6px 6px 6px 6px; dėžutės šešėlis: 0 1px rgba (34, 25, 25, 0,2) įdėklas, 0 1px #fff;  .formwrap .shadowfield: focus border-color: # 930; fonas: #fff; spalva: # 5d5d5d; dėžutės šešėlis: įdėklas 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0 7px rgba (235, 82, 82, 0,5); -moz-box-shadow: įdėjimas 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0 7px rgba (235, 82, 82, 0,5); -webkit-box-shadow: įdėjimas 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0 7px rgba (235, 82, 82, 0,5);

Nors pradiniai stiliai yra labai patrauklūs, aš kreipiuosi į pereinamojo laikotarpio efektai, kai sutelkiate dėmesį į kiekvieną įvesties lauką. Jūs galite skirtuką tarp jų ir pamatyti tiesioginį skirtumą tiek daug savybių. Išorinis žėrintis langelis yra naudojamas kartu su atnaujintu intarpo šešėliu. Taip pat teksto spalva tampa lengvesnė, kai jūs sutelkiate dėmesį į tam tikrą įvestį, tada išnyks, kai nukreipiate dėmesį.

Net kopijavimas per vieną iš šių efektų labai pagerintų jūsų formos laukų naudotojų patirtį. Būkite tikri, kad neužeisite per toli nuo taško, kur jūsų formos yra vos naudingos. Tačiau dauguma lankytojų galės mėgautis maloniais estetiniais efektais, kurie taip pat skatina sąveiką ir tolesnį dalyvavimą jūsų svetainėje.

Demo

10. Elastinės šešėliai

Šie unikalūs šešėlių mygtukai yra suformuoti lėtai pereinant per judančias ir aktyvias būsenas. Panašius pavyzdžius galite rasti „Mozilla“ pagrindiniame puslapyje su dideliais “Atsisiųskite „Firefox“” mygtukas. Keletas iš langelis-šešėlis ypatybės iš tikrųjų sujungia tris skirtingus šešėlius į vieną komandą.

.blu-btn display: inline-block; -moz-border-spindulys: .25em; pasienio spindulys: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), įterpimas 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), įterpimas 0 -2px 0 0 rgba (0,0,0,0.2); dėžutės šešėlis: 0 2px 0 0 rgba (0,0,0,0.1), įterpimas 0 -2px 0 0 rgba (0,0,0,0.2); fono spalva: # 276195; fono vaizdas: -moz-linijinis gradientas (# 3c88cc, # 276195); fono vaizdas: -ms-linijinis gradientas (# 3c88cc, # 276195); fono vaizdas: -webkit-gradientas (linijinis, kairysis viršuje, kairėje apačioje, spalvų sustojimas (0%, # 3c88cc), spalvų stabdymas (100%, # 276195)); fono vaizdas: -webkit-linijinis gradientas (# 3c88cc, # 276195); fono vaizdas: -o-linijinis gradientas (# 3c88cc, # 276195); filtras: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; fono vaizdas: tiesinis gradientas (# 3c88cc, # 276195); siena: 0; žymeklis: žymeklis; spalva: #fff; teksto apdaila: nėra; teksto derinimas: centras; šrifto dydis: 16px; paminkštinimas: 0px 20px; aukštis: 40px; linijos aukštis: 40px; min. plotis: 100px; teksto šešėlis: 0 1px 0 rgba (0,0,0,0,35); šrifto šeima: Arial, Tahoma, sans-serif; -webkit-perėjimas: visi linijiniai .2s; -moz-perėjimas: visi linijiniai .2s; -o-perėjimas: visi linijiniai .2s; -ms-perėjimas: visi linijiniai .2s; perėjimas: visi linijiniai .2s .blu-btn: hover, .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), įterpimas 0 -2px 0 0 rgba (0,0,0,0,3), įdėklas 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), įterpimas 0 -2px 0 0 rgba (0,0,0,0.3), įdėjimas 0 12px 20px 2px # 3089d8; dėžutės šešėlis: 0 2px 0 0 rgba (0,0,0,0.1), įdėjimas 0 -2px 0 0 rgba (0,0,0,0.3), įdėklas 0 12px 20px 2px # 3089d8;  .blu-btn: aktyvus -webkit-box-shadow: įdėklas 0 2px 0 0 rgba (0,0,0,0.2), įdėklas 0 12px 20px 6px rgba (0,0,0,0.2), įdėjimas 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: įdėklas 0 2px 0 0 rgba (0,0,0,0.2), įdėklas 0 12px 20px 6px rgba (0,0,0,0.2), įdėklas 0 0 2px 2px rgba (0,0, 0,0,3); dėžutės šešėlis: įdėklas 0 2px 0 0 rgba (0,0,0,0.2), įdėklas 0 12px 20px 6px rgba (0,0,0,0.2), įdėklas 0 0 2px 2px rgba (0,0,0,0,3 );  .grn-btn display: inline-block; -moz-border-spindulys: .25em; pasienio spindulys: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), įterpimas 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), įterpimas 0 -2px 0 0 rgba (0,0,0,0.2); dėžutės šešėlis: 0 2px 0 0 rgba (0,0,0,0.1), įterpimas 0 -2px 0 0 rgba (0,0,0,0.2); fono spalva: # 659324; fono vaizdas: -moz-linijinis gradientas (# 81bc2e, # 659324); fono vaizdas: -ms-linijinis gradientas (# 81bc2e, # 659324); fono vaizdas: -webkit-gradientas (linijinis, kairysis viršuje, kairėje apačioje, spalvų sustojimas (0%, # 81bc2e), spalvų sustojimas (100%, # 659324)); fono vaizdas: -webkit-linijinis gradientas (# 81bc2e, # 659324); fono vaizdas: -o-linijinis gradientas (# 81bc2e, # 659324); filtras: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; fono vaizdas: tiesinis gradientas (# 81bc2e, # 659324); siena: 0; žymeklis: žymeklis; spalva: #fff; teksto apdaila: nėra; teksto derinimas: centras; šrifto dydis: 16px; paminkštinimas: 0px 20px; aukštis: 40px; linijos aukštis: 40px; min. plotis: 100px; teksto šešėlis: 0 1px 0 rgba (0,0,0,0,35); šrifto šeima: Arial, Tahoma, sans-serif; -webkit-perėjimas: visi linijiniai .2s; -moz-perėjimas: visi linijiniai .2s; -o-perėjimas: visi linijiniai .2s; -ms-perėjimas: visi linijiniai .2s; perėjimas: visi linijiniai .2s;  .grn-btn: hover, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), įterpimas 0 -2px 0 0 rgba (0,0,0 , 0,3), įdėklas 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), įdėjimas 0 -2px 0 0 rgba (0,0,0,0.3), įdėjimas 0 12px 20px 2px # 85ca26; dėžutės šešėlis: 0 2px 0 0 rgba (0,0,0,0.1), įdėklas 0 -2px 0 0 rgba (0,0,0,0.3), įdėklas 0 12px 20px 2px # 85ca26;  .grn-btn: aktyvus -webkit-box-shadow: įdėklas 0 2px 0 0 rgba (0,0,0,0.2), įdėklas 0 12px 20px 6px rgba (0,0,0,0.2), įdėklas 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: įdėklas 0 2px 0 0 rgba (0,0,0,0.2), įdėklas 0 12px 20px 6px rgba (0,0,0,0.2), įdėklas 0 0 2px 2px rgba (0,0, 0,0,3); dėžutės šešėlis: įdėklas 0 2px 0 0 rgba (0,0,0,0.2), įdėklas 0 12px 20px 6px rgba (0,0,0,0.2), įdėklas 0 0 2px 2px rgba (0,0,0,0,3 );

Naudodamasis „hover“ ir „aktyvių“ mygtukų būsenomis, naudojasi visais perėjimais 200 milisekundžių. Tai, kas dėl šių stilių yra tokia didelė, yra ta, kad galite juos pritaikyti beveik bet kokiam paspaudžiamam elementui. Mygtukai, inkarų nuorodos, formos elementai ar kažkas, kas, jūsų manymu, yra tinkama - nors šie stiliai turėtų būti naudojami retai, kad nebūtų perkrautas jūsų dizainas.

Tokie mygtukai dažnai išsaugomi geriausiai tuo pačiu būdu, kaip Mozilla juos naudoja. Pridėkite šiuos stilius į savo tinklaraštį, kuriame turite mygtukus, skirtus parsisiųsti nemokamiems žaidimams, arba panašius. Vartotojai mėgsta bendrauti su unikaliomis sąsajomis ir tai dažnai reiškia daug didesnę procentinę dalį paspaudimų reitingui.

Demo

Galutinės mintys

Tikiuosi, kad galėsite atimti keletą puikių pamokų iš šio langelio šešėlių technikos rinkinio. Yra daug skirtingų sričių, į kurias galite susitelkti, įskaitant formas, modalines dėžutes, mygtukus, įrankių juostas ir net visą svetainės išdėstymą.

Nesivaržykite įgyvendinti bet kurį iš šių šešėlių efektų į savo svetainės dalis. Yra daug kitų būdų, tačiau ši kolekcija puikiai tinka tiek pradedantiesiems, tiek pažangiems kūrėjams. Taip pat, jei turite kokių nors pasiūlymų ar klausimų apie straipsnį, kurį galite pasidalinti su mumis žemiau esančioje komentarų diskusijų srityje.