PHP « Градиент цвета в таблице

Нужно выразить градацию цвета в таблице с рейтингом. К примеру есть таблица
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<table>
<tr><td><div rel="100">100</div></td></tr>
<tr><td><div rel="80">80</div></td></tr>
.....
<tr><td><div rel="0">0</div></td></tr>
<tr><td><div rel="-15">-15</div></td></tr>
<tr><td><div rel="-20">-20</div></td></tr>
...
<tr><td><div rel="-100">-100</div></td></tr>
 

Цвет переходить от зеленого (100) до красного (-100), "плавно" перетекая из одного цвета в другой.

Шаг смены оттенка примерно в 10 очков, т.е. 10 и 12 - будут иметь одинаковый цвет.
Как такое сделать? и как высчитать формулу цветов.

P.S. рейтинг не ограничивается рамками [-100, 100], но самая минимальная и максимальная точки имеют определенный заданный цвет.
0
css php style

1 ответов

2

Если полоска фиксированной ширины:
Вариант 1: Делаешь див с фоном-градиентом, а в него вставляешь второй див с непрозрачным фоном.
Вариант 2: Ну или 2 дива внутри одного, ширина левого и правого выражается в процентах и все.
Вариант 3: Делаешь фон сходящийся вниз влево треугольником, и задаешь с помощью background position.
Это лишь пара вариантов, накидал по-быстрому с КПК. Приеду домой - мож и с кодом напишу.

0