Neumorfizmas CSS šešėlis – dviejų sluoksnių kodas
Sukurkite CSS laukelio šešėlio kodą vizualiai: slankikliai, skirti poslinkiui, suliejimui, sklaidai, spalvai su neskaidrumu, įterpimo režimu ir iki keturių sluoksnių su tiesiogine peržiūra.
Rezultatas
Šiame puslapyje atidaromas generatorius su jau sukurta klasikine neumorfine pora: šviesaus sluoksnio poslinkis –8 pikseliai/–8 pikseliai beveik baltos spalvos ir tamsus sluoksnis poslinkis 8 pikseliai/8 pikseliai prislopintame pilkai mėlynai, abu neryškūs 16 pikselių. Perjunkite du sluoksnius sluoksnių sąraše, kad suderintumėte kiekvieną pusę atskirai.
Neumorphism (minkšta vartotojo sąsaja) yra reljefinis stilius, kuris pasiekė aukščiausią tašką apie 2020 m.: elementai atrodo išspausti iš fono, o ne sklandantys virš jo. Sąžiningai, tai susiję su tikrais kompromisais – efektas veikia tik tada, kai elemento fonas sutampa su puslapio fonu, o mažo kontrasto kraštai gali pakenkti pasiekiamumui – todėl dauguma komandų dabar jį naudoja kaip akcentą, o ne visą dizaino kalbą.
Jei stilius tinka jūsų projektui, ši dviejų sluoksnių deklaracija yra kanoninis atskaitos taškas: nukopijuokite CSS, nustatykite elemento ir puslapio foną į tą patį minkštą pilką spalvą ir pridėkite atitinkamą kraštinės spindulį. Viskas veikia lokaliai jūsų naršyklėje.