Neumorphism CSS Shadow – kétrétegű kód
Készítsen CSS-doboz-árnyékkódot vizuálisan: csúszkák az eltoláshoz, elmosódáshoz, szóráshoz, színezéshez, átlátszósághoz, beillesztési módhoz és akár négy réteghez élő előnézettel.
Eredmény
Ez az oldal megnyitja a generátort a már felépített klasszikus neumorf párral: egy világos réteg eltolása –8px/-8px csaknem fehérben és egy sötét réteg eltolása 8px/8px tompa szürke-kék színben, mindkettő elmosódott 16px. Váltson a két réteg között a réteglistában, hogy az oldalakat egymástól függetlenül hangolja.
A neumorphism (soft UI) az a dombornyomott stílus, amely 2020 körül érte el a csúcsot: az elemek kihúzottnak tűnnek a háttérből, nem pedig lebegnek felette. Őszintén szólva, valódi kompromisszumokkal jár – a hatás csak akkor működik, ha az elem háttere egyezik az oldal hátterével, és az alacsony kontrasztú élek ronthatják a hozzáférhetőséget –, ezért a legtöbb csapat ékezetként használja, nem pedig teljes tervezési nyelvként.
Ha a stílus illeszkedik a projekthez, akkor ez a kétrétegű deklaráció a kanonikus kiindulópont: másolja ki a CSS-t, állítsa az elemet és az oldal hátterét ugyanarra a lágy szürkére, és adjon hozzá egy megfelelő szegélysugárt. Minden helyileg fut a böngészőben.