Black and White Images

Black and White Images

Do you have a blog design that would look better with black and white images? Do you want to an easy way to test what it would look like without having to alter all the photos you already uploaded?

Then this post is for you.

With a small snippet of code that you put i your blogs Theme Designer you can easily transform all of your images – or at least the way web browsers render them. (Removing the code will change the way they look back to normal).

Even if you have a blog on another blog platform you can use this code as img is the universell term for an image on the internet. You just have to put it in your css template.

 

This is what you do

 

Open up your Theme Designer.

 

 

 

Go to Advanced – Add CSS and add the following code:

 

 

img {
-webkit-filter: saturate(0%);
filter: saturate(0%);
}

 

Click Apply to blog in the upper right corner and then return to your blog.
As you can see, all your images are now black and white.

There are other filters you can use if you want another effect. If you want your images shown in sepia you use this code:

img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}

 

Perhaps you want to increase the contrast and then you use this code. Use the percentage to get the effect you desire.

img {
-webkit-filter: contrast(110%);
filter: contrast(110%);
}

 

You can also combine two effects. Let’s say you want black and white images but you also want to increase the contrast. Then you can add both to the same code, like this:

img {
-webkit-filter: saturate(0%) contrast(110%);
filter: saturate(0%) contrast(110%);
}

 

No comma inbetween, but with a space.

 

Good luck!

Close Menu
2 Shares
+1
Share1
Tweet
Pin1
Stumble