illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

6 3310 ۱۵ بهمن ۹۳

در این مطلب میخوام یک ابزار بنام 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- شروع شده.

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 6 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    احسان(۱۶ بهمن ۱۳۹۳)

    بسیار زیبا

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

  • ‏‏
    مهدیپور(۱۷ بهمن ۱۳۹۳)

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

    • ‏‏
      محمد اسفندیاری(۱۷ بهمن ۱۳۹۳)

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

  • ‏‏

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

    • ‏‏
      محمد اسفندیاری(۲۶ تیر ۱۳۹۴)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram