مهمان عزیز خوش آمدید. ورود ثبت نام



امتیاز موضوع:
  • 2 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
افکت سیاه و سفید کردن تصویر

افکت سیاه و سفید کردن تصویر
سلام
در این آموزش می خوایم با استفاده از css کاری کنیم که تصویری رنگی با رفتن موس بروی اون سیاه و سفید بشه
تصویر: http://up.vbiran.ir/uploads/137336455416146_0my-bb.png   »»»  بعد از رفتن موس به روی تصویر  »»»    تصویر: http://up.vbiran.ir/uploads/137336455433137_1my-bb%20off.png
خب اول باید یک کلاس تعریف کنیم :



کد:
.black-white{

}

ما اسم کلاس مورد نظرمون رو black-white گذاشتیم
حالا باید بک گراند رو برای استایلمون تعریف کنیم :



کد:
.black-white{
background:url(http://up.vbiran.ir/uploads/137336455416146_0my-bb.png);
}
حالا باید طول و عرض تصویر بک گراندمون رو مشخص کنیم و وارد کنیم :



کد:
.black-white{
background:url(http://up.vbiran.ir/uploads/137336455416146_0my-bb.png);
width:48px;
height:48px;
}

حالا باید کلاس hover رو برای این کلاس تعریف کنیم :



کد:
.black-white:hover{

}

حالا تنها کافیه تصویر سیاه و سفید بک گراند مورد نظرمون رو وارد کنیم :



کد:
.black-white:hover{
background:url(http://up.vbiran.ir/uploads/137336455433137_1my-bb%20off.png);
}

در کد بالا نیازی به تعریف طول و عرض نیست
خب کار تمومه و با رفتن موس بروی تصویر مورد نظر تصویر رنگی ، سیاه و سفید میشه
کد کامل :




کد:
<style>
.black-white{
background:url(http://up.vbiran.ir/uploads/137336455416146_0my-bb.png);
width:48px;
height:48px;
}
.black-white:hover{
background:url(http://up.vbiran.ir/uploads/137336455433137_1my-bb%20off.png);
}
</style>
<div class="black-white"></div>


موفق باشید
منبع : my-bb.ir
تصویر: images/smilies/heart.gif
 

 


تصویر: http://toolsdl.com/banner2.gif
 
پاسخ
این جوری خوشگل تر هم میشهتصویر: images/smilies/smile.gif


کد:
<style>
.black-white{
background:url(http://up.vbiran.ir/uploads/137336455416146_0my-bb.png);
width:48px;
height:48px;
-moz-transition:all 0.5s ease-in;
-webkit-transition:all 0.5s ease-in;
-o-transition:all 0.5s ease-in;
-ms-transition:all 0.5s ease-in;
}
.black-white:hover{
background:url(http://up.vbiran.ir/uploads/137336455433137_1my-bb%20off.png);
}
</style>
<div class="black-white"></div>

 


تصویر: http://www.royalfuns.ir/forum/images/banner.gif
پاسخ
یکم بیشتر توضیح بدید

کلاسو کجا بسازیم؟

تو کدوم قسمت؟
پاسخ
فقط از کد کامل استفاده کن !


بــی تو تنهــــــام
پاسخ


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
Star آموزش گرد کردن تصاویر با استفاده از css KoG 0 2,109 ۰۹ تير ۱۳۹۲، ۰۴:۵۶ ب.ظ
آخرین ارسال: KoG
  آموزش Blur کردن متن با css KoG 0 1,427 ۰۹ تير ۱۳۹۲، ۰۴:۴۳ ب.ظ
آخرین ارسال: KoG

پرش به انجمن:


کاربران در حال بازدید این موضوع:

1 مهمان


درباره‌ی ما

گروه پشتیبانی فارسی مای بی بی My-BB.Ir در واپسین روزهای پاییز 1391 کار خود را در زمینه مای بی بی آغاز کرد. این گروه با توکل بر خدای منان و دانش فنی خود در تلاش است فعالیتی هرچند ناچیز در زمینه ارتقا و پشتیبانی مای بی بی انجام دهد.
تمامی حقوق برای وب‌سایت پشتیبانی فارسی مای بی‌بی (My-BB.Ir) محفوظ می‌باشد و هرگونه کپی‌برداری از آن شرعا حرام و قانونا غیرمجاز می‌باشد.
قدرت گرفته از مای بی‌بی - فارسی‌ساز: My-BB.Ir و IORA.Ir