ترفند CSS: لوگوی سایت خود را با این افکت درخشان کنید

تا حالا به این فکر کردی که چطور می‌تونی لوگوی سایتت رو جذاب‌تر و چشم‌نوازتر کنی؟ 🌟 توی دنیای رقابتی وب، کوچک‌ترین جزئیات می‌تونن تفاوت بزرگی ایجاد کنن. یکی از راه‌های جلب توجه کاربر، استفاده از افکت‌های خاص روی لوگوی سایتته. امروز می‌خوایم در مورد افکت شاین (Shine) حرف بزنیم، یک ترفند ساده اما حرفه‌ای با CSS که لوگوی سایتت رو زیباتر میکنه. پس تا آخر این مقاله با من همراه باش تا قدم‌ به‌ قدم یاد بگیری چطور این افکت رو ایجاد کنی. 😉

🤔افکت شاین (Shine) چیه؟

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

چرا از افکت Shine برای لوگوی سایت استفاده کنیم؟ 🤔

1. جلب توجه کاربران: لوگوی درخشان قطعاً نگاه‌ها رو به خودش جلب می‌کنه. 💡
2. حس مدرن و حرفه‌ای: این افکت به سایتت یه حس خاص و امروزی می‌ده که خیلی توی چشم میاد. ✨
3. سادگی اجرا: با چند خط کد CSS می‌تونی راحت این افکت رو به سایتت اضافه کنی. خیلی ساده و سریع! 💻
4. سازگاری بالا: این تکنیک با اکثر مرورگرها سازگاره و بدون دردسر به‌ خوبی اجرا میشه. 🌐

مخلص کلام این افکت وقتی می‌خوای یه حس دینامیک و جذاب به سایت بدی، خیلی به درد می‌خوره🌟

آموزش ایجاد افکت Shine روی لوگوی سایت در المنتور😎✨

مرحله 1: اضافه کردن لوگو به صفحه با المنتور 📸

• اول وارد صفحه‌ای شو که می‌خوای لوگوی سایت رو توش بذاری.

• بعد ویرایشگر المنتور رو باز کن، ویجت تصویر یا لوگوی سایت رو از پنل سمت راست ابزارک های المنتور انتخاب کن و به صفحه‌ات اضافه کن. ( من تو این آموزش از ویجت لوگوی سایت استفاده کردم 🙂

• حالا تصویر لوگوی سایتت رو بارگذاری کن. 📸

مرحله 2: اضافه کردن کد CSS

• روی ویجت تصویر یا لوگوی سایت کلیک کن تا تنظیماتش باز بشه.

• برو به تب “پیشرفته” و توی بخش “کلاس CSS” عبارت RayaWp-mask رو وارد کن.

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

/* Shine Effect by RayaWp.ir */
.RayaWp-mask img {
    -webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 50%) right / 300% 100%;
    mask: linear-gradient(-60deg, #000 30%, #0005, #000 50%) right / 300% 100%;
    animation: Rwshine 3s infinite;
}

@keyframes Rwshine {
    0% {
        -webkit-mask-position: 140% 140%;
        mask-position: 140% 140%;
    }

    100% {
        -webkit-mask-position: -20% -20%;
        mask-position: -20% -20%;
    }
}

 ____                   __        __
|  _ \ __ _ _   _  __ _ \ \      / / __
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/
            |___/                 |_|

تغییرات رو ذخیره کن و برگه رو در تب جدید کن تا افکت درخشش رو ببینی! ✨

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

نکات مهم برای بهینه‌ سازی:

1. زمان انیمیشن: می‌تونی با تغییر مقدار 3s در کد بالا (لاین 4)، سرعت افکت رو تغییر بدی و تنظیم کنی که چقدر سریع یا اروم حرکت کنه. ⚡
2. موقعیت ماسک: با تغییر مقادیر mask-position، می‌تونی جهت و حرکت نور رو دستکاری کنی. 🔄
3. سازگاری مرورگر: حتماً سایتت رو روی مرورگرهای مختلف تست کن تا مطمئن بشی که افکت به درستی کار می‌کنه. 🌐

⁉️شاید برات سوال باشه!

پایان

خب، حالا می‌دونی چطور با یک ترفند ساده CSS لوگوی سایتت رو جذاب تر کنی و توجه کاربرو بهش جلب کنی. 🌟 اگه سوالی داشتی یا به مشکلی برخوردی، حتماً توی کامنت‌ها بگو. خوشحال می‌شم کمکت کنم! 😊

منتظر نظراتت هستم! این افکت رو امتحان کردی؟ نتیجه چی شد؟ ❤️