Blood

تغییر عکس هنگام رفتن موس بر روی آن

12 پست در این موضوع قرار دارد

با سلام چگونه میتونم یک عکسی که مثلا به رنگ طوسی هست با رفتن موس بر روی آن به رنگ طوسی پرنگ در بیارم

برای مثال به لینک زیر رفته و در فودر سایت 4 آیکون فیسبوک ، یویتر ، RSS و... نگاه کنید

به این صورت

http://www.templatem...demo/45593.html

و اگر کدی هم هست که عکس رو سیاه سفید کنیم بعد وقتی موس روش میره رنگی بشه؟ اینم لطفا بگید با تشکر از دوستان

ویرایش شده در توسط M.At
0

به اشتراک گذاری این پست


لینک به پست

سلام

مورد اولتون رو باید با css انجام داد. خاصیت opacity میتونه شفافیت رو تعیین کنه. بدین صورت که اول به عکس مورد نظرتون یک کلاس تعریف میکنید و در استایل:

opacity: 0.5;

رو بهش بدید و به hover همون کلاس مقدار:

opacity: 1;

رو بدید.برین شکل چیزی مثل همون نمونه ای که دادید درست میشه. 1 بیشترین شفافیت و 0 نامرئی کامل است.

در مورد مورد دومتون هم اینجا ها شاید به کارتون بیاد:

http://mihanlearn.com/articles/%D8%AA%D8%A8%D8%AF%DB%8C%D9%84-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1-%D8%B1%D9%86%DA%AF%DB%8C-%D8%A8%D9%87-%D8%B3%DB%8C%D8%A7%D9%87-%D8%B3%D9%81%DB%8C%D8%AF-%D8%A8%D8%A7-css/

5

به اشتراک گذاری این پست


لینک به پست

و اگر بخوام از سیاه و سفبد به رنگی ببرم به چه صورت هست ؟

0

به اشتراک گذاری این پست


لینک به پست

و اگر بخوام از سیاه و سفبد به رنگی ببرم به چه صورت هست ؟

دوست عزیز عکس سیاه سفید رو که نمیشه با CSS رنگی کرد :D شاید بشه بهش یک طیف رنگی ثابت داد .

اگر منظورتون اینکه هنگام سیاه سفید شدن دوباره به حالت اول برگرده و رنگی بشه میتونید Hover تعیین کنید .

توی لینک هایی که بالا قرار داده شده به صورت کامل آموزش داده شده .

0

به اشتراک گذاری این پست


لینک به پست

بله منظورم این هست که یک عکس رنگی سیاه سفید شود با css و وقتی موس روی آن میرود به صورت رنگی نمایش یده

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

سلام دوست عزیز

ببینید یه توضیحی عرض کنم ; خاصیت opacity مربوط به شفافیت تصاویر (کمرنگ شدن) هست ، مثلا شما خاصیت opacity:0.5 رو به تصویریتون میدید اینکه با hover شدن تصویر شما کمرنگ میشه یا پررنگ یا تغییر رنگ میده ربطی به opacity نداره چون شما با دادنه این خاصیت عکستون رو کمرنگ کردید و بازتابی از پس زمینه عکس در تصویر ایجاد میکنید!

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

نمایش سیاه و سفید:


img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

ویرایش شده در توسط alireza.nh
2

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

ببینید من از این دستور استفاده کردم

http://mihanlearn.co...اه-سفید-با-css/ در این سایت

عکسم رو سیاه سفید کردم با این کد حالا میخوام وقتی موس روش رفت عکس دوباره برگرده به حالت رنگی ؟


img.desaturate {
filter: grayscale(1%);
-webkit-filter: grayscale(100%); -moz-filter: grayscale(1%);
-ms-filter: grayscale(1%); -o-filter: grayscale(1%);
filter: url(desaturate.svg#greyscale);
opacity: 0.4;
}

img.desaturate img:hover {
opacity: 0.4;
}

این عکسم هست


<div class="Apps"><a class="tooltip" title="دانلود برای اندروید" href="#"><img class="desaturate" src="<?php bloginfo('template_directory'); ?>/images/AndroidApp.png" alt="اندروید" border="0"/></a></div>

ویرایش شده در توسط M.At
0

به اشتراک گذاری این پست


لینک به پست

img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
-moz-transition: all 1.8s linear .2s;
-o-transition:all 1.8s linear .2s;
-webkit-transition: all 1.8s linear .2s;
transition: all 1.8s linear .2s;
}
img.desaturate:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);

}

2

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)


img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
-moz-transition: all 1.8s linear .2s;
-o-transition:all 1.8s linear .2s;
-webkit-transition: all 1.8s linear .2s;
transition: all 1.8s linear .2s;
opacity: 0.4;
}
img.desaturate:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
}

کد استفاده شده

و clss استفاده شده


<div class="Apps"><a class="tooltip" title="دانلود برای اندروید" href="#"><img class="desaturate" src="<?php bloginfo('template_directory'); ?>/images/AndroidApp.png" alt="اندروید" border="0"/></a></div>

اما تغییری انجام نمیشه ؟

این هم svg استفاده شده


<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="greyscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"/>
</filter>
</svg>

نام svg هم desaturate.svg هستش نه در فایر فاکس و نه در کروم عمل میکنه

ورژن فایرفاکس 30 هستش

ویرایش شده در توسط M.At
0

به اشتراک گذاری این پست


لینک به پست

svg اینجا چی کاره است من متوجه نشدم

تا جایی که من اطلاع دارم کدهای webkit به صورت معمول روی فایرفاکس نصب نمی شند همینطور روی اپرا و مرورگرهای اپلی (سافاری) و کروم (مثل گوگل کروم) که شامل خانواده مرورگرهای اندرویید هم می شند ازشون پشتیبانی می کنند

من کدهاتون رو از لحاظ درست نوشتن مقدار و جای خواص ویرایش کردم و در جریان کل بحث هم نیستم شاید خوندن این مطلب بهتون کمک کنه

http://mandegarweb.com/wordpress/wordpress-tools/%DA%98%D9%86%D8%B1%D8%A7%D8%AA%D9%88%D8%B1-%D9%BE%D8%A7%D8%B1%D8%B3%DB%8C-%D9%88%D8%A8-%DA%A9%DB%8C%D8%AA/

و ژنراتور وب کیت

1

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

من از این آموزش استفاده کردم ؟

آموزش سیاه سفید کردن

اینجوری که شما تعریف کردین من متوجه نشدم حالا پشتیبانی میشه یا خیر؟ من سایتم html 5 هم هست. من العان تونستم عکسم رو سیاه سفید کنم از این کد اما مشکلی که اینجا هست عکس وقتی موس روش میره رنگی نمیشه ؟ با استفاده از کدی که دادید hover اما رنگی نشد ؟ من منظورم این هستش و این مشکل من هست نه اینکه عکسم سیاه سفبد نشه ؟؟؟؟؟؟؟

ویرایش شده در توسط M.At
0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

چگونه یک عکس رو سیاه سفید کنم و بعد از رفتن موس روی اون عکس به صورت آهسته به صورت اولیه برگرده ؟؟؟؟ من منظورم این هست و این رو میخوام ؟ :(

خودم کدش رو پیدا کردم

ویرایش شده در توسط M.At
0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری