Skilningur á box-shadow og virkni tólsins
Þetta tól gerir þér kleift að hanna sérsniðna skugga fyrir vefeiningar með því að breyta mismunandi eiginleikum með sleðum. Þú getur raðað mörgum skuggalögum ofan á hvert annað til að ná fram flóknum sjónrænum áhrifum og afritað tilbúna CSS-kóðann samstundis til að nota í þínum verkefnum.
Tólið hentar sérstaklega vel fyrir þá sem vilja hanna box-shadow fyrir vefeiningar, hvort sem markmiðið er að búa til fínlegan og þéttan skugga eða mýkri og breiðari skugga. Það nýtist einnig hönnuðum og framendaforriturum sem þurfa að raða mörgum skuggalögum saman til að skapa dýpt, eða þeim sem vilja láta einingu líta út fyrir að vera niðurfelld, eins og dælduð innsláttarsvæði eða hnappa.
Stillingar og gildi í boði
Í viðmótinu er að finna nokkra sleða og valkosti til að móta skuggann nákvæmlega:
- Lárétt hliðrun: Sleði sem færir skuggann til vinstri eða hægri, á bilinu frá -50px til 50px.
- Lóðrétt hliðrun: Sleði sem færir skuggann upp eða niður, á bilinu frá -50px til 50px.
- Afskerping (blur) (Blur): Sleði sem mýkir brúnir skuggans, á bilinu frá 0px til 100px.
- Dreifing (spread): Sleði sem stækkar eða minnkar skuggann áður en hann er afskertur, á bilinu frá -50px til 50px.
- Skuggalitur: Litaval sem stýrir lit skuggans.
- Ógegnsæi: Sleði til að stilla gagnsæi skuggans.
- Innfellt (inset): Rofi sem lætur skuggann birtast inni í einingunni.
- Bæta við lagi: Hnappur til að bæta við aukalegu skuggalagi.
- Fjarlægja lag: Hnappur til að eyða völdu skuggalagi.
Úttak og niðurstöður
Tólið sýnir eftirfarandi upplýsingar og gildi í rauntíma:
- Lag: Heiti á hverju einstöku skuggalagi.
- Lárétt hliðrun: Núverandi gildi á láréttri hliðrun fyrir lagið.
- Lóðrétt hliðrun: Núverandi gildi á lóðréttri hliðrun fyrir lagið.
- Afskerping (blur) (Blur): Núverandi gildi á afskerpingu fyrir lagið.
- Dreifing (spread): Núverandi gildi á dreifingu fyrir lagið.
- Skuggalitur: Valinn litur fyrir lagið.
- Ógegnsæi: Núverandi gildi á ógegnsæi fyrir lagið.
- Innfellt (inset): Núverandi staða (kveikt/slökkt) á innfellda valkostinum fyrir lagið.
- CSS: Tilbúinn CSS-kóði fyrir skuggann.
Reglur og sérstök tilvik við hönnun
Þegar unnið er með tólið gilda ákveðnar reglur um hvernig skuggarnir hegða sér og hvernig CSS-kóðinn uppfærist:
- Sleðarnir fyrir lárétta hliðrun, lóðrétta hliðrun, afskerpingu og dreifingu uppfæra CSS-úttakið í rauntíma.
- Lárétt hliðrun og lóðrétt hliðrun takmarkast við -50px til 50px.
- Afskerping getur farið frá 0px upp í 100px, en dreifing getur verið á bilinu -50px til 50px.
- Neikvætt gildi á dreifingu dregur skuggann inn á við.
- Valkosturinn „Innfellt (inset)“ snýr skugganum við þannig að hann fellur inn í eininguna sjálfa.
- Þegar nýju lagi er bætt við verður til nýtt skuggalag með sjálfgefnum gildum. Ef lag er fjarlægt eyðist það valda lag.
- Tólið sýnir fimm lög fyrirfram. Fyrsta lagið hefur sjálfgefin gildi sem eru
0 8 24 -4og 18% gagnsæjan svartan lit, en hin lögin eru falin í upphafi. - Þegar mörg lög eru notuð birtast þau í CSS-úttakinu sem gildi aðskilin með kommu.
Öryggi og meðferð gagna
Hver skuggi er teiknaður í vafranum þínum. Engu af því sem þú stillir hér er hlaðið upp á BroBroGo.
Algengar spurningar
Hverju stjórna hliðrun, afskerping og dreifing nákvæmlega?
Hliðrun (offset) færir skuggann til vinstri/hægri og upp/niður, afskerping (blur) mýkir brúnirnar, og dreifing (spread) stækkar eða minnkar skuggann áður en hann er afskertur. Neikvæð dreifing dregur skuggann inn á við, sem er gagnlegt fyrir þétta og flata skugga.
Hvað gerir inset-valkosturinn?
Venjulegur skuggi fellur utan við eininguna, eins og ljós á bak við upphækkað spjald. Inset snýr skugganum inn á við, þannig að einingin virkar niðurfelld — hentugt fyrir dælduð innsláttarsvæði eða hnappa sem búið er að smella á.
Af hverju ætti að nota fleiri en eitt skuggalag?
Einfaldur skuggi getur litið út fyrir að vera flatur þegar hann stækkar. Raunveruleg dýpt næst oftast með þvív að blanda saman þéttum, dökkum skugga og mýkri, breiðari skugga — bættu við öðru lagi og fínstilltu hvort fyrir sig til að ná þessum áhrifum.