Mixing text colors in HTML
Using HTML, is there a way to mix the text colors according to the tags that each text element has? This pseudocode describes the type of text color blend I am 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 that way?
+3
source to share
2 answers
Dynamically, not without scripting . However, you can 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;
}
and etc.
It can be as simple or as difficult as you need it to be.
EDIT: Here's a jsfiddle for demo purposes: http://jsfiddle.net/LhSk2/
+4
source to share
If you don't need 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 a fiddle: http://jsfiddle.net/zT8JD/
+1
source to share