تبلیغات :
ماهان سرور
آکوستیک ، فوم شانه تخم مرغی ، پنل صداگیر ، یونولیت
فروش آنلاین لباس کودک
خرید فالوور ایرانی
خرید فالوور اینستاگرام
خرید ممبر تلگرام

[ + افزودن آگهی متنی جدید ]




نمايش نتايج 1 به 10 از 10

نام تاپيک: فٍید شدن رنگ بکگراند هنگام هاور شدن

  1. #1
    اگه نباشه جاش خالی می مونه tasnim68's Avatar
    تاريخ عضويت
    Apr 2009
    پست ها
    387

    پيش فرض فٍید شدن رنگ بکگراند هنگام هاور شدن

    سلام دوستان؛ دیدید بعضی جاها وقتی میرید روی لینک رنگ پس زمینه بجای تغییر لحظه ای بطور آرام تغییر می کنه و به نوعی fade میشه؟
    چطور میشه چنین کاری کرد؟

  2. #2
    کاربر فعال انجمن طراحی وب m.m.m5651's Avatar
    تاريخ عضويت
    Dec 2009
    محل سكونت
    Tehran
    پست ها
    1,496

    پيش فرض

    اینها بیشتر مربوط میشه به جاوا اسکریپت و این بخش:
    [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
    ولی با جی کوئری اگر بخواید درستش کنید:
    اول به body این استایل رو میدید:
    کد:
    برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
    که واضحه جای 999 رنگ رو انتخاب می کنید.
    بعد هم این کد جی کوئری:
    کد:
    برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

  3. این کاربر از m.m.m5651 بخاطر این مطلب مفید تشکر کرده است


  4. #3
    اگه نباشه جاش خالی می مونه tasnim68's Avatar
    تاريخ عضويت
    Apr 2009
    پست ها
    387

    پيش فرض

    یعنی در حقیقت رنگ عوض نمیشه؟

  5. #4
    کاربر فعال انجمن طراحی وب m.m.m5651's Avatar
    تاريخ عضويت
    Dec 2009
    محل سكونت
    Tehran
    پست ها
    1,496

    پيش فرض

    با این کد بله.

  6. #5
    پروفشنال peyman1987's Avatar
    تاريخ عضويت
    Sep 2006
    محل سكونت
    تهران
    پست ها
    995

    پيش فرض

    البته یه روش دیگه هم هست که میتونین برای رنگ پس زمینه المنت بجای رنگ Hex یا RGB معمولی از RGBA استفاده کنین که یه پارامتر شفافیت هم داره و میتونین بهش بگین که شفافیت رنگ پس زمینه چقدر باشه. حالا برای محو کردن تدریجی رنگ پس زمینه میتونین این مقدار شفافیت رو که بین 0 و 1 هستش رو به تدریج کم کنین تا از 1 برسه به صفر. با این روش دیگه خود المنت از صفحه حذف نمیشه و فقط رنگ پس زمینه ش محو میشه. اینم به نمونه کد برای مثال:

    کد:
    برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
    توضیحش هم میشه رنگ بکگراند المنت که rgb(22,43,247) هست که میشه یه رنگ آبی مثلا در ابتدای اجرای کد دارای شفافیت 1 یعنی کاملا واضحه و با هر بار اجرا شدن این کد مقدارش یک صدم کمتر از مقدار قبلیش میشه. یعنی با هر بار اجرا شدن این کد یک صدم رنگ پس زمینه شفاف تر میشه تا زمانی که به صفر میرسه و کد دیگه اجرا نمیشه. در کل این تابع 100 بار اجرا میشه با فاصله 40 میلی ثانیه و اجرای کلش هم 4 ثانیه طول میکشه. یعنی در عرض 4 ثانیه رنگ پس زمینه المنت شما کاملا محو میشه. این یه مثال کلی بود و برای قابل استفاده شدن باید روش کار بشه.

  7. #6
    پروفشنال Web Design's Avatar
    تاريخ عضويت
    Oct 2010
    محل سكونت
    Phpstorm
    پست ها
    602

    پيش فرض

    خب css3 چه مردی داره ؟
    چرا جاوا اسکریپت و جی کوئری ؟
    کد:
    برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
    این هم یک نمونه دیگه [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
    میتونی به جای background-color هر مقدار دیگری از دستورات css رو قرار بدی و افکت های زیبایی ایجاد کنی
    Last edited by Web Design; 19-01-2012 at 20:05.

  8. این کاربر از Web Design بخاطر این مطلب مفید تشکر کرده است


  9. #7
    پروفشنال peyman1987's Avatar
    تاريخ عضويت
    Sep 2006
    محل سكونت
    تهران
    پست ها
    995

    پيش فرض

    CSS3 هیچ موردی نداره و اتفاقا من خودم طرفدار سرسخت استفاده از CSS3 بجای جاواسکریپت هستم ولی اگه به کدی که گذاشتین بعنوان مثال نگاه کنیم اکثرشون فقط توسط مرورگرهای Webkit مثل Chrome و یه تعدادی کمیشون هم Safari ساپورت میشن و حتی فایرفاکس هم ساپورتشون نمیکنه و این مسلما چیزی نیست که مطلوب باشه.

    خب css3 چه مردی داره ؟
    چرا جاوا اسکریپت و جی کوئری ؟
    کد:
    برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
    این هم یک نمونه دیگه [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
    میتونی به جای background-color هر مقدار دیگری از دستورات css رو قرار بدی و افکت های زیبایی ایجاد کنی

  10. #8
    پروفشنال Web Design's Avatar
    تاريخ عضويت
    Oct 2010
    محل سكونت
    Phpstorm
    پست ها
    602

    پيش فرض

    همین کد رو دقیقا من برای سایت خودم نوشتم و الان توی فایرفاکس داشتم تست میکردم و 100% بی نقص عمل کرد .
    ورژن فایرفاکس 9.0.1

  11. #9
    پروفشنال peyman1987's Avatar
    تاريخ عضويت
    Sep 2006
    محل سكونت
    تهران
    پست ها
    995

    پيش فرض

    همین کد رو دقیقا من برای سایت خودم نوشتم و الان توی فایرفاکس داشتم تست میکردم و 100% بی نقص عمل کرد .
    ورژن فایرفاکس 9.0.1
    کدتون یه ایرادی داشت که اجرا نمیشد! background رو اشتباها backgroun نوشته بودین.

    بله درسته کار میکنن ولی منظور من این بود که خود transition که جزو CSS3 هست فعلا توسط هیچ مرورگری ساپورت نمیشه. و بقیه مرورگرها هم هر کدوم یه جایگزین رو ساپورت میکنن. فایرفاکس 3 و انواع ورژن های IE هم جزو مرورگرهایی هستن که این موضوع رو اصلا ساپورت نمیکنن. اطلاعات بیشترش رو هم اینجا ببینین:

    [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

  12. 2 کاربر از peyman1987 بخاطر این مطلب مفید تشکر کرده اند


  13. #10
    پروفشنال Web Design's Avatar
    تاريخ عضويت
    Oct 2010
    محل سكونت
    Phpstorm
    پست ها
    602

    پيش فرض

    شاید شما درست میگیذ وکم تجربگی منه
    امید روزی که همه مرورگر ها با هم هماهنگ بشن و اینقدر مارو اذیتنکنند
    کد اصلاح شد

  14. این کاربر از Web Design بخاطر این مطلب مفید تشکر کرده است


Thread Information

Users Browsing this Thread

هم اکنون 1 کاربر در حال مشاهده این تاپیک میباشد. (0 کاربر عضو شده و 1 مهمان)

User Tag List

قوانين ايجاد تاپيک در انجمن

  • شما نمی توانید تاپیک ایحاد کنید
  • شما نمی توانید پاسخی ارسال کنید
  • شما نمی توانید فایل پیوست کنید
  • شما نمی توانید پاسخ خود را ویرایش کنید
  •