<script type="text/javascript" src="https://www.thomasfrank.se/downloadableJS/gradientText.js"></script>
<script>
function rgb2hex(rgb){
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
}
function redraw()
{
var start_color_el = document.getElementById('start_color');
var i = start_color_el.selectedIndex;
var start_color = rgb2hex( start_color_el.options[i].style.backgroundColor );
var end_color_el = document.getElementById('end_color');
var i = end_color_el.selectedIndex;
var end_color = rgb2hex( end_color_el.options[i].style.backgroundColor );
tested_disp = document.getElementById('tested_disp');
gradientText.set(tested_disp, start_color, end_color);
}
</script>
<table>
<tr>
<td colspan="2"><b>Градиентный цвет текста</b></td>
</tr>
<tr>
<td colspan="2">(задается 1 раз)</td>
</tr>
<tr>
<td>Стартовый цвет:</td>
<td>
<select id="start_color" style="{width:70px;height: 25px;}" onchange="redraw();">
<option value="0" selected style="background:#800000; color:#800000">Бордовый</option>
<option value="10" style="background:#2e8b57; color:#2e8b57">Морской волны</option>
<option value="11" style="background:#808000; color:#808000">Оливковый</option>
<option value="12" style="background:#ff8c00; color:#ff8c00">Оранжевый</option>
<option value="13" style="background:#da70d6; color:#da70d6">Орхидея</option>
<option value="14" style="background:#cd853f; color:#cd853f">Перу</option>
<option value="15" style="background:#800080; color:#800080">Пурпуровый</option>
<option value="16" style="background:#ff1493; color:#ff1493">Розовый</option>
<option value="17" style="background:#808080; color:#808080">Серый</option>
<option value="18" style="background:#0000ff; color:#0000ff">Синий</option>
</select>
</td>
<td>Конечный цвет:</td>
<td>
<select id="end_color" style="{width:70px;height: 25px;}" onchange="redraw();">
<option value="0" selected style="background:#800000; color:#800000">Бордовый</option>
<option value="10" style="background:#2e8b57; color:#2e8b57">Морской волны</option>
<option value="11" style="background:#808000; color:#808000">Оливковый</option>
<option value="12" style="background:#ff8c00; color:#ff8c00">Оранжевый</option>
<option value="13" style="background:#da70d6; color:#da70d6">Орхидея</option>
<option value="14" style="background:#cd853f; color:#cd853f">Перу</option>
<option value="15" style="background:#800080; color:#800080">Пурпуровый</option>
<option value="16" style="background:#ff1493; color:#ff1493">Розовый</option>
<option value="17" style="background:#808080; color:#808080">Серый</option>
<option value="18" style="background:#0000ff; color:#0000ff">Синий</option>
</select>
</td>
<td><div id="tested_disp">Съешь еще этих мягких французских булочек</div></td>
</tr>
</table>