طراحی قالب وردپرس

ساخت Border با انیمیشن

سلام دوستان عزیز. تصمیم گرفتیم علاوه بر آموزش وردپرس ، آموزش UI/UX هم در مدرسه وردپرس داشته باشیم.  مقاله امروز مدرسه وردپرس در خصوص آموزش UI/UX، آموزش ساخت Border با انیمیشن هست. با این مقاله می تونیم باکس هایی داشته باشیم که در زمان هاور ماوس، انیمیشن زیبایی داشته باشند. این انیمیشن زیبا Border در وب سایت Carl Philipe Brenner وجود دارد.

دانلود سورسمشاهده دمو

نحوه نمایش Border با انیمیشن

عملکرد این انیمیشن بدین صورت هست که زمانی که ماوس خود را بر روی باکس هاور می کنید، تصویر پس زمینه به صورت Transparent میشه و Border ها با افکت زیبا نمایان میشن. نمونه یکی از افکت ها را در تصویر زیر میبینید:

ساخت Border انیمیشن

نکته: ما از css transitions برای SVG ها استفاده کرده ایم و ممکن است در برخی از مرورگر ها کار نکند!

ساخت Border با انیمیشن

بسیار خب حالا باید شروع به نوشتن کد کنیم. در این آموزش فقط از کدهای HTML و CSS استفاده می کنیم و برای درک این مقاله بهتره که با این کدها آشنایی داشته باشید

کد HTML

در ابتدا باید کدهای HTML مربوط به باکس ها رو اضافه کنیم. پس کد زیر را قرار دهید:

در کد بالا یک بلاک با کلاس box اضافه کردیم و داخل باکس SVG های مربوط به Border هارو اضافه کردیم و در ادامه عنوان و متن هایی که میخواییم داخل باکس نمایش داده بشه را قرار میدیم.

کد CSS

حالا می تونیم کدهای CSS این بلاک رو قرار بدیم. پس کد زیر رو برای استایل دادن به بلاک اصلیمون میزاریم:

و در ادامه کدهای CSS برای استایل دادن به متن های داخل باکس که قراره نمایش داده بشن:

و در ادامه اضافه کردن کدهای CSS برای استایل دادن به SVG ها قبل از هاور ماوس و در حالت عادی

و حالا اضافه کردن کدهای CSS برای استایل دادن به SVG ها در حالت هاور ماوس

و بعد فایل رو ذخیره کرده و دمو رو میبینیم. این افکت یکی از افکت ها می باشد و در نسخه دمو که برای دانلود قرار دادیم، چهار افکت مختلف انیمیشن Border وجود دارد

همینطور که مشاهده می کنید بدون استفاده از هیچ کد JS تونستیم یک افکت زیبا ایجاد کنیم

مقاله امروز مدرسه وردپرس در خصوص ساخت Border با انیمیشن به پایان رسید. امیدوارم که لذت برده باشید

شاد باشید

 

دانلود سورسمشاهده دمو

  
اگر نیاز به سئو و بهینه سازی قالب وردپرس دارید طراح وردپرس می تواند این کار را در سریع ترین زمان ممکن برای شما انجام دهد، کافیست از قسمت سفارش طراحی قالب وردپرس سفارش خود را ثبت نمایید.طراح وردپرس علاوه بر طراحی پوسته وردپرس ، قالب شرکتی وردپرس نیز طراحی می کند.
سفارش طراحی قالب وردپرس