ساخت باکس شیشه ای مات (گلس مورفیسم) در المنتور

هی سلام رفقا حالتون چطوره

یک سبکی که اکسال خیلی ترند شده و تقریبا کل اینستاگرام رو در بر گرفته سبک گلس مروفیسم هستش یعنی یچیزی تو مایه های شیشه ای مات

حالا حتما براتون سوال شده که اینکارو ما توی المنتور چطوری انجامش بدیم؟ خب خیلی راحته ما دو روش داریم یکی با یک تکه کد css کوچولو که خیلی خیلی راحت تره و روش دیگه استفاده از افزونست حالا در ادامه هر دو روش هارو باهم توضیح خواهیم داد پس بزن بریم

با معرفی افزونه Exclusive Addons برای ویژگی گلس مورفیسم در خدمتتون هستیم

افکت Glassmorphism چیست؟

Glassmorphism UI یک گرایش طراحی بوده که جلوه های شیشه ای شفاف را در وب سایت ها به نمایش می گذارد. این رابط گرافیکی، مبتنی بر 3 افکت مجزا می باشد: شفافیت (شیشه مات)، رنگ های زنده و پاستیلی و حاشیه روشن. ترکیب این 3 افکت منجر به سبک شیشه ای به نام Glassmorphism UI می شود. این سبک در سال 2023 جز سبک های پر طرفدار دنیای گرافیک و یو آی بود که خیلی طرفدار نیز پیدا کرد

نحوه ایجاد افکت Glassmorphism با افزونه Exclusive Addons

ایجاد افکت Glassmorphism توسط المنتور بسیار آسان است. این کار توسط افزونه Exclusive Addons که یک افزودنی المنتور است انجام می شود. بنابراین ابتدا باید افزونه را نصب و فعال کنید.

• افزونه Exclusive Addons متاسفانه این افزونه رایگان نیست ولی اگر با روش کد که در انتهای مقاله در یوتیوب توضیح دادیم اموزش رو دنبال کنید کاملا رایگانه

سپس مراحل زیر را دنبال کرده تا این افکت زیبا را در سایت خود پیاده سازی کنید.

مرحله اول

ابتدا در صفحه مورد نظر، یک بخش داخلی (سکشن داخل) قرار بدید و المان های دلخواه خودتون رو واردش کنید و به اصطلاح باکس خودتون رو بسازید

مرحله دوم

بعد از قرار دادن ویجت ها در بخش، به تب استایل رفته و یک پس زمینه شفاف قرار دهید. توجه کنید حتما پس زمینه دارای کمی شفافیت باشد. که از نوار پایین میتونید شفافیتش رو تایین کنید

مرحله سوم

بعد از تعیین رنگ، در همین تب یعنی تب استایل، گزینه Glassmorphism را فعال کرده و مقدار تاری را تعریف کنید. هر چه میزان تاری بیشتر باشید، مقدار شیشه ای بودن پس زمینه نیز بیشتر خواهد شد.بهتره شیشه ای روی نیم قرار بگیره تا تاری المان های زیر باکس قابل نمایش باشه و یک سبک جذاب باشه مانند تصویر زیر

همانطور که مشاهده می کنید، پس زمینه دارای شفافیت به همراه حالت شیشه ای می باشد.

این حالت را برای تمامی ویجت ها، بخش ها و ستون می توانید استفاده کنید. تنها توجه کنید باید بخش یا ویجت مورد نظر، دارای رنگ پس زمینه شفاف بوده تا حالت شیشه ای دیده شود. در غیر این صورت تاری امکان پذیر نیست

روش دوم : استفاده از کد css

اموزش این روش به صورت ویدیویی در یوتیوب در حال ضبط میباشد و به زودی در اینجا قرار میگیرد

حتما همه شما با سایت Apple آشنایی دارید. اگر به قسمت سربرگ این سایت توجه کنید، در هنگام اسکرول، محتوای زیر سربرگ را به صورت محو (Blur) نشان می دهد. حالا این اموزش رو واجب نیست روی هدر انجام بدید اون تکه کد css رو هرجای سایت قرار بدید عمل میکنه

در نمونه سایت های ایرانی هم می توان به سایت جدید زرین پال اشاره کرد.یا سایت اسنپ فود و خود اسنپ در هنگام اسکرول محتوای زیر ان به صورتی بلوری و مات شده گذر میکنند

حالا در این آموزش نحوه طراحی باکس بلوری یا شیشه ای مات رو باهم خواهیم دید

طراحی باکس با پس زمینه Blur در المنتور

طراحی سربرگ با المنتور

ابتدا باکسی که مد نظر خودتون دارید رو ایجاد کنید و پشتش یک پس زمینه ای بزارید که افکت شیشه ای ما جلوه خودش رو نشون بده
حالا بر روی بخش اصلی باکس یا سکشن خودمون کلیک کنید و در تب استایل، رنگ پس زمینه را شفاف کنید.

در اینجا کد رنگی استفاده شده به صورت زیر می باشد:

rgba(0, 0, 0, 0.8)

اضافه کردن حالت شیشه ای (مرحله اصلی)

حالا به تب پیشرفته سکشن خودتون رفته و کد CSS زیر را قرار دهید:

با تغییر مقدار blur(20px); می توانید، شدت مات بودن را کم یا زیاد کنید.
کد زیر اصلی ترین مرحلست که به باکس ما یک جلوه بلوری جذاب میدده

selector { 
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
}

تا اینجای کار سربرگ به صورت محو شدگی در آماده است. حالا باید حالت چسبنده را فعال کنیم تا در هنگام اسکرول، سربرگ حرکت کنید.

به همین راحتی باکس بلوری شما با افکت blur ایجاد شد و یک طراحی مدرن و جذاب در اختیار خودتون خواهید داشت