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

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

DyRE — Mon, 10 Jan 2005 00:00:17 -0800

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.

By: SAC

SAC — Mon, 10 Jan 2005 00:05:54 -0800

Would this work?

filter: [chroma] ([something])

By: aladfar

aladfar — Mon, 10 Jan 2005 00:27:20 -0800

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.

By: Kwantsar

Kwantsar — Mon, 10 Jan 2005 00:39:47 -0800

(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.

By: taz

taz — Mon, 10 Jan 2005 00:49:10 -0800

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.

By: falconred

falconred — Mon, 10 Jan 2005 01:14:01 -0800

that is one swanky profile page, taz.

By: TheDonF

TheDonF — Mon, 10 Jan 2005 01:20:46 -0800

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.

By: wackybrit

wackybrit — Mon, 10 Jan 2005 06:18:38 -0800

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 ;-)

By: DyRE

DyRE — Mon, 10 Jan 2005 19:21:17 -0800

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.