CSS Box Shadow Generator
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
Laatikkovarjo-ilmoituksessa on kuusi liikkuvaa osaa – X- ja Y-siirtymä, sumennus, leviäminen, väri ja valinnainen upotettu avainsana – ja ainoa tapa saada ne oikein on nähdä ne. Tämä generaattori asettaa jokaisen osan liukusäätimeen ja hahmontaa tuloksen esikatselukortilla vetäessäsi, joten alareunassa oleva CSS-rivi on aina juuri se, mitä katsot.
Tosimaailman varjot ovat harvoin yksikerroksisia. Tasoluettelon avulla voit pinota jopa neljä varjoa yhteen määrittelyyn: tiukka tumma viiva reunan määrittelyyn ja leveä pehmeä viiva kohoamiseen tai vaalean ja tumman pari, joka määrittelee neumorfismin. Valitse kerros muokataksesi sitä, poista tarpeettomat, ja yhdistetty laatikko-varjo-arvo päivittyy.
Varjot luetaan hyvin eri tavalla tummilla käyttöliittymillä, jolloin musta varjo melkein mustalta sivulta katoaa. Esikatselun taustan vaihtokytkin vaihtaa taustan vaalean ja tumman välillä, jotta voit tarkistaa molemmat teemat ennen toimitusta. Esiasetetut sivut kattavat muunnelmat, joita ihmiset todella etsivät: pehmeä korkeusvarjo, upotettu kuoppa, kaksikerroksinen neumorfismiresepti ja hienovarainen korttivarjo.
Kuten kaikki tämän sivuston työkalut, generaattori on ilmainen ja toimii kokonaan selaimessasi: ei latausta, ei tiliä, ja se toimii offline-tilassa sivun latautumisen jälkeen.