Glasswork ابزاری برای ساخت افکت‌های Liquid Glass است که اجازه می‌دهد جزئیات ظاهری شیشه را به‌صورت کامل شخصی‌سازی کنید. تغییرات همان لحظه نمایش داده می‌شوند و در پایان نیز می‌توانید خروجی CSS را در پروژه خود به کار ببرید.
نکات کلیدی
- ظاهر شیشه و میزان شفافیت آن قابل تنظیم است.
- می‌توانید Blur، شکست نور و انعکاس نور روی لبه‌ها را تغییر دهید.
- نتیجه تغییرات به‌صورت زنده نمایش داده می‌شود.
- افکت‌های Refraction و Rim Light حس واقعی‌تری از شیشه ایجاد می‌کنند.
- خروجی نهایی را می‌توان به‌شکل کد CSS دریافت کرد.
کنترل جزئیات افکت شیشه‌ای
Glasswork فقط ابزاری برای شفاف‌کردن پس‌زمینه نیست. شما می‌توانید ظاهر شیشه، مقدار شفافیت و شدت Blur را تنظیم کنید و هم‌زمان نتیجه هر تغییر را ببینید.
امکان کنترل شکست نور و بازتاب نور در لبه‌ها نیز در این ابزار در نظر گرفته شده است. این تنظیمات کمک می‌کنند افکت نهایی از یک لایه نیمه‌شفاف ساده فراتر برود و ظاهر شیشه‌ای ملموس‌تری پیدا کند.
Refraction و Rim Light چه نقشی دارند؟
افکت Refraction برای شبیه‌سازی شکست نور به کار می‌رود؛ همان پدیده‌ای که هنگام عبور نور از شیشه دیده می‌شود. Rim Light نیز نور یا بازتاب لبه‌های عنصر را برجسته می‌کند تا مرزهای شیشه بهتر از پس‌زمینه جدا شوند.
ترکیب این دو افکت باعث می‌شود نتیجه عمق و جلوه بصری بیشتری داشته باشد. از آنجا که پیش‌نمایش زنده در دسترس است، می‌توانید تنظیمات را مرحله‌به‌مرحله تغییر دهید و بدون رفت‌وبرگشت مداوم میان کد و مرورگر، ظاهر مناسب را پیدا کنید.
استفاده از خروجی در پروژه
پس از رسیدن به ظاهر دلخواه، Glasswork خروجی CSS در اختیارتان می‌گذارد تا آن را وارد پروژه خود کنید. این قابلیت برای طراحان رابط کاربری و توسعه‌دهندگانی مناسب است که می‌خواهند افکت شیشه‌ای را به‌صورت دیداری تنظیم کنند و سپس سراغ کد آماده بروند.
نسخه قابل‌آزمایش این ابزار در صفحه آنلاین Glasswork قرار دارد و سورس کد Glasswork نیز در GitHub منتشر شده است.
جمع‌بندی
Glasswork مسیر ساخت افکت Liquid Glass را از تنظیم دیداری تا دریافت CSS در یک محیط جمع می‌کند. اگر برای رابط کاربری خود به جلوه‌ای شیشه‌ای با کنترل بیشتر روی شفافیت، محوشدگی و نور نیاز دارید، می‌توانید نتیجه تنظیمات را پیش از استفاده در پروژه به‌صورت زنده بررسی کنید.