ساخت باکس شیشه‌ای در المنتور
ساخت باکس شیشه‌ای در المنتور
در دنیای طراحی وب، ابزارهای متعددی وجود دارند که به طراحان کمک می‌کنند تا وب‌سایت‌های زیبا و کاربرپسند ایجاد کنند. یکی از این ابزارها، افزونه المنتور است که به دلیل قابلیت‌های فراوان و کاربری آسان، به یکی از محبوب‌ترین ابزارها در بین طراحان وب تبدیل شده است. یکی از ویژگی‌های جذاب المنتور، امکان ایجاد باکس شیشه‌ای است که می‌تواند به زیبایی و جذابیت وبسایت شما بیفزاید. در این مقاله، به نحوه ساخت باکس شیشه‌ای در المنتور و پس‌زمینه شیشه‌ای خواهیم پرداخت.چرا باکس شیشه‌ای؟
باکس شیشه‌ای به طراحی وب‌سایت‌ها جلوه‌ای مدرن و شیک می‌بخشند. این نوع طراحی به کاربر احساس عمق و فضای بیشتری می‌دهد و می‌تواند توجه آن‌ها را جلب کند. باکس شیشه‌ای در المنتور معمولاً با استفاده از چند کد ساده و افکت‌های شفافیت و محو شدن ایجاد می‌شود که محتوای پس‌زمینه را به‌خوبی نمایش می‌دهد. این ویژگی به ویژه در طراحی وب‌سایت‌های خلاقانه و مدرن بسیار مورد استفاده قرار می‌گیرد.مراحل ساخت باکس شیشه ای در المنتور
برای ایجاد باکس شیشه‌ای در المنتور، مراحل زیر را دنبال کنید. 1. ایجاد یک بخش جدید ابتدا یک کانتینر ایجاد کنید. این بخش نقطه شروع شما برای طراحی خواهد بود.
2. تنظیم عرض و ارتفاع بخش
در این مرحله، عرض و ارتفاع بخش را مطابق نیاز خود تنظیم کنید. این مقادیر انعطاف‌پذیر هستند و می‌توانید آن‌ها را با توجه به نیاز طراحی خود تنظیم کنید.
3. انتخاب تصویر پس‌زمینه
تصویر پس‌زمینه‌ای که می‌خواهید استفاده کنید را انتخاب کنید. استفاده از اشکال به‌ویژه برای ایجاد جلوه شیشه مات بسیار مناسب است.
4. افزودن محتوا به کانتینر
هیچ محدودیتی در افزودن محتوا وجود ندارد. شما می‌توانید چندین کانتینر را برای طراحی خود ایجاد کنید و سپس آن‌ها را استایل دهید.
5. تنظیم رنگ پس‌زمینه کانتینر
با توجه به تصویر پس‌زمینه، پیشنهاد می‌کنم از رنگ‌های سفید یا مشکی برای پس‌زمینه کانتینر استفاده کنید. توجه داشته باشید که میزان شفافیت رنگ (opacity) را تنظیم کنید تا جلوه شیشه‌ای بهتر ایجاد شود.
#FFFFFF30
6. تعریف کلاس‌های CSS برای کانتینر
کلاس CSS را به ستون خود اضافه کنید. این کار به شما کمک می‌کند که سبک‌های خاصی را به این بخش اعمال کنید.
frostedglass
7. افزودن کد CSS به کانتینر
کد CSS را به‌سادگی در بخش تنظیمات CSS کانتینر وارد کنید و تمام! به همین راحتی می‌توانید جلوه شیشه مات را ایجاد کنید.
.frostedglass{
backdrop-filter:blur(20px);
}
