Neumorphism CSS Shadow — dvouvrstvý kód
Vizuálně vytvořte kód CSS box-shadow: posuvníky pro posun, rozostření, roztažení, barvu s neprůhledností, režim vložení a až čtyři vrstvy s živým náhledem.
Výsledek
Tato stránka otevírá generátor s již vytvořeným klasickým neumorfním párem: offset světlé vrstvy −8px/−8px v téměř bílé barvě a offset tmavé vrstvy 8px/8px v tlumené šedomodré barvě, obě rozmazané 16px. Přepínejte mezi dvěma vrstvami v seznamu vrstev a vylaďte každou stranu nezávisle.
Neumorphism (soft UI) je reliéfní styl, který vyvrcholil kolem roku 2020: prvky vypadají spíše vysunuté z pozadí, než aby se nad ním vznášely. Upřímně řečeno, přichází se skutečnými kompromisy – efekt funguje pouze tehdy, když pozadí prvku odpovídá pozadí stránky a okraje s nízkým kontrastem mohou zhoršit dostupnost – takže většina týmů jej nyní používá jako akcent, nikoli jako celý designový jazyk.
Pokud styl vyhovuje vašemu projektu, je tato dvouvrstvá deklarace kanonickým výchozím bodem: zkopírujte CSS, nastavte prvek a pozadí stránky na stejnou měkkou šedou a přidejte odpovídající poloměr okraje. Vše běží lokálně ve vašem prohlížeči.