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

😍 اگه به یادگیری این تکنیک علاقه مندی، تا آخر این پست با نگاه قشنگت همراهم باش و به خوندن ادامه بده 🙂

🧐چرا باید پایین تصاویر رو محو کنیم؟

بیا اول یه کم در مورد این حرف بزنیم که چرا اصلاً محو کردن پایین تصاویر مهمه. تو طراحی وب، همیشه دنبال راه‌هایی هستیم که صفحاتمون رو جذاب‌تر و کاربرپسندتر کنیم. یکی از ترفندهای باحال برای این کار، محو کردن یا همون “فید کردن” قسمت‌هایی از تصویره. این تکنیک باعث می‌شه تصویرت به آرامی با پس‌زمینه ترکیب بشه و یه انتقال نرم و دلپذیر به وجود بیاد.

حالا این کار چه فایده‌ای داره؟ اول اینکه، سایتت یه حس حرفه‌ای و امروزی پیدا می‌کنه. دوم اینکه، تو طراحی‌های مینیمال و ساده خیلی خوب جواب می‌ده و می‌تونی با این روش، توجه کاربر رو به جاهای مهم صفحه جلب کنی. مثلاً اگه یه متن در قسمت پایین تصویر داری، با محو کردن پایین تصویر، متن بهتر دیده می‌شه و صفحه‌ات از شلوغی درمیاد. به نظرت جالب نیست؟ 😎

حالا که فهمیدی چرا این کار مفیده، بریم سراغ اصل مطلب: چطوری این “محو کردن” رو تو المنتور انجام بدیم؟

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

🔥چطوری پایین تصویر رو در المنتور محو کنیم؟

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

1. یه کلاس به تصویرت بده: تصویرت رو انتخاب کن و تو تب “Advanced یا پیشرفته”، تو بخش “CSS Classes”، یه اسم مثل “fade-rayawp” بنویس. با اینکار تو به تصویرت یه کلاس اختصاص دادی 🙂
2. کد CSS رو اضافه کن: حالا برو به بخش “Custom CSS” تو همون تب پیشرفته ویجت تصویر المنتور یا فایل style.css قالبت و این کد رو داخلش قرار بده:

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗   ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║   ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

این کد بهت کمک می‌کنه تا پایین یه المان (مثل بخش یا کانتینری که عکس پس‌زمینه داره) رو محو کنی. چطوری؟

• با اضافه کردن یه لایه شفاف (::after) روی همون المان.
• این لایه شفاف فقط ۴۰ درصد پایینی اون المان رو می‌پوشونه (height: 40%).
• پس‌زمینه این لایه یه شیب (گرادینت) هست که از پایین‌ترین نقطه با رنگ سفید ۸۰ درصد شفاف شروع می‌شه و به سمت بالا به رنگ کاملاً شفاف می‌رسه (linear-gradient(to top, rgba(255,255,255,0.8), transparent)).

خلاصه، این کد یه افکت محو شدن به رنگ سفید و با یه ارتفاع مشخص (۴۰ درصد) به پایین المانی که کلاس fade-rayawp رو بهش دادی، اضافه می‌کنه. اگه میخای درصد بیشتری از تصویر محو بشه این 40 درصد رو با عدد دلخواهت تو کد بالا جایگزین کن 🙂

اگه می‌خوای افکت محوی که به پایین تصاویرت اضافه میکنی حس پویایی و زنده بودن داشته باشه —طوری که میزان شفافیتش هر 4 ثانیه تغییر کنه—کافیه کد CSS زیر رو داخل فایل استایل یا قسمت Custom CSS المنتور بذاری 😉👇:

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗   ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║   ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

سخن پایانی 💗

تو با همین تکنیک، می‌تونی محو کردن پایین تصاویر رو در المنتور اجرا کنی و جلوه‌ی مدرن و حرفه‌ای به سایتت بدی.

حالا نوبت توئه! 🤩

• امتحان کن و نتیجه‌ رو تو کامنت‌ها با ما به اشتراک بذار.
• اگه سوال یا ایده‌ی دیگه‌ای داشتی، همین پایین بنویس.

موفق باشی و همیشه خلاق بمون! 🌟

چطور از انیمیشن‌ های Lottie در سایت خود استفاده کنیم؟ (روش دانلود رایگان)

مطالعه

طراحی کارت با هاور تعاملی در المنتور: نمایش و مخفی شدن جزئیات هنگام قرارگیری ماوس

مطالعه

با یک کلیک، برگرد بالا | ساخت دکمه بازگشت به بالا در المنتور

مطالعه