Генератор на гласморфизъм
Създавайте UI карти от матово стъкло с размазване на фона, прозрачност и рамки, после копирайте CSS.
Стъклена карта
Матово стъкло, реещо се над наситен фон.
-
Извежда както backdrop-filter, така и -webkit-backdrop-filter. Забележка: backdrop-filter не се поддържа в по-стари браузъри (напр. Firefox под 103); добавете плътен резервен фон за тях.
За Генератор на гласморфизъм
Генераторът на глассморфизъм изгражда ефекта на заскрежена стъклена карта: полупрозрачен панел, който замъглява всичко зад себе си. Плъзгачи контролират размазването и насищането на backdrop-filter, цвета и прозрачността на стъкления оттенък, цвета и прозрачността на границата, радиуса на ъглите и външна сянка: всяка промяна се изобразява на живо върху ярък фон, за да прецените реалистично ефекта.
Четири готови настройки за качество (фин, заскрежен, ярък и тъмно стъкло) предлагат изпробвани комбинации, от които да започнете. Тъмната настройка показва как една и съща рецепта се адаптира към тъмни интерфейси, където слаба светла граница върши повечето работа по отделяне на стъклото от фона.
Генерираният CSS включва както backdrop-filter, така и префикса -webkit-backdrop-filter, изискван от Safari. Обърнете внимание на предупреждението за съвместимост: по-стари браузъри (например Firefox преди версия 103) не поддържат backdrop-filter, така че осигурете плътен резервен фон за тях.
Как да използвате Генератор на гласморфизъм
- Започнете от готова настройка (фина, заскрежена, ярка или тъмно стъкло) или от подразбиращите се стойности.
- Коригирайте размазването и насищането на backdrop филтъра.
- Задайте цвета на стъкления оттенък и неговата прозрачност.
- Настройте цвета на границата, прозрачността на границата, радиуса на ъглите и очертаващата сянка.
- Копирайте CSS: той вече включва свойството с префикс -webkit- за Safari.