Question

Update: The original phrasing of this question was vague so i’ve modified it to better express what i’m asking.

Lets say I have two divs

<div class='button'>A</div>
<div class='button green-button'>A</div>

with the following styles:

div.button {
  /* define position,  size, etc ...*/
  color:#FBB
  background-color:#F00
}

div.button.green-button{
  color:#BFB
  background-color:#0F0
}

In this example it was easy to shift the hue of the first button from red to green by simply changing shifting the values of color and background-color by 1 digit. If I wanted to make a blue button I could do the same shift again for a 3rd button.

However, in the case where I don’t want to shift completely from one color to the next its a bit trickier.

Additionally I want to color shift everything in the div, not just the background-color and color properties. So if I were to place and image in the div the colors of the image would get shifted as well.

Is this possible in CSS? If not can you do it in Javascript?

Answer 1

Since everyone is posting wild guesses, I’ll jump right into it.

You could achieve something using CSS filters (in your case hue-rotate)

Or the same using a CSS preprocessor like LESS.