Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Залить горизонтальным градиентом полоску h=2 px

Автор: Гость_student 19.10.2005, 16:12

Делема: нужна горизонтальная полоска высотой 2 px. Рисунком не получится, потому что полоска - элемент таблицы с шириной, заданной в %.

В общем, градиентная горизонтальная линия, длина которой изменяется вместе с таблицей. Цвет изменяется от синего до серого...

Фильтры не во всех браузерах видно, поэтому начал делать через javascript.

Вот есть градиент бело-черный вертикальный во все окно:

Код


<script type="text/javascript"><!--//--><![CDATA[//><!--
function leftPad(x) {
       return (x.length < 2) ? "0"+x : x;
}
function hex(x) {
       return leftPad(x.toString(0x10).toUpperCase());
}
for (i=0; i<256; i++) { 
       var div = document.createElement("div");
       div.style.backgroundColor = "#"+hex(i)+hex(i)+hex(i);
       div.style.fontSize        = "0px";
       div.style.lineHeight      = "0px";
       div.style.height          = "2px";
       document.body.appendChild(div);
}
//--><!]]></script>

А развернуть и запихнуть его в ячейку таблицы и задать цвет не получается...

Может кто-нибудь сталкивался с такой проблемой.... искал долго - не нашел ничего подобного.

Автор: Aliance 19.10.2005, 23:32

Цитата

задать цвет не получается

Не понял. Градиент - совокупность множества цветов... Какой не получается?

PS:
Пожалуйста, пользуйся кнопкой код!

Автор: Sardar 20.10.2005, 13:43

Гость_student зачем такие проблемы? сделай ячейку во все столбцы, положи в background-image свой градиент. Посмотри как на этом форуме градиентные полоски сделанны.

Автор: Гость_Student 20.10.2005, 22:41

Цитата(Aliance)

Не понял. Градиент - совокупность множества цветов... Какой не получается?

Да в том то и дело, что не получается никакой. Этот скрипт генерирует черно-белый вертикальный градиент:

Код


for (i=0; i<256; i++) { 
       var div = document.createElement("div");
       div.style.backgroundColor = "#"+hex(i)+hex(i)+hex(i);
       div.style.fontSize        = "0px";
       div.style.lineHeight      = "0px";
       div.style.height          = "2px";
       document.body.appendChild(div);
}

а нужен "серо-синий" горизонтальный (в ячейке таблицы)...

Цитата(Aliance)

Пожалуйста, пользуйся кнопкой код!

оки

Цитата(Sardar)

Гость_student зачем такие проблемы? сделай ячейку во все столбцы, положи в background-image свой градиент. Посмотри как на этом форуме градиентные полоски сделанны.

Sardar, рисунком уже делал.... на этом форуме все градиентные полоски вертикальные. У меня все вертикальные градиенты тоже сделаны без проблем: http://www.rost-com.ru.

Автор: Sardar 20.10.2005, 23:19

Я бы залил слой синим, затем внутрь положил полупрозрачный .png с белым градиентом. Если колонка будет расширяться, то градиент будет отползать вправо, а "неидеальность" градиента будет не особо видна и даже немного походить на фичу smile

ИМXО дизайнеров нужно отправлять считать пупуляцию блох на Голопогосских черепахах, т.к. нарисованно не особо красиво, а градиент примитивно и сложно в реализации.

Автор: Гость_Student 21.10.2005, 02:14

Sardar, то что нужно! smile

как-то я запарился на реализации через яву

Респект

Автор: Aliance 21.10.2005, 15:02

Во-первых, не Java, а JavaScript!

А скрипт твой не работает потому, что appendChild вставляет ноду, в потом вставляет новую ноду, заменяю предыдущую (т.к. все идет в цикле). Если поищещь - более конкретно об этом говорил Sardar