Is there a way to tint an entire web page a certain colour?

January 10, 2005 12:00 AM

Is there a way to tint an entire web page a certain colour? As in, not actually altering the images and other content to be tinted that colour, just for the content to look that way when viewed on that page. It sounds to me like something that could be done with CSS but I'm really not sure. Google's results aren't turning up quite what I'm looking for, although maybe I just suck at finding the right words for this query.
posted by DyRE to Computers & Internet (8 answers total)

Would this work?

filter: [chroma] ([something])
posted by SAC at 12:05 AM on January 10, 2005

Using the filter element, though nifty, requires an SVG compatible browser. Further, though they can be applied to container elements they won't work - to my knowledge - on a standard (gif, jpeg) image.

For the time being, SVG isn't supported well. When it is, we're going to see all sorts of irritating implementations. It'll be the new "blink" tag . . .

In any case, you can read all about it at the W3C.
posted by aladfar at 12:27 AM on January 10, 2005

(1) unplug your monitor
(2) snip one of the pins on the cable with a wire cutter
(3) plug back in
(4) observer

repeat 1-4 until the color changes.

Note: above instructions will lead to the destruction of your monitor. You have been warned.
posted by Kwantsar at 12:39 AM on January 10, 2005

Best answer: DyRE, one way is to use alpha opacity on a css layer over the content (better, though, if the text appears on or over that layer), but I don't think you can count on it to work in every single browser. If you did use it, it would probably look something like this:

background-color:#c66;opacity:.20;filter:alpha(opacity=20);-moz-opacity: .20;

which should work in IE6 (not sure about other IE) and mozilla browsers, at least. The problem is that in any browser that doesn't do the opacity thing, it would probably render as a solid background color. Anyway, I've used a 70% opacity on the main text area of my user profile, so you can see what it looks like there.
posted by taz at 12:49 AM on January 10, 2005

that is one swanky profile page, taz.
posted by falconred at 1:14 AM on January 10, 2005

If this isn't one of your pages (and thus you don't have access to the source to add extra layers), it sounds like you need to write your own stylesheet (possibly marking things as !important), thus overriding the author's code. All modern browsers support user defined style sheets.

Can't remember where the Moz/FF or Opera settings are (I don't have them at work, ggrr), but in IE, go to Tools > Internet Options > General > Accessibility to add your own.
posted by TheDonF at 1:20 AM on January 10, 2005

There's one funky way you can do it in any good Web browser (not IE). Make a PNG file in the color of your choice, set it to 50% alpha, and then make a DIV and stretch that PNG across the entire page. It's not going to be exactly what you want though, but it's a hack ;-)
posted by wackybrit at 6:18 AM on January 10, 2005

Response by poster: taz, that's perfect! Thank you so much.

Kwantsar, sounds fun, now I just need the same thing to automatically happen to anyone who views the page.
posted by DyRE at 7:21 PM on January 10, 2005