Web Analytics Made Easy -
StatCounter Table cell color fading with CSS - CodingForum

Announcement

Collapse
No announcement yet.

Table cell color fading with CSS

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Table cell color fading with CSS

    On msn.com, thay have headlining table cells in a different color, which is fading as you go down to the bottom.

    I took a look at the script of the defined css class, which said:

    .dt {padding: 1px 4px 2px 1px; color: #FFFFFF; }
    .dt {filter: progidXImageTransform.Microsoft.gradient(startColorstr=#CC6600, endColorstr=#E4AF79); background-color: #CC6600; }
    .dt {filter: progidXImageTransform.Microsoft.gradient(startColorstr=#963455, endColorstr=#C894A6); background-color: #963455; }
    .dt {filter: progidXImageTransform.Microsoft.gradient(startColorstr=#08A808, endColorstr=#7DD17D); background-color: #08A808; }
    .dt {filter: progidXImageTransform.Microsoft.gradient(startColorstr=#2B804C, endColorstr=#90BCA1); background-color: #2B804C; }
    .dt {filter: progidXImageTransform.Microsoft.gradient(startColorstr=#E8362B, endColorstr=#F39590); background-color: #E8362B; }
    .dt {filter: progidXImageTransform.Microsoft.gradient(startColorstr=#9E4040, endColorstr=#CC9B9B); background-color: #9E4040; }
    .dt {filter: progidXImageTransform.Microsoft.gradient(startColorstr=#CC6600, endColorstr=#E4AF79); background-color: #CC6600; }
    .dt {filter: progidXImageTransform.Microsoft.gradient(startColorstr=#684648, endColorstr=#B09FA0); background-color: #684648; }
    .dt {filter: progidXImageTransform.Microsoft.gradient(startColorstr=#FFBA00, endColorstr=#FFDB79); background-color: #FFBA00; }
    .dt {filter: progidXImageTransform.Microsoft.gradient(startColorstr=#D1A700, endColorstr=#FFDB79); background-color: #D1A700; }
    .dt {filter: progidXImageTransform.Microsoft.gradient(startColorstr=#9060B9, endColorstr=#C5ACDA); background-color: #9060B9; }
    .dt {filter: progidXImageTransform.Microsoft.gradient(startColorstr=#635190, endColorstr=#ADA4C5); background-color: #635190; }
    .dt {filter: progidXImageTransform.Microsoft.gradient(startColorstr=#446CC0, endColorstr=#9DB2DE); background-color: #446CC0; }
    .dt {filter: progidXImageTransform.Microsoft.gradient(startColorstr=#1835A0, endColorstr=#7B8BC9); background-color: #1835A0; }
    .dt {filter: progidXImageTransform.Microsoft.gradient(startColorstr=#0266A8, endColorstr=#7AAFD1); background-color: #0266A8; }


    I don't know anything about this above, so I would like to know if that's the only way to do it.

    Thanks.

  • #2
    Horrible, no? Loads of classes using non-validating IE proprietry muck.

    The easiest way to do it would be to grab an image of the gradient you want (easy to create) and tile it using background-image.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

    Comment


    • #3
      Filter: proprietry:garbage:no-thanks IE;

      I take no responsibility for the above nonsense.


      Left Justified

      Comment

      Working...
      X