CODEWITHSUNDEEP
htmlcsscolorsbackground-color
Claudiu
Claudiu

Reputation: 229491

css: class that blends a color into existing background color?

I have a table with rows of alternating colors, e.g.:

<table>
  <tr class="even"><td></td><td></td></tr>
  <tr class="odd"> <td></td><td></td></tr>
  <tr class="even"><td></td><td></td></tr>
  <tr class="odd"> <td></td><td></td></tr>  
</table>

I want to highlight a bunch of the table cells, but in a different way if the cell is in an even or an odd row, as multiple vertically-stacked cells might be highlighted and I want to maintain the alteration of row color. What I first came up with was to just create two classes, highlight_even and highlight_odd, figure out in my javascript code (as this highlighting will be done dynamically) whether the row is even or odd, and set class accordingly, e.g.:

<table>
  <tr class="even"><td></td><td class="highlight_even"></td></tr>
  <tr class="odd"> <td></td><td class="highlight_odd"></td></tr>
  <tr class="even"><td></td><td></td></tr>
  <tr class="odd"> <td></td><td></td class="highlight_odd"></tr>  
</table>

The colors are very straightforward, though. I want to make highlight_even by blending green into the even color, and highlight_odd by blending the same green into the odd color. Is there any way to accomplish that in css, such that that same highlighted table could just look like this?

<table>
  <tr class="even"><td></td><td class="highlight"></td></tr>
  <tr class="odd"> <td></td><td class="highlight"></td></tr>
  <tr class="even"><td></td><td></td></tr>
  <tr class="odd"> <td></td><td></td class="highlight"></tr>  
</table>

Something like (in pseudocode):

td.highlight {
    background-color: blend #ff0 into existing background-color;
}

Upvotes: 3

Views: 3400

Answers (4)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

Hi you can used without define class in table

now you can define in tr color even or odd properties

as like this

 <table>

    <tr><td>This is one</td></tr>
    <tr><td>This is one</td></tr>
    <tr><td>This is one</td></tr>
    <tr><td>This is one</td></tr>
    <tr><td>This is one</td></tr>
    <tr><td>This is one</td></tr>
    <tr><td>This is one</td></tr>
</table>

tr:nth-child(odd) {background: red;}
tr:nth-child(even) {background: green;}`

and now check to live here

http://jsfiddle.net/n83K5/1/

Upvotes: 0

devstruck
devstruck

Reputation: 1507

Set the background-color of the highlight using rgba.

td.highlight {
    background-color: #ff0;
    background-color: rgba(255, 255, 0, 0.5);
}

(Where 0.5 is the opacity.)

Or for a more granular progressive enhancement

.odd .highlight{
    background-color: /*blend of #ff0 and .odd;*/
}
.even .highlight{
    background-color: /*blend of #ff0 and .even;*/
}
.odd .highlight, .even.highlight{
    background-color: rgba(255, 255, 0, 0.5);
}

Edited to address support for IE8-.

Upvotes: 8

Ryan
Ryan

Reputation: 1395

You might try something like this:

td.highlight {
    background-image: linear-gradient(rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 0) 100%);
}

This uses CSS3, so it won't work in older browsers. And you'll have to write rules for each browser (ie. background-image: -moz-linear-gradient: ..., etc.)

Upvotes: 0

Samantha Branham
Samantha Branham

Reputation: 7451

Why not just define the blending manually? You shouldn't need multiple highlight_* classes to do this, either. Assuming even rows are #ff0 and odd rows are #f0f and a plain white highlight:

tr.even td.highlight { background: #ff8; }
tr.odd td.highlight { background: #f8f; }

Upvotes: 2

Related Questions