Is there a better practice for achieving this? Currently I'm using an opaque red div of width/height 100%, higher z-index and pointer-events: none which allows everything underneath to work.

Also I'd like to be able to dim the entire document, is there any sort of brightness property I could apply or would I again be better off putting an opaque black layer over everything?

Just wondering if I'm going about this the wrong way. I'd also be interested in js/jquery solutions if they were more efficient, I'm not bothered about patibility with older browsers either.

** If anyone could tell me the easiest way to make everything black and white also I'd really appreciate it.

Is there a better practice for achieving this? Currently I'm using an opaque red div of width/height 100%, higher z-index and pointer-events: none which allows everything underneath to work.

Also I'd like to be able to dim the entire document, is there any sort of brightness property I could apply or would I again be better off putting an opaque black layer over everything?

Just wondering if I'm going about this the wrong way. I'd also be interested in js/jquery solutions if they were more efficient, I'm not bothered about patibility with older browsers either.

** If anyone could tell me the easiest way to make everything black and white also I'd really appreciate it.

• javascript
• jquery
• html
• css

4 Answers 4

A WebKit-only feature:

-webkit-filter: grayscale; /* Turn everything black and white */
-webkit-filter: brightness(20%); /* Make stuff brighter */

You can use hue-rotate to change the hue, depending on what your general color scheme is. If it's all different, you'll need a custom filter, which is more difficult and which I'm in the process of doing now.

Here's more information.

You can use

body {
 opacity: 0.8; // Any value between 0 & 1 where is 0 in invisible & 1 is 100% opaque
 }

But since that would be on white background I am not sure it would give you desired output. If you wish to add color filter to entire screen, you'll have to add overlay and like you said none of the stuff underneath won't work.

-webkit- CSS attributes would work only for Chrome & safari.

It looks like you want the entire page (including "underlying" DOM elements) to be a particular hue, which is not possible by just changing the body color or opacity. What you want is something like the BlockUI plugin for jQuery. If I'm not mistaken there is an option to still allow the user to interact with page elements when the UI is "blocked".

...is there any sort of brightness property I could apply or would I again be better off putting an opaque black layer over everything?

The easiest way would be: $('body').css('opacity', '0.3'); . If you want to change background color you can apply that to the html-node: $('html').css('background', '#000');

** If anyone could tell me the easiest way to make everything black and white also I'd really appreciate it.

In Internet Explorer you can use windows filters. Use -webkit-filter: grayscale; for Chrome/Safari. It might be possible to achieve in Mozilla and Opera as well, but I'm not sure.