ورود

نسخه کامل مشاهده نسخه کامل : فٍید شدن رنگ بکگراند هنگام هاور شدن


tasnim68
25-12-2011, 09:36
سلام دوستان؛ دیدید بعضی جاها وقتی میرید روی لینک رنگ پس زمینه بجای تغییر لحظه ای بطور آرام تغییر می کنه و به نوعی fade میشه؟
چطور میشه چنین کاری کرد؟
m.m.m5651
25-12-2011, 18:33
اینها بیشتر مربوط میشه به جاوا اسکریپت و این بخش:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
ولی با جی کوئری اگر بخواید درستش کنید:
اول به body این استایل رو میدید:

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

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
tasnim68
25-12-2011, 19:36
یعنی در حقیقت رنگ عوض نمیشه؟
m.m.m5651
25-12-2011, 19:54
با این کد بله.
peyman1987
19-01-2012, 13:49
البته یه روش دیگه هم هست که میتونین برای رنگ پس زمینه المنت بجای رنگ Hex یا RGB معمولی از RGBA استفاده کنین که یه پارامتر شفافیت هم داره و میتونین بهش بگین که شفافیت رنگ پس زمینه چقدر باشه. حالا برای محو کردن تدریجی رنگ پس زمینه میتونین این مقدار شفافیت رو که بین 0 و 1 هستش رو به تدریج کم کنین تا از 1 برسه به صفر. با این روش دیگه خود المنت از صفحه حذف نمیشه و فقط رنگ پس زمینه ش محو میشه. اینم به نمونه کد برای مثال:


برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

توضیحش هم میشه رنگ بکگراند المنت که rgb(22,43,247) هست که میشه یه رنگ آبی مثلا در ابتدای اجرای کد دارای شفافیت 1 یعنی کاملا واضحه و با هر بار اجرا شدن این کد مقدارش یک صدم کمتر از مقدار قبلیش میشه. یعنی با هر بار اجرا شدن این کد یک صدم رنگ پس زمینه شفاف تر میشه تا زمانی که به صفر میرسه و کد دیگه اجرا نمیشه. در کل این تابع 100 بار اجرا میشه با فاصله 40 میلی ثانیه و اجرای کلش هم 4 ثانیه طول میکشه. یعنی در عرض 4 ثانیه رنگ پس زمینه المنت شما کاملا محو میشه. این یه مثال کلی بود و برای قابل استفاده شدن باید روش کار بشه.
Web Design
19-01-2012, 16:39
خب css3 چه مردی داره ؟
چرا جاوا اسکریپت و جی کوئری ؟

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنیداین هم یک نمونه دیگه [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] articles%2Fcss%2Fcreate-a-color-changing-website-using-css3%2F)
میتونی به جای background-color هر مقدار دیگری از دستورات css رو قرار بدی و افکت های زیبایی ایجاد کنی
peyman1987
19-01-2012, 18:07
CSS3 هیچ موردی نداره و اتفاقا من خودم طرفدار سرسخت استفاده از CSS3 بجای جاواسکریپت هستم ولی اگه به کدی که گذاشتین بعنوان مثال نگاه کنیم اکثرشون فقط توسط مرورگرهای Webkit مثل Chrome و یه تعدادی کمیشون هم Safari ساپورت میشن و حتی فایرفاکس هم ساپورتشون نمیکنه و این مسلما چیزی نیست که مطلوب باشه.


خب css3 چه مردی داره ؟
چرا جاوا اسکریپت و جی کوئری ؟

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنیداین هم یک نمونه دیگه [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] articles%2Fcss%2Fcreate-a-color-changing-website-using-css3%2F)
میتونی به جای background-color هر مقدار دیگری از دستورات css رو قرار بدی و افکت های زیبایی ایجاد کنی
Web Design
19-01-2012, 18:11
همین کد رو دقیقا من برای سایت خودم نوشتم و الان توی فایرفاکس داشتم تست میکردم و 100% بی نقص عمل کرد .
ورژن فایرفاکس 9.0.1
peyman1987
19-01-2012, 19:10
همین کد رو دقیقا من برای سایت خودم نوشتم و الان توی فایرفاکس داشتم تست میکردم و 100% بی نقص عمل کرد .
ورژن فایرفاکس 9.0.1

کدتون یه ایرادی داشت که اجرا نمیشد! background رو اشتباها backgroun نوشته بودین.

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

[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
Web Design
19-01-2012, 20:06
شاید شما درست میگیذ وکم تجربگی منه
امید روزی که همه مرورگر ها با هم هماهنگ بشن و اینقدر مارو اذیتنکنند :46:
کد اصلاح شد