Box Shadow rammagerð

Stilltu sleðana til að búa til fallskugga eða innfelldan skugga á forskoðunarboxinu og afritaðu síðan CSS kóðann fyrir box-shadow sem myndast. Stjórnaðu lárétt og lóðrétt hliðrun, móðuradíus, dreifingarradíus, lit og gagnsæi — án þess að þurfa að muna röð gilda eða breyta litum í rgba() með höndunum.

Hvað er þetta verkfæri?

box-shadow er CSS eiginleiki sem teiknar skugga á bak við (eða innan í) staki. Ef hann er skrifaður með höndunum tekur hann allt að fimm gildi í röð — lárétta hliðrun, lóðrétta hliðrun, móðuradíus, dreifingarradíus og lit — auk valfrjálsa lykilorðsins inset, og allt þetta er auðvelt að ruglast á eða fá of veikt/of sterkt í fyrstu tilraun.

Þetta verkfæri breytir því í beina meðhöndlun: dragðu sleða, fylgstu með skugganum breytast á forskoðunarboxinu í rauntíma, og afritaðu nákvæman CSS kóðann þegar hann lítur rétt út. Litaveljarinn ásamt gagnsæissleða býr til réttan rgba() lit sjálfkrafa, þar sem gagnsæir skuggar líta yfirleitt betur út en fullkomlega ógegnsæir.

Af hverju að nota það?

Rauntímaforskoðun uppfærist samstundis við hverja breytingu — sjáðu nákvæman skuggann áður en þú skuldbindur þig að kóðanum.
Full stjórn á X-hliðrun, Y-hliðrun, móðu, dreifingu, lit og gagnsæi á einum stað.
Einn smellur bætir við inset fyrir innfellt/sokkið útlit í stað svífandi fallskugga.
Skilar CSS kóða tilbúnum til að líma inn, með litinn þegar breyttan í rgba() við valið gagnsæi.
Keyrir alfarið í vafranum þínum — ekkert sem þú stillir er sent neitt annað.
Ókeypis, engin skráning, virkar í síma.

Hvernig á að nota það

Stilltu X- og Y-hliðrun til að staðsetja skuggann — jákvæð gildi færa hann til hægri/niður, neikvæð gildi færa hann til vinstri/upp.
Auktu móðuradíus til að mýkja brún skuggans; auktu dreifingu til að gera skuggann stærri en stakið sjálft.
Veldu lit og stilltu gagnsæi — flestir raunsæir skuggar nota 15–40% gagnsæi frekar en heilan svartan.
Hakaðu við 'inset' ef þú vilt að skugginn birtist innan í jaðri staksins í stað þess að vera fyrir aftan það.
Afritaðu CSS kóðann sem myndaðist og límdu hann inn í stílskrána þína.

Dæmi

Inntak

Hliðrun: 0px, 10px · Móða: 20px · Dreifing: 0px · Litur: svartur með 35% gagnsæi

Úttak

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

Mjúkur skuggi beint fyrir neðan stakið án lárétts hliðrunar — einn algengasti skuggastíllinn fyrir kort/hnappa.

Einn skuggi á móti lagskiptum skuggum

Þetta verkfæri býr til eitt skuggalag, sem nær yfir langflest raunveruleg notkunartilvik — hnappar, kort, gluggar (modals) og fellivalmyndir nota nánast alltaf einn skugga. CSS styður reyndar marga skugga aðskilda með kommu á sama staki fyrir flóknari dýptaráhrif (t.d. þröngan, dökkan skugga undir mjúkum, breiðum skugga), en það er fínstilling sem þú getur bætt við með höndunum: búðu til einn skugga hér, tvöfaldaðu svo línuna, stilltu seinna gildasettið og tengdu þau saman með kommu.

Algeng box-shadow mynstur

Fíngerð kortalyfting: lítil hliðrun (0–4px), miðlungs móða (8–16px), svartur með 10–20% gagnsæi.
Upphafinn gluggi/fellivalmynd: stærri hliðrun (4–10px) og móða (20–30px), 20–35% gagnsæi fyrir sterkari svifáhrif.
Þrýstur/innfelldur hnappur: hakaðu við inset, notaðu litla hliðrun með neikvæðri tilfinningu og miðlungs móðu svo skugginn líti út eins og dæld frekar en lyftingu.
Litaður ljómi: veldu vörumerkislit í stað svarts, hækkaðu gagnsæi í 40–60% og auktu dreifingu örlítið fyrir mjúk ljómaáhrif í kringum hnappa.
Skarpur/harður skuggi: stilltu móðu á 0 og dreifingu á 0 fyrir þéttan, hliðraðan útlínuform frekar en mjúkan skugga.

Notkun með ávölum hornum

Skuggar og ávöl horn eru notuð saman stöðugt — kort, hnappar og gluggar sameina þetta nánast alltaf. Notaðu Border Radius rammagerðina til að rúnna horn sama staksins og notaðu síðan báðar CSS skilgreiningarnar saman.

→ Border Radius rammagerð

Algengar spurningar

Hver er munurinn á móðu og dreifingu?

Móðuradíus mýkir brún skuggans — hærri gildi láta hann dofna smám saman meira. Dreifingarradíus breytir stærð skuggans áður en móða er beitt — jákvæð dreifing gerir skuggann stærri en stakið á allar hliðar, neikvæð dreifing minnkar hann. Flestir hversdagslegir skuggar nota móðu meðan dreifing er skilin eftir á 0.

Af hverju að nota rgba() í stað venjulegs hex-litar fyrir skuggann?

Fullkomlega ógegnsær skuggi lítur harkalega og óraunsæilega út — raunverulegir skuggar eru alltaf að einhverju leyti gagnsæir, sem gerir það sem er fyrir aftan þá sýnilegt í smáatriðum. rgba() gerir þér kleift að stilla þetta gagnsæi beint, sem er ástæðan fyrir því að þetta verkfæri skilar alltaf litnum með alfa-gildi frekar en heilum hex-lit.

Hvað gerir lykilorðið inset?

Án inset er skugginn teiknaður fyrir utan jaðar staksins, eins og stakið svífi yfir síðunni. Með inset er skugginn þess í stað teiknaður innan jaðarsins, sem lætur stakið líta út eins og það sé þrýst inn eða sokkið — algengt í virkum/þrýstum hnappastöðum eða innsláttarreitum.

Get ég raðað fleiri en einum skugga á sama staki?

Já — CSS box-shadow tekur við lista aðskildum með kommum, og vafrar teikna þá í þeirri röð sem þeir eru gefnir (fyrsti skugginn er efst). Algeng aðferð er að leggja þröngan, dekkri skugga saman við breiðari, mýkri skugga fyrir raunsæilegri dýpt en hvor um sig getur veitt.

Hefur box-shadow áhrif á útlit síðunnar eða bara ásýnd?

Aðeins ásýnd — box-shadow hefur aldrei áhrif á stærð staksins eða staðsetningu nálægra staka, jafnvel með stórum móðu- eða dreifingargildum. Ef skugginn virðist sjónrænt skorinn af, skoðaðu hvort overflow: hidden sé sett á foreldrastak frekar en gildi skuggans sjálfs.