Neumorfismi CSS Shadow — kaksikerroksinen 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 generaattorin, jossa on jo rakennettu klassinen neumorfinen pari: vaalean kerroksen offset -8px/-8px lähes valkoisena ja tumma kerros offset 8px/8px vaimennettuna harmaasinisenä, molemmat sumeat 16px. Vaihda tasoluettelon kahden kerroksen välillä virittääksesi molemmat puolet erikseen.
Neumorphism (pehmeä käyttöliittymä) on kohokuvioitu tyyli, joka saavutti huippunsa vuoden 2020 tienoilla: elementit näyttävät pursotuneelta taustalta sen sijaan, että ne leijuvat sen yläpuolella. Rehellisesti sanottuna se sisältää todellisia kompromisseja – vaikutus toimii vain, kun elementin tausta vastaa sivun taustaa ja matalakontrastiset reunat voivat haitata saavutettavuutta – joten useimmat tiimit käyttävät sitä nyt korostuksena, ei koko suunnittelukielenä.
Jos tyyli sopii projektiisi, tämä kaksikerroksinen määritys on kanoninen lähtökohta: kopioi CSS, aseta elementti ja sivun tausta samaksi pehmeäksi harmaaksi ja lisää vastaava reunasäde. Kaikki toimii paikallisesti selaimessasi.