3

Using HTML, is there any way to mix text colors according to the tags that each selection of text is inside of? This pseudocode describes the type of text color mixture that I'm trying to create:

<red>
    This text should be red.
    <blue>
        This text should be purple, since it is inside red and blue tags.
    </blue>
    This text should be red.
    <white>
        This text should be pink, since it is inside white and red tags.
    </white>
</red>

Is it possible to convert this pseudocode to valid HTML, so that the text colors are combined in this way?

Anderson Green
  • 30,230
  • 67
  • 195
  • 328

2 Answers2

4

Dynamically, not without scripting. You can, however, define some CSS rules.

.red {
    color: red;
}
    .red .white,
    .white .red {
        color: pink;
    }
    .red .blue,
    .blue .red {
        color: purple;
    }
.blue {
    color: blue;
}
    .blue .white 
    .white .blue {
        color: light-blue;
    }

etc.

This can be as simple or as complicated as you need.

EDIT: Here's the jsfiddle for demonstration purposes: http://jsfiddle.net/LhSk2/

Community
  • 1
  • 1
thordarson
  • 5,943
  • 2
  • 17
  • 36
  • This solves my problem. :) Is it also possible to do this using transparent image backgrounds (so that the images are mixed according to the surrounding tags?) – Anderson Green Jan 27 '13 at 04:38
  • You would need semi transparent PNG images and place them as backgrounds. – thordarson Jan 27 '13 at 04:42
1

If you don't have to support IE8 and below, you can use semi transparent RGBA colors:

<div style="background: red">
    This text should be red.
    <div style="background: rgba(128, 0, 128, .5)">
        This text should be purple, since it is inside red and blue tags.
    </div>
    This text should be red.
    <div style="background: rgba(255, 255, 255, .5)">
        This text should be pink, since it is inside white and red tags.
    </div>
</div>

Here's the fiddle: http://jsfiddle.net/zT8JD/

Joseph Silber
  • 214,931
  • 59
  • 362
  • 292