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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!
4 7570 ۲۵ آبان ۹۳ s.alifarrokh

رویداد هاور (Hover) همیشه یکی از جذابترین و مهم ترین عناصر زیبایی وبسایت ها بوده و از این رو همواره توجه خاصی به اون شده و اکنون شاهد این هستیم که روزانه به تعداد افکت های هاور شدن افزوده میشه و طراحان زیادی در تلاش هستن تا بتونن بهترین افکت ها رو خلق و استفاده بکنن.در این مطلب برای شما سری اول از یه مجموعه 30 تایی از جدید ترین افکت های هاور شدن تصاویر رو اماده کردم.

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

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

- ابتدا استایل های این افکت ها رو به صفحه پیوست کنید.

د ر این فایل Css استایل تمامی این 15 تا افکت (سری اول افکت ها) وجود داره و به همین به دلیل بهتره که استایل هایی که مورد نیاز نیست رو حذف کنیم.استایل افکت ها شامل دو بخش میشه،یه بخش که عمومی هست و برای تمامی این افکت ها مورد نیاز هست و یه بخش هم استایل های جداگانه هر افکت.

استایل های عمومی با این دو تا کامنت مخشص شدن:

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

در اینجا Lily اسم افکت ما هست.حالا به عنوان مثال اگر ما فقط همین افکت رو لازم داریم این رو نگه میداریم و استایل بقیه افکت ها رو حذف میکنیم.

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

- اما کد های html مربوط به هر افکت.هر افکت با تگ figure شروع میشه و کد هاش داخل این تگ قرار میگیره اما برای استفاده باید کل کد های افکت (همین تگ figure) رو داخل تگ div با کلاس grid قرار بدیم.مثال:

- چون افکت ها یه کم به خصوص هستن،احتمال اینکه نیاز به ویرایش استایل ها داشه باشین زیاد هست:)

ببخشید اگه سرتونو درد اوردم،خواستم طوری باشه که همه بتونن از این افکت ها استفاده کنن.اگر احتمالا به مشکلی برخوردید در قسمت نظرات و یا انجمن مطرح کنید تا رسیدگی بشه.موفق باشین

نوع کد رايگان

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

  • ‏‏

    خیلی عالی بود . دستتون دردنکنه .

  • ‏‏
    مدریت راشاوب(۲۷ فروردین ۱۳۹۴)

    عالی بود !
    بسیار تشکر

  • ‏‏

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

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram