градиенты, использующие только HTML и CSS и JavaScript?

Question

Есть ли способ сделать градиенты только в css / html / javascript, которые будут работать во всех основных браузерах? (MS IE 5+, Firefox, Opera, Safari)?

Редактировать: я хотел бы сделать это для фона (заголовок, основная панель, боковые панели). Также хотелось бы иметь вертикальные градиенты линий.

Редактировать: после прочтения ответов давайте откроем это также для решений Javascript, поскольку HTML / CSS сам по себе затрудняет достижение.

Answer 1

Я делал это раньше как трюк, используя javascript, например:

var parent = document.getElementByID('foo');
for(var i=0; i< count; i++) {
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.width='100%';
    div.style.height = 1/count+"%";
    div.style.top = i/count+"%";
    div.style.zIndex = -1;
    parent.appendChild(div);
}

Если ваше требование просто иметь градиент, вам действительно следует использовать градиентное изображение, установленное в качестве background-image в css. В моем случае я также анимировал цвета и положение градиента. Сейчас я не могу поручиться за кросс-браузер (для начала, убедитесь, что к родителю применена какая-то позиция, иначе он не будет контейнером позиции для абсолютного позиционирования.

Answer 2

Мне неясно, какие детали реализации вы ищете (например, фон или просто граница вдоль боковой части окна и т. Д.); Тем не менее, это возможно, хотя и немного утомительно.

Одним из примеров, который приходит на ум, было бы иметь элементы уровня n-блоков, такие как div, и затем дать им небольшую высоту (например, пару пикселей), а затем постепенно менять цвет фона каждого последующего элемент.

Answer 3

Я использую генератор градиентного кода CSS от colorzilla: http://www.colorzilla.com/gradient-editor/

У него есть полифилы для IE - но не уверен, как далеко он уходит.

Answer 4

Есть много способов создать градиент сейчас. 1. Вы можете создать изображение для него. 2. Используйте CSS3 Gradient, он может быть линейным, радиальным и повторяющимся.

Синтаксис для линейного:

linear-gradient: ([angle | to ] ,[ [color-stop], [color-stop]+); 

Синтаксис для радиального:

linear-gradient: ([angle | to ] ,[ [color-stop], [color-stop]+); 

Для IE6 до IE 9 мы можем использовать свойство фильтра или вы также можете использовать CSS3Pie .

Ниже приведены некоторые ссылки, которые помогут:

Мозилла MDN

CSS3File

Answer 5

Я думаю, что короткий ответ - нет.

Вы можете создать нечто, похожее на градиент, используя только CSS, но затем использовать его как фоновое изображение ... Я думаю, это немного подталкивает.

Редактировать (чувствуя себя глупо)

Я нашел решение: http://en.wikipedia.org/wiki/JPEG