ساخت باکس شیشه‌ای در المنتور

ساخت باکس شیشه‌ای در المنتور

ساخت باکس شیشه‌ای در المنتور

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

چرا باکس شیشه‌ای؟

باکس‌ شیشه‌ای به طراحی وب‌سایت‌ها جلوه‌ای مدرن و شیک می‌بخشند. این نوع طراحی به کاربر احساس عمق و فضای بیشتری می‌دهد و می‌تواند توجه آن‌ها را جلب کند. باکس شیشه‌ای در المنتور معمولاً با استفاده از چند کد ساده و افکت‌های شفافیت و محو شدن ایجاد می‌شود که محتوای پس‌زمینه را به‌خوبی نمایش می‌دهد. این ویژگی به ویژه در طراحی وب‌سایت‌های خلاقانه و مدرن بسیار مورد استفاده قرار می‌گیرد.

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

برای ایجاد باکس شیشه‌ای در المنتور، مراحل زیر را دنبال کنید.

1. ایجاد یک بخش جدید

ابتدا یک کانتینر ایجاد کنید. این بخش نقطه شروع شما برای طراحی خواهد بود.

ساخت کانتینر

2. تنظیم عرض و ارتفاع بخش

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

عرض و ارتفاع

3. انتخاب تصویر پس‌زمینه

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

انتخب تصویر پس‌زمینه

4. افزودن محتوا به کانتینر

هیچ محدودیتی در افزودن محتوا وجود ندارد. شما می‌توانید چندین کانتینر را برای طراحی خود ایجاد کنید و سپس آن‌ها را استایل دهید.

افزودن محتوا به کانتینر

5. تنظیم رنگ پس‌زمینه کانتینر

با توجه به تصویر پس‌زمینه، پیشنهاد می‌کنم از رنگ‌های سفید یا مشکی برای پس‌زمینه کانتینر استفاده کنید. توجه داشته باشید که میزان شفافیت رنگ (opacity) را تنظیم کنید تا جلوه شیشه‌ای بهتر ایجاد شود.

#FFFFFF30

تغییر رنگ

6. تعریف کلاس‌های CSS برای کانتینر

کلاس CSS را به ستون خود اضافه کنید. این کار به شما کمک می‌کند که سبک‌های خاصی را به این بخش اعمال کنید.

frostedglass

کلاس‌های CSS

7. افزودن کد CSS به کانتینر

کد CSS را به‌سادگی در بخش تنظیمات CSS کانتینر وارد کنید و تمام! به همین راحتی می‌توانید جلوه شیشه مات را ایجاد کنید.

.frostedglass{
backdrop-filter:blur(20px);
}

کدهای CSS

نتیجه‌گیری

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

 

آیا این نوشته برایتان مفید بود؟

دیدگاهتان را بنویسید