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

Blood · خرداد 93

کد سیاه سفید کردن عکس


img.desaturate {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><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>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    -webkit-transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
	    -ms-transition: all 0.5s ease;
		 -o-transition: all 0.5s ease;
		    transition: all 0.5s ease;
   opacity: 0.4;
}
img.desaturate:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
opacity: 1;
}

از این css به شکل زیر باید استفاده کرد


<div ><a href="#">
<img class="desaturate" src="<?php bloginfo('template_directory'); ?>/images/WinPhoneApp.png" border="0"/></a></div>

به جای "/images/WinPhoneApp.png" میتونید آدرس عکس خود را قرار دهید.

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

البته باید از html5 استفاده کنید

که برای ارتقاع به html 5 باید


<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="UTF-8" /

این 3 خط کد را قرار بدید به جای


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

باز تو انجمن بگردید بیشتر اطلاعات کسب میکنید.

با فایر فاکس 30 چک کردم سازگاری داره

با کروم هم همینطور مشکلی نداره

با اینترنت اکسپلورر 8 هم چک کردم سازگاری داره اما به زیبایی کروم و فایرفاکس نیست.اما با ie 9 مشکلی نداره

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

Black_Sky · خرداد 93

ممنون

اگر آموزش بود که باید در بخض آموزش ها مطرح میشد

ورود

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

پست های پیشنهاد شده

Blood 23

لینک به ارسال

Black_Sky 6349

لینک به ارسال

به گفتگو بپیوندید

فهرست بخش ها

فعالیت ها