hover : مجموعه ای از افکتهای زیبای هاور

- visibility ۶ mode_comment

در این مطلب میخوام یک ابزار بنام Hover.css رو خدمت شما معرفی کنم و اونو آموزش بدم.

این ابزار مجموعه از افکتهای زیبا برای هاور در اختیارتون میزاره و میتونین در طراحی سایتتون از اون استفاده کنید و به راحتی هر چه تمامتر سایتتون رو زیباتر کنید. این مجموعه شامل افکتهای زیر هست :

  • 2D Transitions

  • Background Transitions

  • Icons

  • Border Transitions

  • Shadow and Glow Transitions

  • Speech Bubbles

  • Curls

میبینید که روی هر لینکی که هاور میکنید ، افکت زیبایی رخ میده.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به hover-min.css نیاز داریم. من این فایل رو در انتهای این مطلب قرار دادم و میتونین از اون استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایل مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم.

تا اینجا یک لینک قرار دادیم و کلاس btn رو به اون نسبت دادیم. کدهای CSS ساده مربوط به اون رو هم قرار دادیم ، تا بهش اعمال بشه. حالا باید برید به این صفحه و ببینید که از چه افکتی میخواین استفاده کنید.

hover1

مثلا من افکت Grow رو انتخاب کردم. چون فایل hover-min.css رو در قسمت head اضافه کردم ، پس برای اعمال شدن این افکت بر روی لینک مورد نظر ، کافیه که کلاس hvr-grow رو به لینک مورد نظر اضافه کنید ، بصورت زیر :

حالا اگر در خروجی ببینید ، افکت بر روی لینک اعمال شده. بهمین راحتی. ولی بحثی که پیش میاد اینه که ، با این که این فایل فشرده است ، اما حجم اون خیلی بالاست و تقریبا 100KB هست. برای همین میتونین کد مربوط به افکتهایی رو که لازم دارین copy کنید و در فایل CSS خودتون Paste کنید. با اینکار سایتتون سبکتر و منظمتر میشه.

برای اینکار فایل hover.css که در انتهای مطلب قرار دادم رو باز کنید و کدهای مربوط به Grow رو انتخاب و به فایل CSS خودتون اضافه کنید :

hover2

بعد از اون دوباره باید کلاس hvr-grow رو به لینک مورد نظر اضافه کنید ، تا افکت بهش اعمال بشه.

اگه دقت کرده باشین ، میبینین که همه کلاسها با hvr- شروع شده.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

comment دیدگاه کاربران
احسان

بسیار زیبا

به امید موفقیت روزافزون 7لرن

محمد اسفندیاری

موفق باشید

مهديپور

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

محمد اسفندیاری

دوست عزیز چونکه مبحث ساده ای بود ، ساده بیان کردم
اگر جاییشو مشکل دارین یا نفهمیدین ، بگین تا بیشتر توضیح بدم
توضیحات من فقط نقش یک start رو داره و راه رو بهتون نشون میدم ، برای آشنایی بیشتر باید خودتون به سایت مورد نظر مراجعه کنید و توضیحات بیشتر رو مطالعه کنید
یا علی

امیر

سلام چطور میتونیم رنگ آبی hover رو تغییر بدیم؟

ببینید که به اون چه کلاسی تعلق گرفته ، بعد برید اونو در فایل CSS پیدا کنید ، در حالت before یا after اون رنگ background رو تغییر بدین
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.