تولیدکننده گلسمورفیسم
کارتهای رابط کاربری شیشهای مات با تاری پسزمینه، شفافیت و حاشیه بسازید، سپس CSS را کپی کنید.
کارت شیشهای
شیشه مات شناور روی یک پسزمینه پرنقشونگار.
—
هم backdrop-filter و هم -webkit-backdrop-filter را خروجی میدهد. توجه: backdrop-filter در مرورگرهای قدیمیتر (مثلاً Firefox پایینتر از ۱۰۳) پشتیبانی نمیشود؛ برای آنها یک پسزمینه توپر جایگزین اضافه کنید.
درباره تولیدکننده گلسمورفیسم
تولیدکننده Glassmorphism جلوه کارت شیشه یخزده را میسازد: یک پنل نیمهشفاف که هرچه پشتش قرار دارد را محو میکند. اسلایدرها بلور و اشباع backdrop-filter، رنگ و شفافیت تینت شیشه، رنگ و کدری حاشیه، شعاع گوشه و یک سایه بیرونی را کنترل میکنند — هر تغییری روی یک پسزمینه پررنگ بهصورت زنده رندر میشود تا بتوانید جلوه را واقعبینانه ارزیابی کنید.
چهار پیشتنظیم کیفیت — subtle، frosted، vivid و dark glass — ترکیبهای اثباتشدهای برای شروع کار به شما میدهند. پیشتنظیم dark نشان میدهد چطور همان دستورالعمل با رابطهای تیره سازگار میشود، جایی که یک حاشیه روشن کمرنگ بیشتر کار جدا کردن شیشه از پسزمینه را انجام میدهد.
CSS تولیدشده هم backdrop-filter و هم پیشوند -webkit-backdrop-filter که Safari به آن نیاز دارد را شامل میشود. نکته سازگاری را در نظر داشته باشید: مرورگرهای قدیمیتر (برای مثال Firefox قبل از نسخه ۱۰۳) از backdrop-filter پشتیبانی نمیکنند، پس برای آنها یک پسزمینه یکدست جایگزین در نظر بگیرید.
نحوه استفاده از تولیدکننده گلسمورفیسم
- از یک پیشتنظیم شروع کنید — subtle، frosted، vivid یا dark glass — یا از حالتهای پیشفرض.
- بلور و اشباع فیلتر پسزمینه را تنظیم کنید.
- رنگ تینت شیشه و شفافیت آن را تعیین کنید.
- رنگ حاشیه، کدری حاشیه، شعاع گوشه و سایه بیرونی را تنظیم کنید.
- CSS را کپی کنید — از قبل شامل ویژگی با پیشوند -webkit- برای Safari است.