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


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

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

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

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

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

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

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

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

<link href="آدرس فایل hover.css" rel="stylesheet">

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

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

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

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

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

پخش اختصاصی

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

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

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 گفت:

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

پاسخ دادن به امیر اسپروز لغو پاسخ

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