CodeKitHubKas yra šis įrankis?
box-shadow yra CSS savybė, piešianti šešėlį už elemento (arba jo viduje). Rašant ranka reikia iki penkių reikšmių tam tikra tvarka — horizontalus poslinkis, vertikalus poslinkis, ištrynimo spindulys, sklaidos spindulys ir spalva — plius neprivalomas inset raktažodis, ir visa tai lengva sumaišyti ar padaryti per subtilų/per sunkų iš pirmo bandymo.
Šis įrankis tai paverčia tiesioginiu manipuliavimu: patraukite slankiklį, stebėkite, kaip šešėlis keičiasi gyvoje peržiūroje, ir nukopijuokite tikslų CSS, kai jis atrodo tinkamai. Spalvos rinkiklis kartu su permatomumo slankikliu automatiškai sugeneruoja tinkamą rgba() reikšmę, nes permatomi šešėliai paprastai atrodo geriau nei visiškai nepermatomi.
Kodėl jį naudoti?
- Peržiūra gyvai atsinaujina akimirksniu, jums koreguojant bet kurį valdiklį — pamatykite tikslų šešėlį prieš įsipareigodami kodui.
- Pilna kontrolė virš offset-x, offset-y, ištrynimo, sklaidos, spalvos ir permatomumo vienoje vietoje.
- Vienu paspaudimu pridedamas inset paspaustos / įdubusios išvaizdos vietoje sklandančio kritimo šešėlio.
- Pateikia paruoštą įklijuoti CSS su spalva, jau konvertuota į rgba() jūsų pasirinktu permatomumu.
- Veikia visiškai jūsų naršyklėje — niekas, ką konfigūruojate, niekur neįkeliama.
- Nemokama, be registracijos, veikia mobiliajame įrenginyje.
Kaip naudoti
- Nustatykite offset-x ir offset-y, kad pozicionuotumėte šešėlį — teigiamos reikšmės stumia dešinėn/žemyn, neigiamos — kairėn/aukštyn.
- Padidinkite ištrynimo spindulį, kad suminkštintumėte šešėlio kraštą; padidinkite sklaidą, kad šešėlis būtų didesnis nei pats elementas.
- Pasirinkite spalvą ir pakoreguokite permatomumą — dauguma realistiškų šešėlių naudoja 15–40% permatomumą, o ne vientisą juodą.
- Pažymėkite "inset", jei norite, kad šešėlis atsirastų elemento rėmelio viduje, o ne už jo.
- Nukopijuokite sugeneruotą CSS ir įklijuokite jį į savo stilių lapą.
Pavyzdys
Įvestis
Poslinkis: 0px, 10px · Ištrynimas: 20px · Sklaida: 0px · Spalva: juoda su 35% permatomumuIšvestis
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);Minkštas šešėlis tiesiai po elementu be horizontalaus poslinkio — vienas dažniausių kortelių/mygtukų šešėlio stilių.
Vienas šešėlis ar sluoksniuoti šešėliai
Šis įrankis kuria vieną šešėlio sluoksnį, kuris apima didžiąją dalį realaus naudojimo — mygtukai, kortelės, modaliniai langai ir iškrentantys meniu beveik visada naudoja vieną šešėlį. CSS palaiko kableliais atskirtus kelis šešėlius tam pačiam elementui sudėtingesniems gylio efektams (pvz., glaudus, tamsus šešėlis, sluoksniuojamas po minkštu, plačiu), tačiau tai patobulinimas, kurį galite pridėti ranka: sugeneruokite vieną šešėlį čia, tada padvigubinkite eilutę, pakoreguokite antrą reikšmių rinkinį ir sujunkite juos kableliu.
Dažni box-shadow šablonai
- Subtilus kortelės pakėlimas: mažas poslinkis (0–4px), vidutinis ištrynimas (8–16px), 10–20% permatomumo juoda.
- Iškilęs modalinis langas/iškrentantis meniu: didesnis poslinkis (4–10px) ir ištrynimas (20–30px), 20–35% permatomumas stipresniam sklandymo įspūdžiui.
- Paspaustas/vidinis mygtukas: pažymėkite inset, naudokite mažą, į vidų nukreiptą poslinkį ir vidutinį ištrynimą, kad šešėlis atrodytų kaip įdubimas, o ne pakėlimas.
- Spalvotas švytėjimas: pasirinkite prekės ženklo spalvą vietoj juodos, padidinkite permatomumą iki 40–60% ir šiek tiek padidinkite sklaidą minkštam švytėjimo efektui aplink mygtukus.
- Aštrus/kietas šešėlis: nustatykite ištrynimą į 0 ir sklaidą į 0 vientisam, pastumtam siluetui, o ne minkštam šešėliui.
Derinimas su suapvalintais kampais
Šešėliai ir suapvalinti kampai naudojami kartu nuolat — kortelės, mygtukai ir modaliniai langai beveik visada sujungia abu. Naudokite Border Radius generatorių, kad suapvalintumėte to paties elemento kampus, tada pritaikykite abu sugeneruotus CSS aprašus kartu.
Dažniausiai užduodami klausimai
Koks skirtumas tarp ištrynimo ir sklaidos?
Ištrynimo spindulys suminkština šešėlio kraštą — didesnės reikšmės daro jį labiau palaipsniui blėstantį. Sklaidos spindulys keičia šešėlio dydį prieš ištrynimą — teigiama sklaida padaro šešėlį didesnį už elementą iš visų pusių, neigiama — sumažina jį. Dauguma kasdienių šešėlių naudoja ištrynimą, o sklaidą palieka 0.
Kodėl šešėliui naudoti rgba(), o ne paprastą hex spalvą?
Visiškai nepermatomas šešėlis atrodo šiurkštus ir nerealistiškas — tikri šešėliai visada šiek tiek permatomi, leisdami tai, kas už jų, šiek tiek prasišviesti. rgba() leidžia nustatyti tą permatomumą tiesiogiai, todėl šis įrankis visada pateikia spalvą su alfa reikšme, o ne vientisą hex.
Ką daro inset raktažodis?
Be inset šešėlis piešiamas už elemento rėmelio, tarsi elementas sklęstų virš puslapio. Su inset šešėlis piešiamas rėmelio viduje, todėl elementas atrodo paspaustas ar įdubęs — dažniausiai naudojama aktyvioms/paspaustoms mygtuko būsenoms ar įvesties laukams.
Ar galiu sudėti kelis šešėlius ant to paties elemento?
Taip — CSS box-shadow priima kableliais atskirtą sąrašą, o naršyklės juos atvaizduoja nurodyta tvarka (pirmasis šešėlis yra viršuje). Dažna technika sluoksniuoja glaudų, tamsesnį šešėlį su platesniu, minkštesniu realistiškesniam gyliui, nei bet kuris atskirai suteiktų.
Ar box-shadow veikia išdėstymą, ar tik išvaizdą?
Tik išvaizdą — box-shadow niekada neveikia elemento dydžio ar aplinkinių elementų padėties, net esant didelėms ištrynimo ar sklaidos reikšmėms. Jei šešėlis vizualiai apkarpomas, patikrinkite overflow: hidden tėviniame elemente, o ne paties šešėlio reikšmes.