Глассморфизм (Glassmorphism)

AstroGlass глассморфизмнің заманауи түрін жүзеге асырады — қабатталған, мөлдір және премиум деңгейдегі интерфейстерді құру.

Рецепт

Глассморфизм эффектісі бірге жұмыс істейтін төрт негізгі CSS қасиеті арқылы қол жеткізіледі:

1. Фонды бұлыңғырлау (Backdrop Blur): Аязды әсер үшін біз backdrop-filter: blur(12px) қолданамыз.
2. Жартылай мөлдірлік (Translucency): Фон түстері альфа-арналарды пайдаланады (мысалы, bg-white/10).
3. Жиектер (Borders): Нәзік 1px жиектер (border-white/20) шеттерін анықтайды.
4. Көлеңкелер (Shadows): Жұмсақ, түрлі-түсті көлеңкелер тереңдік пен биіктік сезімін тудырады.

Бұл үйлесім иерархия мен заманауилық сезімін қалыптастырады.

Тәжірибелік қолданыс

AstroGlass компоненттерінде сіз бұл шаблонның Tailwind утилиталық кластары ретінде қолданылғанын көресіз:

<div class="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl shadow-lg">
  Глассморфты контейнер
</div>

Күңгірт тақырыптар үшін градиентті фондармен қабаттасу эффектісі жиі кездеседі:

<div class="bg-gradient-to-br from-white/5 to-white/[0.02] backdrop-blur-xl border border-white/10">
  Күңгірт глассморфты карта
</div>

Тақырып вариациялары

AstroGlass-тағы әрбір тақырып глассморфизмді өзінше түсіндіреді: