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

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

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

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

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

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

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

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

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

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

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

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

نتیجه نهایی:

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

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

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