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


افکت های حرفه ای و زیبا در حالت هاور ( 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 گفت:

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

دیدگاهتان را بنویسید

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