У цій статті
Що таке глазморфізм і чому він працює
Глазморфізм — це тренд UI-дизайну, побудований на поверхнях матового скла, що розмивають фон за ними. Ефект створює відчуття глибини та ієрархії шляхом накладання напівпрозорих панелей на кольорові фони, надаючи інтерфейсам сучасний та елегантний вигляд. Apple популяризувала цю естетику в macOS та iOS, і відтоді вона стала невід'ємною частиною дизайну панелей керування, карткових макетів та модальних оверлеїв у вебі.
CSS, що стоїть за глазморфізмом, поєднує напівпрозорий фоновий колір із розмиттям backdrop-filter та ледь помітною рамкою для імітації краю скла. Знаходження правильного балансу між прозорістю, радіусом розмиття та непрозорістю рамки потребує експериментування. Візуальний генератор дозволяє налаштовувати ці властивості в реальному часі та копіювати точний CSS, коли ефект виглядає правильно, усуваючи метод спроб і помилок при ручному написанні значень.
Як використовувати CSS-генератор глазморфізму
Генератор CheckTown надає інтерактивні елементи керування для кожної властивості ефекту скла, щоб ви могли візуально спроєктувати ідеальну панель.
- Налаштуйте повзунок радіуса розмиття, щоб контролювати силу розмиття фону — більші значення створюють більш матовий вигляд, тоді як менші залишають фон частково видимим
- Встановіть прозорість фону за допомогою повзунка непрозорості — це визначає, яка частина фонового кольору проступає крізь скляну поверхню
- Точно налаштуйте непрозорість та насиченість рамки, щоб додати ледь помітний скляний край, який ловить світло та відокремлює панель від фону
- Скопіюйте згенерований CSS одним кліком та вставте його безпосередньо у вашу таблицю стилів — результат включає властивість backdrop-filter з вендорними префіксами для максимальної сумісності з браузерами
Спробуйте безкоштовно — реєстрація не потрібна
Відкрити генератор глазморфізму →Поради з дизайну для використання ефектів скла
Глазморфізм виглядає вражаюче при продуманому використанні, але кілька рекомендацій допоможуть запобігти погіршенню читабельності або доступності.
- Забезпечте достатній контраст між текстом та скляною поверхнею — розмитий фон може ускладнити читання світлого тексту при занадто високій прозорості. Перевіряйте за допомогою інструментів перевірки контрасту WCAG.
- Використовуйте глазморфізм помірно — одна-дві скляні панелі на екрані створюють елегантну точку фокусу. Застосування ефекту до кожного елемента робить інтерфейс захаращеним та повільним.
- Забезпечте резервний суцільний колір для браузерів, що не підтримують backdrop-filter — старіші браузери покажуть повністю прозору панель без розмиття, що може зробити контент нечитабельним без резервного фону
Поширені запитання
Які браузери підтримують backdrop-filter?
Backdrop-filter підтримується у всіх сучасних браузерах, включаючи Chrome, Firefox, Safari та Edge. Згенерований CSS включає префікс -webkit- для сумісності з Safari. Internet Explorer не підтримує цю властивість, але його частка глобального використання є мізерною.
Чи впливає глазморфізм на продуктивність?
Властивість backdrop-filter запускає GPU-композитинг, що може вплинути на продуктивність на слабких пристроях або при застосуванні до багатьох елементів одночасно. Для найкращих результатів обмежте ефекти скла кількома ключовими елементами інтерфейсу, такими як панелі навігації, модальні вікна або головні картки, замість застосування до кожного компонента на сторінці.
Чи можна використовувати глазморфізм з темною темою?
Безумовно. Глазморфізм добре працює як у світлих, так і в темних темах. Для темної теми використовуйте темніший напівпрозорий фоновий колір та трохи збільште радіус розмиття для збереження ефекту матового скла. Генератор дозволяє переглянути результат на будь-якому фоновому кольорі, щоб ви могли точно налаштувати вигляд для обох тем.