ایجاد افکت‌ جالب روی متن در المنتور (با کد 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 برای ایجاد انیمیشن استفاده کردیم.

نتیجه نهایی:

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

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

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

×

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

مطالعه