معرفی افکت شیشه ای در المنتور مشابه iOS 26
افکت شیشه ای در المنتور یا همان Glassmorphism ، یکی از ترندهای طراحی رابط کاربری جذاب و مدرن است. liquid glass افکتی جدید و ورژن پیشرفته تر Glassmorphism محسوب می شود. بعد از آپدیت iOS 26 و بکارگیری این افکت توسط اپل، حالا افکت iOS 26 در المنتور به یکی از ترندهای طراحی سایت تبدیل شده که در این آموزش به نحوه پیاده سازی آن می پردازیم.
مفهوم Glassmorphism و کاربرد آن
Glassmorphism تکنیکی در طراحی رابط کاربری وب سایت هاست که با کمک شفافیت، عمق و تاری یا blur حالت شیشه ای به المان ها می دهد. علاوه بر وبسایت ها، حتما این افکت را قبلا در طراحی رابط کاربری ویندوز و macOS هم مشاهده کردید؛ افکت شیشه ای یا Glassmorphism حس مدرن و شیک بودن به طراحی می دهد.
تفاوتهای افکت شیشه ای در iOS 26 و وب
افکت شیشه ای در المنتور و IOS 26 تفاوت هایی با هم دارند. در IOS 26 از نسخه پیشرفته افکت شیشه ای یا همان تکنیک liquid glass استفاده شده. که حالت سه بعدی، انیمیشنی دارد. و باعث میشود المان به حالت مایع یا liquid دیده شود. در ادامه آموزش افکت شیشه ای المنتور مشابه iOS 26 را داریم که برای طراحی سایت های مدرن و بصری مناسب است.
افزونههای پیشنهادی برای ایجاد افکت شیشه ای
استفاده از افزونه ها اضافه کردن هر قابلیتی با المنتور را آسان می کنند. برای افزونه Liquid Glass المنتور پلاگین هایی که در ادامه معرفی می شوند مناسب هستند.
افزونه Liquid Glass از Premium Addons
افزونه premium Addons یکی از پلاگین های جانبی قدرتمند المنتوری محسوب می شود. با استفاده از قابلیت liquid glass در این افزونه می توانید بدون نیاز به کدنویسی افکت iOS 26 در المنتور را برای هر المانی در المنتور اعم از کانتینرها یا ویجت ها پیاده سازی کنید.
البته باید این قابلیت رو بعد از نصب افزونه فعالسازی کنید. برای این منظور از بخش داشبورد تنظیمات premium addons وارد تب Global Addons شده و قابلیت liquid glass را فعال کنید. بعد از این کار وارد ویرایشگر المنتور شوید؛ کانتینر یا ویجت مورد نظر را انتخاب کرده و به تب پیشرفته بروید. تب جدیدی به نام liquid glass ظاهر شده که برای تنظیمات افکت شیشه ای در المنتور بدون کدنویسی باید enable شود. در لیست preset ها مشاهده می کنید که برخی از افکت ها فقط در ورژن پریمیوم افزونه فعال می شود.
افزونه Glassmorphism از The Plus Addons
The Plus Addons یکی دیگر از افزونه های جانبی المنتور، قابلیتی به نام Glassmorphism را به عنوان یکی از اکستنشن های خود ارائه می کند. که برای فکت شیشه ای بدون کدنویسی مفید و کاربردی است.
بعد از نصب the Plus Addons از پنل تنظیمات افزونه وارد بخش extentions شوید و گزینه liquid glass effects را فعال کنید. بعد از این در محیط ویرایشگر المنتور می توانید در تب پیشرفته این قابلیت را برای کانتینرها و ویجت ها روشن کنید و بعد از انتخاب پس زمینه شفاف طراحی شیشه ای در المنتور انجام دهید.
مقایسه ویژگیهای افزونههای مختلف
در یک مقایسه بین کارکرد قابلیت فکت شیشه ای در المنتور بین دو افزونه The Plus Addons و premium Addons باید گفت در premium Addons نتیجه بیشتر شبیه شیشه مایع یا همان liquid glass می شود ضمن اینکه باید از بین preset های موجود انتخاب کرد. درحالیکه در The Plus Addons بیشتر حالت Glassmorfism را داریم که تنظیمات دقیق تری براساس پارامترهای css میتوان اعمال کرد.
آموزش ایجاد افکت شیشه ای با کد CSS
اگر افزونه های گفته شده رو نصب ندارید فقط برای پیاده سازی افکت iOS 26 در المنتور نیازی به نصب افزونه ندارید. بلکه با کد css هم امکان انجام این کار وجود دارد.
تنظیمات پسزمینه و شفافیت
در درجه اول باید برای پیاده سازی افکت شیشه ای یک کانتینر div یا یک کارت با پس زمینه شفاف یا نیمه شفاف داشته باشید. برای ایجاد پس زمینه شفاف در کانتینرها یا ویجت ها از تب استایل در ویرایشگر المنتور استفاده کنید.
علاوه بر این کد css هم همین عملکرد را خواهدداشت:
.glass-card {background: rgba(255, 255, 255, 0.2);}
نکته مهم :
افکت liquid glass با انیمیشن و با حرکت زیبایی خودش را نشان میدهد. بنابراین در المنتور معمولا پس زمینه باکسی که افکت شیشه مایع دارد را یک ویدیو قرار میدهیم که نتیجه کار جذاب تر باشد.
استفاده از فیلترهای CSS برای تاری و انکسار
مهم ترین کد در پیاده سازی طراحی شیشه ای در المنتور با استفاده از css، ویژگی backdrop-filter می باشد. استفاده از فیلتر blur() برای ایجاد حالت تاری و فیلتر brightness() یا contrast() برای ایجاد حس انکسار یا شکست نور روی شیشه برای این منظور مهم است . مثلا:
.glass-card{backdrop-filter: blur(8px) contrast(1.2);}
افزودن سایههای 3Dبرای عمق بیشتر
نوشتن کدهایی برای سایه دار کردن کارت شفاف به طراحی عمق می دهد و حس تکنیک شیشه ای واقعی روی صفحه را به نتیجه کار اضافه می کند.
box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.2);
تا اینجا، نتیجه کار ما فقط یکی افکت شیشه ای معمولی است اما برای ایجاد افکت iOS 26 در المنتور که حالت شیشه مایع دارد ، نیاز به کدهای css بیشتری داریم. برای راحتی کار می توانید وارد سایت https://www.liquid-glass.pro/generator.html شده و افکت liquid glass دلخواه خود را ساخته و کدهای html و css تولیدشده را در المنتور داخل یک ویجت html قرار دهید و کار تمام است.
نکات مهم در استفاده از افکت شیشه ای
سازگاری با مرورگرها
هنگام طراحی افکت iOS 26 در المنتور باید از سازگاری مرورگر کاربران خود با این افکت مطمئن شوید چون در مرورگرهای قدیمی این افکت همانند افکت شیشه ای مشاهده خواهدشد.
علاوه براین برای پشتیبانی در مرورگرهای مختلف، از پیشوند -webkit- در کد css استفاده کنید.
-webkit-backdrop-filter: blur(8px);
تأثیر بر عملکرد سایت
استفاده از backdrop-filter که رکن اساسی در Liquid Glass در المنتور به شمار می رود؛ پردازش گرافیکی زیادی را می طلبد و همین مسئله باعث سنگینی سایت می شود. و همینطور فشار زیادی به منابع دستگاه نیز وارد میشود. به همین جهت در استفاده از این افکت نباید زیاده روی کنید.
استفاده بهینه از افکت در طراحی
از افکت iOS 26 در المنتور باید به صورت قانونمند و بهینه استفاده کنید. که علاوه بر زیبایی بصری، عملکرد سایت نیز وضعیت قابل قبولی داشته باشد.
دانلود رایگان آیکون های شیشه ای با فرمت SVG
اگر به دنبال آیکون های شیشه ای هستید که با فرمت سبک svg در وبسایت های المنتوری مورد استفاده باشند؛ به سایت Icons8 سر بزنید. در این وبسایت با جستجوی سبک های Glassmorphism یا liquid glass در سایت Icons8 آیکون های شیشه ای دلخواه خود را پیدا کنید.
جمعبندی
افکت شیشه ای یا Glassmorphism یکی از ترندهای محبوب طراحی وب است که ظاهری شفاف و مدرن به سایت میبخشد. بعد از Ios 26 بکارگیری از liquid glass به عنوان افکت جدیدی از خانواده Glassmorphism در دنیای طراحی سایت مورد استقبال قرار گرفته. با استفاده از ابزارهایی مانند افزونههای المنتور یا کدهای CSS، میتوان این افکت را به راحتی در سایت های وردپرسی و المنتوری پیادهسازی کرد. انتخاب ابزار مناسب بستگی به نیاز و مهارتهای فنی شما دارد؛ افزونهها گزینههای سریع و بدون نیاز به کدنویسی هستند، در حالی که استفاده از CSS کنترل بیشتری بر جزئیات طراحی میدهد.
