Box Shadow rafall

Dragðu sleða til að móta box-shadow, raðaðu lögum til að skapa dýpt og afritaðu tilbúið CSS samstundis.

Skuggalög
Lag 1
CSS
Breyttu sleðunum til að móta skuggann.

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í 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.

CSS Cubic Bezier rafallDragðu handföngin tvö til að móta hreyfisveigju, fylgstu með punktinum hreyfast og afritaðu cubic-bezier() gildið.Litagradíent rafallBúðu til línulegan, hringlaga eða keilulaga stigul, bættu við litastoppum, stilltu stefnuna og afritaðu CSS-kóðann með einum smelli.Border Radius rafallRúnnaðu hvert horn með sleðum, búðu til lífræn form með eldingarlaga stillingu og afritaðu CSS-kóðann samstundis.Flexbox rafallSettu upp flex-gám og einingar hans með myndrænum stýringum, sjáðu breytingarnar í rauntíma og afritaðu CSS-kóðann með einum smelli.CSS Grid rafallStilltu dálka og raðir, dragðu yfir reitina til að staðsetja einingar og afritaðu grid-CSS ásamt samsvarandi HTML með einum smelli.CSS clamp() reiknivélSláðu inn stærð fyrir litla og stóra skjái og fáðu flæðandi clamp() gildi sem breytist mjúklega á milli — fyrir leturstærðir, spássíur eða bil.LitabreytirBreyttu litum á milli HEX, RGB, HSL, HSV, CMYK og LAB — breyttu hvaða reit sem er og hinir uppfærast jafnharðan.CSS snyrtir og þjappiEndurdregðu flókið CSS til að lesa það, eða þjappaðu því fyrir útgáfu — með öruggum ham sem breytir aldrei röð reglna.BirtuskilamælirSláðu inn texta- og bakgrunnslit til að sjá WCAG-birtuskilahutfallið og hvaða AA- og AAA-kröfur standast.