Creating a global black and white (grey scaled) theme - CSS-Tricks

This topic is empty.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
June 30, 2015 at 5:04 pm #204424

farazbz
Participant

Hi,
I wanted to create a global css that will turn every color in a page to a grey scaled version so the page looks black and white. I am not really familiar with css coding. It would be great if anyone could tell if it is possible and how. I am using the extension stylish on my safari and it accepts css code.
Thanks

June 30, 2015 at 11:34 pm #204428

Shikkediel
Participant

I guess a grayscale filter on body would qualify for that :

https://css-tricks.com/almanac/properties/f/filter/

July 1, 2015 at 12:04 am #204429

farazbz
Participant

Shikkediel thanks for the immediate response. I really admire your help, but what if I didn’t want the images to be effected by it?

July 1, 2015 at 1:51 am #204433

Shikkediel
Participant

I think I’ll need to investigate a bit… there doesn’t seem to be a straightforward solution.

July 1, 2015 at 1:55 am #204434
Paulie_D
Member
Shouldn’t that be
```
body :not(img) { /* you want the children not the body itself*/
filter: grayscale(100%);
}
```
or
```
body *:not(img) { 
filter: grayscale(100%);
}
```
July 1, 2015 at 2:02 am #204435

Paulie_D
Member

Nope…it has issues….you can’t selectively apply greyscale it’s like opacity the children inherit it…so if the image is in a wrapper…it gets greyscaled.

http://codepen.io/Paulie-D/pen/YXeqGv

July 1, 2015 at 2:04 am #204436

Shikkediel
Participant

You are right, both about the (removed) CSS and the inheritance issue. For Safari, I think it needs a -webkit- prefix by the way.

July 1, 2015 at 2:15 am #204438

Paulie_D
Member

Prefixes….Soooo last year! ;)
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘Design’ is closed to new topics and replies.