جادوی CSS: ایجاد افکت گرادینت متحرک روی متن با المنتور

سلام رفیق گلم! 😄
جادوی CSS: ایجاد افکت گرادینت متحرک روی متن با المنتور – اگه میخای یک افکت جذاب و چشم‌نواز به متنت اضافه کنی که هر بیننده‌ای رو شگفت‌زده کنه، این مقاله برای توئه! امروز میخایم با هم یاد بگیریم چطوری با استفاده از CSS در المنتور، یک افکت گرادینت متحرک یا همون Animated Gradient Effect رو به متن‌هامون اضافه کنیم. این افکت نه‌تنها زیبایی کارتو چند برابر می‌کنه، بلکه باعث میشه سایتت حرفه‌ای‌تر به نظر برسه. آماده‌ای؟ بزن بریم! 🚀

افکت گرادینت متحرک چیست؟ 🌈

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

به زبان ساده، این افکت باعث میشه متن تو مثل رنگین‌کمان زنده به نظر بیاد و چشم کاربر رو خیره کنه. این روش هم کاربردی هست و هم زیبا، مخصوصاً برای عناوین (Heading) که می‌خوای حسابی به چشم بیاد.

مراحل ایجاد افکت گرادینت متحرک در المنتور 🛠️

1. انتخاب ویجت Heading

• توی صفحه‌ساز المنتور، ویجت Heading یا همون سربرگ رو به صفحه‌ات اضافه کن.
• متن دلخواهت رو توی این ویجت وارد کن. مثلاً: “افکت گرادینت متحرک رایا وردپرس”
• فونتت رو یه فونت دلخواه اما ضخیم انتخاب کن و سایزش رو بزرگ در نظر بگیر. من در این آموزش برای اینکه بیشتر این افکت به چشم بیاد اندازه فونتم رو 80 پیکسل در نظر گرفتم 🙂
• رنگ مشکی رو برای متن هدینگ انتخاب کن.

• به تب استایل سکشن یا بخش شامل ویجت هدینگ برو و نوع پس زمینه رو کلاسیک و رنگ اون رو زرد با کد رنگ FFDE00# قرار بده. تا کار نهایی جلوه بهتری پیدا کنه.

2. اختصاص کلاس CSS به ویجت Heading

• روی ویجت Heading کلیک کن.
• به تب پیشرفته (Advanced) برو.
• در قسمت کلاس CSS (CSS Classes)، عبارت Gtext رو وارد کن.

2. اضافه کردن CSS سفارشی به ویجت Heading

حالا باید جادوی CSS رو به کار ببری.

× ✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

• به تب پیشرفته ویجت هدینگ برو و بخش CSS سفارشی رو پیدا کن.
• کد زیر رو توی بخش CSS سفارشی بچسبون:

/* Animated Gradient Text Effect by RayaWP.ir */
.Gtext {
    background-image: linear-gradient(-225deg, #08408e 0%, #d63627 29%, #fff800 67%, #fff800 100%);
    background-size: 200% auto;
    color: #ffde00;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 8s linear infinite;
    font-weight: bold;
    display: inline-block;
    padding-top: 45px;
    padding-bottom: 15px;
}
@keyframes textclip {
    to {
        background-position: 200% center;
    }
}

توجه: در کد بالا می‌تونی سرعت انیمیشن رو به دلخواه تغییر بدی. به‌صورت پیش‌فرض، زمان اجرا روی 8 ثانیه تنظیم شده. برای تغییر سرعت، فقط کافیه مقدار 8s در خط 9 کد رو با عدد دلخواهت جایگزین کنی. 🎨

چرا از افکت گرادینت متحرک استفاده کنیم؟ 🧐

1. جلب توجه بیشتر: رنگ‌های متحرک فوراً نگاه کاربران رو جذب می‌کنن.
2. زیبایی بصری: این افکت حس مدرن بودن به طراحی‌ت میده.
3. افزایش تعامل کاربران: کاربران دوست دارن سایتی رو کشف کنن که براشون جذابه.

نکاتی برای حرفه‌ای‌ تر شدن کار: 💡

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

این افکت رو برای عناوین اصلی یا مهم استفاده کن. استفاده بیش‌ از حد ممکنه ظاهر سایتت رو شلوغ کنه.

جمع‌بندی 🌟

حالا تو به‌راحتی می‌تونی با استفاده از CSS و المنتور، یک افکت گرادینت متحرک روی متن‌های خودت ایجاد کنی و سایتت رو به یک اثر هنری تبدیل کنی. این تکنیک نه‌تنها جذابیت سایتت رو افزایش میده، بلکه حس حرفه‌ای بودن رو به کاربرات منتقل می‌کنه.

پس معطل نکن و همین حالا این افکت رو امتحان کن! اگه سؤالی داشتی یا چیزی رو متوجه نشدی، من اینجا هستم که راهنماییت کنم. 😊