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

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

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

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

11.12.2008 19:58:26
5 ОТВЕТОВ

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

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

2
11.12.2008 20:00:42
Проблема с такими подходами состоит в том, что они фундаментально смешивают структуру и представление.
rz. 11.12.2008 20:10:10
Да, я не согласен с тобой. Я просто не знаю никаких других опций, которые просто используют HTML / CSS и работают во всех A-браузерах.
Tom 11.12.2008 20:12:31
в зависимости от того, как выглядит реализация, если она работает во всех A-браузерах, смешивая структуру и представление, хотя и не идеально, я бы рассмотрела создание изображений в фотошопе. У вас есть примеры использования html / css, с которыми я мог бы поэкспериментировать?
joshjdevl 11.12.2008 20:22:19
Более того, более широкое использование div и т. Д. Для создания фона, вероятно, приведет к увеличению пропускной способности, чем само изображение ...
inspite 11.12.2008 20:30:01
Если бы вы делали это в сценарии, это не потребляло бы большой пропускной способности, как я бы определенно рекомендовал.
PeterAllenWebb 11.12.2008 20:39:25

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

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

РЕДАКТИРОВАТЬ (чувствуя себя глупо)

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

0
12.12.2008 21:06:56

Я сделал это раньше как трюк, используя 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. В моем случае я также анимировал цвета и положение градиента. Сейчас я не могу поручиться за кросс-браузер (для начала, убедитесь, что к родителю применена какая-то позиция, иначе он не будет контейнером позиции для абсолютного позиционирования).

3
11.12.2008 20:43:32

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

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

1
23.02.2013 18:40:33

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

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

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

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

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

Для IE6 - IE 9 мы можем использовать свойство filter или CSS3Pie .

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

Мозилла МДН

CSS3File

0
9.09.2013 03:21:32