3

My question extends this one:

Fade text too long inside HTML element

I am able to fade text lines (in a table cell in my case) by using a PNG that fades from transparent to the background color.

For my application though, I need the background color to be dynamic and scriptable. On hover, the table row background color changes and of course this makes the PNG "fader" image visible and ugly.

How can I achieve a dynamic / scriptable / styleable background color and still have my long text truncated with a fade?

Community
  • 1
  • 1
paperjam
  • 8,321
  • 12
  • 53
  • 79
  • 2 different png images? One for normal and one for hover. I think thats your best shot without thinking too much. You could use css3 gradients and pseudo element.. – elclanrs Mar 07 '12 at 11:33
  • No - when I have time I'll try the one-png-per-color solution to see if it works ok. Let me know if you're doing something similar and have a solution. – paperjam Mar 14 '12 at 14:00

2 Answers2

7

As I said in my comments, you can do this with a pseudo selector and some css3 gradients. Of course, this will only work on certain browsers.

http://jsfiddle.net/x4gSG/1/

elclanrs
  • 92,861
  • 21
  • 134
  • 171
0

Can't say for sure without seeing it, but it sounds like you should change the hover color.

i.e. a:hover {background-color:?}

SamStar
  • 335
  • 2
  • 17