جهت ورود به تالار گفتمان سایت کلیک کنید


افکت های حرفه ای و زیبا در حالت هاور ( hover )

سلام عرض میکنم خدمت کاربران همیشگی سایت اسکریپت دات کام . این پست به نظر بنده یکی از جالبترین پست های سایت اسکریپت دات کام خواهد بود .

پستی که قصد دارم در آن از افکت های فوق حرفه ای وب در حالت Hover را معرفی کنم .

حالت Hover چیست : این حالت به قدری روتین هست که دیگر نیازی به توضیح ندارم اما برای آن دسته از عزیزانی که نمیدونن توضیج میدم . این حالت را به زمانی میگویند که نشانه گر ماوس را بر روی یک قسمت برده اید و اتفاقی خاص رخ میدهد . مثلا وقتی ما ماوس را بر روی یک لینک میبریم , نشانه گر ماوس شبیه دست انسان میشود یا مثلا هنگامی که ماوس را بر روی یک باکس میبرید , رنگ آن عوض میشود .

و اما میرسیم به معرفی این افکت ها …

به صورت پیش فرض ما با استفاده از css و css3 میتوانیم افکت های زیبایی را در این حالت اعمال نماییم اما با استفاده از آموزش بیان شده در این پست , شما میتوانید از افکت های آماده فوق حرفه ای و جذاب استفاده نمایید .

برای این کار در ابتدا کافیست فایل css آماده مربوط به افکت ها را از اینجا دانلود نمایید .

سپس در پوشه ی سایت خود آپلود کرده و سپس آن را توسط تگ زیر به سایت خود لینک نمایید .

حال میتوانید به هر تگی از html که دوست دارید دارای حالت hover با افکت های زیبا شود , اتربیوت class داده و از میان لیست بلند بالایی که در اختیار شما قرار میگیرد , یک افکت را انتخاب نمایید .

نکته 1 : برای اینکه لیست به شما نمایش داده شود , باید از نرم افزار های طراحی وب سایت ( ترجیحا Adobe Dreamveawer ) استفاده کنید .

نکته 2 : تمامی کلاس های این لیست که مربوط به افکت ها می باشد , با کلمه -hvr شروع میشود .

نکته 3 : فایل hover.css دارای کدهای باز می باشد و شما میتوانید در صورت تمایل برای تغییر در افکت ها , سورس این فایل را باز نموده و شروع به تغییر نمایید . ( ترجیحا باید به css3 مسلط باشید )

دموی تمامی افکت ها

پخش اختصاصی

گرداوری و آموزش : وحید مجیدی

  • امتیاز شما به این مقاله ؟
    خیلی بدبدمعمولیخوبخیلی خوب (2 رای: 3٫50 از 5)
  • جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

    18 پاسخ به “افکت های حرفه ای و زیبا در حالت هاور ( hover )”

    1. fateme گفت:

      واقعا عاااااالییییی
      ممنوووون

    2. قاسم پور گفت:

      خیلیییییی عالیییی بود ممنون

    3. امیر اسپروز گفت:

      سلام
      مرسی از مطلب عالی
      الان من نمتونم بدون استفاده از css و فقط با html این افکت رو پیاده کنم؟
      چجوری ؟
      مرسی

    4. فرید گفت:

      سلام
      ممنونم از مطلبتون عالی بود.
      فقط یک سوال
      قسمت مربوط HTML کدش رو باید چجوری بنویسیم؟؟
      من میخوام همون عکسی که ادرس شو میدم افکت روی اون اعمال بشه و نمیخوام کل عکس های سایت همون افکت رو بگیرند…

      • وحید مجیدی گفت:

        کافیست در html به هر تگی که میخواهید خاصیت class رو بدید و یکی از افکت ها رو انتخاب کنید

    5. reza گفت:

      خیلی خیلی تشکر
      ساده و بی آلایش توضیح دادید از این آموزش ساده کم پیدا میشه کرد
      یا حق

    6. علیرضا گفت:

      خیلی عالی بود ی دنیا ممنون

    7. رضا گفت:

      اقا خیلی مردی….
      خدا هم تو این دنیا هم تو اون دنیا بهترازچیزی که میخوای بهت بده..

    8. کاظمی گفت:

      واااااااای اینا که عالی بوووودن

      :D
      مرسی اقا وحید

    9. jumpeR گفت:

      سلام وحیدجان !!!!!!!!!!!
      عالی بود

      • طوبی الهی گفت:

        سلام

        در هاور کردن به مشکل خوردم ، مثلا بر روی منوی home که هاور شد border-bottom آن آبی بشه. اما اول سفید میشه بعد آبی میشه!
        لطفا راهنمایی کنید ممنون.

    10. حامد گفت:

      سلام
      دستتون درد نکنه، جالب بودن

    11. الهه هدیه گفت:

      با مزه بودن…ممنون

    12. Amooo SiyA گفت:

      با سلام :
      وحید جان مثل همیشه زیبا و کاربردی بود من که به شخصه حتما توی طراحی های قالبم ازش استفاده میکنم

    پاسخی بگذارید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *