• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Monkey Do

A Log of Coding Solutions

  • Home
  • Web Hosts
  • Tools
  • About

Gray / Grey Scale images

November 19, 2012 by Webhead

It is now easier than ever to make an image greyscale in CSS.

[prettify class=”xml”]

<svg xmlns=”http://www.w3.org/2000/svg”>
<filter id=”grayscale”>
<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>

[/prettify]

Then use this to make a greyscale:

[prettify class=”css”]

img {

filter: url(filters.svg#grayscale); /* Firefox 3.5+ */

filter: gray; /* IE6-9 */

-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */

}

[/prettify]

and then ungreyscale

[prettify class=”css”]

img:hover {

filter: none;

-webkit-filter: grayscale(0);

}

[/prettify]

 

Of course, i got this from stack overflow: http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css

keywords: css grey scale

 

Filed Under: Coding Tagged With: css, html 5

Primary Sidebar

Topics

apache apple block editor chrome cms css debug eCommerce embed firebug firefox git gmail goDaddy google hosting htaccess html html 5 IE crap image iPad iPhone javascript jquery linux localization mac os x ms sql mysql open source optimize php php 5.3 responsive rest api seo svg tinymce woocommerce wordpress wpengine xss yii youtube




Categories

  • Coding
  • Off the Shelf
  • Plugins
  • Random Thoughts
  • Server Stuff
  • Tools