افکت های حرفه ای و زیبا در حالت هاور ( hover )
سلام عرض میکنم خدمت کاربران همیشگی سایت اسکریپت دات کام . این پست به نظر بنده یکی از جالبترین پست های سایت اسکریپت دات کام خواهد بود .
پستی که قصد دارم در آن از افکت های فوق حرفه ای وب در حالت Hover را معرفی کنم .
حالت Hover چیست : این حالت به قدری روتین هست که دیگر نیازی به توضیح ندارم اما برای آن دسته از عزیزانی که نمیدونن توضیج میدم . این حالت را به زمانی میگویند که نشانه گر ماوس را بر روی یک قسمت برده اید و اتفاقی خاص رخ میدهد . مثلا وقتی ما ماوس را بر روی یک لینک میبریم , نشانه گر ماوس شبیه دست انسان میشود یا مثلا هنگامی که ماوس را بر روی یک باکس میبرید , رنگ آن عوض میشود .
و اما میرسیم به معرفی این افکت ها …
به صورت پیش فرض ما با استفاده از css و css3 میتوانیم افکت های زیبایی را در این حالت اعمال نماییم اما با استفاده از آموزش بیان شده در این پست , شما میتوانید از افکت های آماده فوق حرفه ای و جذاب استفاده نمایید .
برای این کار در ابتدا کافیست فایل css آماده مربوط به افکت ها را از اینجا دانلود نمایید .
سپس در پوشه ی سایت خود آپلود کرده و سپس آن را توسط تگ زیر به سایت خود لینک نمایید .
<link href="آدرس فایل hover.css" rel="stylesheet">
حال میتوانید به هر تگی از html که دوست دارید دارای حالت hover با افکت های زیبا شود , اتربیوت class داده و از میان لیست بلند بالایی که در اختیار شما قرار میگیرد , یک افکت را انتخاب نمایید .
نکته 1 : برای اینکه لیست به شما نمایش داده شود , باید از نرم افزار های طراحی وب سایت ( ترجیحا Adobe Dreamveawer ) استفاده کنید .
نکته 2 : تمامی کلاس های این لیست که مربوط به افکت ها می باشد , با کلمه -hvr شروع میشود .
نکته 3 : فایل hover.css دارای کدهای باز می باشد و شما میتوانید در صورت تمایل برای تغییر در افکت ها , سورس این فایل را باز نموده و شروع به تغییر نمایید . ( ترجیحا باید به css3 مسلط باشید )
پخش اختصاصی
گرداوری و آموزش : وحید مجیدی
واقعا عاااااالییییی
ممنوووون
خیلیییییی عالیییی بود ممنون
سلام
مرسی از مطلب عالی
الان من نمتونم بدون استفاده از css و فقط با html این افکت رو پیاده کنم؟
چجوری ؟
مرسی
خیر دوست عزیزم . به هیچ عنوان
سلام
ممنونم از مطلبتون عالی بود.
فقط یک سوال
قسمت مربوط HTML کدش رو باید چجوری بنویسیم؟؟
من میخوام همون عکسی که ادرس شو میدم افکت روی اون اعمال بشه و نمیخوام کل عکس های سایت همون افکت رو بگیرند…
کافیست در html به هر تگی که میخواهید خاصیت class رو بدید و یکی از افکت ها رو انتخاب کنید
خیلی خیلی تشکر
ساده و بی آلایش توضیح دادید از این آموزش ساده کم پیدا میشه کرد
یا حق
خیلی عالی بود ی دنیا ممنون
اقا خیلی مردی….
خدا هم تو این دنیا هم تو اون دنیا بهترازچیزی که میخوای بهت بده..
واااااااای اینا که عالی بوووودن
:D
مرسی اقا وحید
سلام وحیدجان !!!!!!!!!!!
عالی بود
سلام
در هاور کردن به مشکل خوردم ، مثلا بر روی منوی home که هاور شد border-bottom آن آبی بشه. اما اول سفید میشه بعد آبی میشه!
لطفا راهنمایی کنید ممنون.
لطفا دمو بدهید
سلام
دستتون درد نکنه، جالب بودن
با مزه بودن…ممنون
چی بامزس ….. با برنامه آَشپزی اشتب گرفتن کرداهه
با سلام :
وحید جان مثل همیشه زیبا و کاربردی بود من که به شخصه حتما توی طراحی های قالبم ازش استفاده میکنم
قربان شما . وظیفس