Pehmeä CSS Box Shadow - Valmis koodi
Rakenna CSS-ruutuvarjokoodia visuaalisesti: liukusäätimet offsetille, sumennukselle, leviämiselle, värjäytyksille ja peittävyydelle, upotettu tila ja jopa neljä tasoa live-esikatselulla.
Tulos
Tämä sivu avaa laatikkovarjogeneraattorin, joka on esiladattu pehmeällä varjolla: ei vaakasuuntaista siirtymää, 8 kuvapistettä alaspäin, runsas 24 kuvapisteen sumennus ja alhainen 12 % mustan peittävyys. Esikatselukortti renderöi sen välittömästi – työnnä mitä tahansa liukusäädintä ja CSS-rivi seuraa reaaliajassa.
Pehmeät varjot ovat nykyaikaisten käyttöliittymien työhevonen. Suuri sumeus yhdistettynä alhaiseen peittävyyteen nostaa kortin pois sivulta piirtämättä kovia ääriviivoja, minkä vuoksi useimmat suunnittelujärjestelmät pitävät korkeusvarjot täsmälleen tällä alueella aikaisemman litteän suunnittelun tiheiden, tummien varjojen sijaan.
Kopioi varjostusviiva suoraan tyylitaulukkoon tai pinoa kolme kerrosta lisää saadaksesi rikkaamman korkeuden. Generaattori toimii kokonaan selaimessasi – mitään ei ladata minnekään.