Glasswork؛ ساخت و شخصی‌سازی افکت Liquid Glass با خروجی CSS
Glasswork ساخت افکت‌های شیشه‌ای را ساده‌تر می‌کند؛ ظاهر را تغییر می‌دهید، نتیجه را زنده می‌بینید و در پایان کد CSS تحویل می‌گیرید.
تهیه‌شده با کمک هوش مصنوعی از منابع ذکرشده
فهرست مطالب۵ بخش
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 در یک محیط جمع می‌کند. اگر برای رابط کاربری خود به جلوه‌ای شیشه‌ای با کنترل بیشتر روی شفافیت، محوشدگی و نور نیاز دارید، می‌توانید نتیجه تنظیمات را پیش از استفاده در پروژه به‌صورت زنده بررسی کنید.
مطالب مرتبط
برای ادامه مطالعه
این یادداشت‌ها بر اساس موضوع مشترک، هم‌پوشانی برچسب‌ها و تازگی انتشار انتخاب می‌شوند.
تازهPixlpin؛ آرشیو رایگان بیش از ۵۸ هزار مرجع طراحی
Pixlpin بیش از ۵۸ هزار نمونه طراحی واقعی رو یک‌جا جمع کرده؛ از صفحه‌های اپلیکیشن و وب‌سایت تا موشن، لوگو و عناصر رابط کاربری. عضویت رایگانه و آرشیوش هم هر روز به‌روز می‌شه.
دیدگاهها
اولین نفری باش که دیدگاه می‌ذاره
دیدگاهها پس از بررسی منتشر می‌شوند. ایمیل شما نمایش داده نمیشود.