Üvegmorfizmus CSS generátor
Készítsen mattított üveg panelekhez vagy puha neumorfikus felületekhez kész-beszúrandó CSS kódot néhány csúszka mozgatásával, kézzel írott értékek nélkül.
Üvegmorfizmus CSS generátor
Készítsen egy teljes, kész-beszúrandó CSS szabályt egy mattított üveg panelhez vagy egy puha neumorfikus felülethez anélkül, hogy kézzel kellene értékeket írnia. Válassza az üvegmorfizmust egy félig átlátszó kártyához, amely elmosódja, amit mögötte van — az a megjelenés, amelyet a modern irányítópultokon, bejelentkezési panelokon és modális ablakokon használnak — vagy válassza a neumorfizmust egy felülethez, amely úgy tűnik, mintha ugyanabból az anyagból nyúlna ki, mint a háttere, két egymással szembenálló puha árnyék helyett átlátszóság használatával.
A beállítások közvetlenül az eszköz által írt tulajdonságokra térképeznek. Üveg módban a felület átlátszósága és homályosság erőssége vezérli a háttér alfáját és a backdrop-filter blur értékét, míg a szegély vastagsága és fényessége egy vékony, félig átlátszó szélét állítja be, amely a panelt olvashatóvá tartja a zsúfolt háttér ellen. Az árnyék távolsága és puhasága a panel alatt lévő vetített árnyékot formálja, a forma kapcsoló pedig beépített árnyékra vált a besüllyesztett megjelenéshez. A neumorfizmus módban az árnyék távolsága és puhasága értékei egy világos árnyékot és egy sötét árnyékot hajtanak végre, amely a felület színéből számítva emelt vagy megnyomva stílus szerint. A sarok lekerekítése és a sötét módú változat mindkét stílust befolyásolja.
Mivel egy mattított vagy puha árnyékú felület olyan középtónusba eshet, amely nehéz olvasni fekete vagy fehér szöveggel, az eszköz ellenőrzi a kapott kontrasztot, és rövid figyelmeztetési megjegyzést ad a CSS fölé, ha egyik szövegszín sem üljük be kényelmesen a WCAG AA fölé — egy ösztönzés a felület színének vagy átlátszóságának beállítására ahelyett, hogy csak találgatnánk.
Mindenki helyileg fut a böngészőjében a csúszkák mozgatásakor — nincs tervező eszköz, nincs fiók és semmi sem kerül szerverre. Másolja a CSS-t közvetlenül az stíluslapjába, töltse le .txt fájlként, vagy küldje vissza a kimenetet a bemenetbe, hogy folyamatosan módosítsa.