Liquid Glass: бүкіл интерфейске екі материал

Барлық беттер — дөңгеленген, сақинасы мен жұмсақ көлеңкесі бар жартылай мөлдір шыныдан жасалған қалқымалы «аралдар». Олардың арасынан фон көрінеді, сондықтан шеттен шетке панель жоқ.

Дәл екі материал

Dark Chrome басқарады: бұл тақырып және ондағы батырмалар. Light Sheet көрсетеді: бұл лента карточкалары және қазір оқып отырған парақ. Жүйеде үшінші материал жоқ.

Кодта бұл қалай жасалған

Екі материал да src/styles/global.css ішінде бір рет, Tailwind утилиталары ретінде жазылған. Радиус пен blur белгілеуде беріледі:

<a class="glass-sheet rounded-[28px] backdrop-blur-xl">…</a>
<div class="glass-chrome rounded-full backdrop-blur-3xl">…</div>

Оңай бұзылатын ережелер

1. Blur кемінде backdrop-blur-xl болуы керек, әйтпесе шыны оқылмайды.
2. Көлеңкелер тек жүйеден: стандартты shadow-lg пен shadow-xl басқа пропорция береді.
3. Экран шетінен шегініс — 12 px, беттер арасы — кемінде 4 px.