Home
| How to Turn Web Images to Grayscale (3 Ways) |
OverviewDescriptionI’ve always been a fan of grayscale images as I think they look more artistic. Many photo editors such as Photoshop let you turn colorful images into grayscale easily. There is even the option to tune the color depth and color tones. Unfortunately, it is less straightforward to do so on the Web due to the differences in browser capabilities.In this post, we are going to walk through some methods that we can use to turn images grayscale. We’ll also look into the stumbling blocks of each method and near the end, we will combine these methods to achieve a grayscale image that works across different browsers. InstallationCSS filterUsing CSS
Today,
We can add the following style rules to turn images grayscale with the filter property. You need to reply to the topic in order to see the code resources This code will take effect in IE6-9 and Webkit browsers (Chrome 18+, Safari 6.0+, and Opera 15+). (Note: IE10 dropped support for the legacy IE
JavaScriptThe second alternative is by using JavaScript, which technically should work in all browsers that have JavaScript enabled, including IE6 and below.You need to reply to the topic in order to see the code resources Using JavaScript method, we will be able to apply the Grayscale effect upon certain condition, such as when the image is on
SVGAnother way is by using an SVG Filter.All you need to do is create an SVG file, and put the following codes in it. Save and name the file to e.g.
You need to reply to the topic in order to see the code resources Then, using the
You need to reply to the topic in order to see the code resources You can also embed the codes directly within the CSS, like so. You need to reply to the topic in order to see the code resources This will return the same result. ConclusionTo have cross-browser support for the grayscale effect, we can put the abovementioned methods together, using the following code snippet. This code will apply the grayscale effect in Firefox 3.5+, Opera 15+, Safari, Chrome, and Internet Explorer.You need to reply to the topic in order to see the code resources We can utilize the above code along with the JavaScript method, and only provide CSS
Modernizr will add
Notes
|
| This resource belong to this community unless differently stated. No reproduction possible without our agreement, in accordance with article L122-1 of the CPI. |
