Bloggin' the web, one post at a time

Elusive Style

Molly’s has a ‘I wish I had…’ post and it reminded me of once wishing I had something like ‘invert’ just like the CSS values ‘auto’ and ‘inherit’.
When I change a background colour I’d like not to have go and change the text colour as well. Usually it’s better to tweak the colour to get the best result but in some cases it doesn’t require such fine tuning.

2011-09-14 / 10:32

3 Comments

By Liam Goodacre
09/29/2011 08:27 AM
Colour is an interesting one. You could specify which components of the colour to invert. For example:
.element {
invert: color-hue, background-lum, border-color;
}
To invert the text colour's hue and the background lightness, 'color' by default could invert based on opposite colour (red->cyan, blue->yellow, etc...). Maybe even a color-paint value, which uses the paint colour wheel instead (red->green, blue->orange, etc...)
By Rob
09/29/2011 06:41 PM
United Kingdom
Hmm... sounds interesting on things like colours... but sounds an absolute nightmare when dealing with layout.

Inverting a left float right and a right float left.... ugghh.... You'd have to switch back and fourth to figure out what's doing what...
By Egor Kloos
10/05/2011 04:38 PM
Rotterdam, The Netherlands, Europe, Earth etc...
(Just back from holiday, so I'm very late with moderating. My apologies.)

@ laim:
Yes, with colour you could have many options. CIE-lab options would be great.

@Rob:
Layout would indeed be tricky, if not downright nasty. As an override it would need to be specific and possibly not inheritable. Still a bit funky to debug.
Commenting is not available in this channel entry.