ایجاد افکت‌ جالب روی متن در المنتور (با کد css)

سلام دوست خلاق رایا وردپرسی! 😊 تو این پست می‌خواهیم با هم یه افکت متنی فوق‌العاده با CSS و SVG بسازیم که متنت رو خاص و جذاب کنه! این افکت برای صفحه اول سایت یا هدر می‌تونه فوق‌العاده باشه و توجه هر کسی رو جلب کنه. پس اگه آماده یه آموزش خاص دیگه هستی بزن که بریم تو کارش! 🚀

👌مراحل ایجاد این افکت جالب روی متن در المنتور

1- استفاده از SVG برای متن: اول از همه، از یه نماد SVG برای نمایش متن استفاده میکنیم. برای این کار، یک symbol تعریف می‌کنیم و متن‌مون رو داخلش قرار می‌دیم. این متن می‌تونه هر چیزی باشه، مثلاً “رایا وردپرس” 😊

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

توجه! ابتدا المنتور رو باز کن، یه برگه جدید بساز و ویجت HTML رو به صفحه اضافه کن. بعد کد بالا رو داخل ویجت بذار. به جای متن “رایا وردپرس”، می‌تونی متن دلخواه خودت رو جایگزین کنی🙂🦋

2- افزودن استایل‌ها با CSS: حالا می‌خوایم به متن مون استایل بدیم که افکت‌های انیمیشنی روش اعمال بشه. برای این کار، از ویژگی‌هایی مثل stroke-dasharray و stroke-dashoffset استفاده می‌کنیم. این ویژگی‌ها باعث می‌شن که متن به صورت تدریجی و انیمیشنی ظاهر بشه.

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

برای اضافه کردن CSS، به تب پیشرفته ویجت HTML برو و در بخش کدهای CSS سفارشی، کدهای زیر رو پیست کن :

ساخت جدول محتوای مدرن در وردپرس بدون افزونه

مطالعه

هاور افکت اسکرول خودکار عکس در المنتور: ترفندی برای نمایش جذاب نمونه کارها

مطالعه

حل مشکل اسکرول افقی در وردپرس و المنتور: راه حل تضمینی

مطالعه

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

درباره کد بالا خوبه بدونی!

• SVG: با استفاده از تگ <svg> و ایجاد یک نماد درونش، متن رو داخل یک فریم تعریف کردیم. این متن می‌تونه هر چیزی باشه که دوست داریم 🙂
• gradient: برای ایجاد رنگ‌های زیبای گرادینت (از نارنجی تا زرد)، از ویژگی linearGradient استفاده کردیم.
• CSS: در بخش CSS، از خاصیت‌های stroke-dasharray و stroke-dashoffset برای انیمیشن استفاده کردیم که باعث می‌شه متن به صورت تدریجی ظاهر بشه. هر خط متنی رنگ متفاوتی داره تا جذاب‌تر بشه. همچنین از @keyframes برای ایجاد انیمیشن استفاده کردیم.

نتیجه نهایی:

حالا متن شما به صورت انیمیشنی و با رنگ‌های جذاب نمایش داده می‌شه که می‌تونه توجه کاربران رو جلب کنه🔥

یادت باشه که با استفاده از این افکت‌ها می‌تونی سایت خودت رو خیلی حرفه‌ای‌تر و زیباتر کنی. به همین راحتی! 😄

امیدوارم این آموزش برات مفید بوده باشه. اگه سوالی داشتی، خوشحال می‌شم کمک کنم! 🌟