Градиентный фон

[rash]

Подскажите, как сделать тянущийся градиент на фоне. Известно два крайних цвета, они должны сохраняться при любой ширине блока.

Подозреваю, что нужен SVG/VML, никто пример не подскажет? Не дается что-то с лету...

[rus]

А если запихнуть картинку (градиентный фон) в див, дать ему и ей ширину и высоту по 100% и дать ему дисплей блок и отпозиционировать его, а поверх его уже все что нужно, но картинка при масштабировании исказится это понятно, вопрос на сколько сильно...

Edited July 14, 2009 by rus

[Justnewone]

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

[rash]

Ну с картинками варианты и так ясны, но тут все-таки скорее нужен вектор... -(

[Justnewone]

Ну с картинками варианты и так ясны, но тут все-таки скорее нужен вектор... -(

Боюсь, огребете. подозрение что громко некроссбраузерно.

[Great Rash]

Я бы сделал как предлагает Justnewone, но с удовольствием посмотрел бы на вариант SVG/VML, т.к. хочу изучить данную технологию, а примеров реального использования в сети не нашел (только пример с википедии).

[rash]

Я бы сделал как предлагает Justnewone, но с удовольствием посмотрел бы на вариант SVG/VML, т.к. хочу изучить данную технологию, а примеров реального использования в сети не нашел (только пример с википедии).

Вот и у меня та же история...

[Justnewone]

можна тут порыться

http://www.fpublisher.ru/documentation/javascript_drawing/

Хотя идейно мне это не по душе.

[rus]

плохо то, что vml будет работать в осле, а в остальных браузерах нет, с точностью до наоборот svg вроде бы...

Вот еще два интересных формата: X3D и VRML

Edited July 14, 2009 by rus

[rash]

Да, с SVG и VML все именно так, тут задача даже скорее спортивная, чем практическая, так что идейность можно ненадолго отставить -)

[rus]

Вот есть еще одна интересная ссылочка, если конечно с энглишом нет проблем.

[Great Rash]

тут задача даже скорее спортивная, чем практическая

Ну почему спортивная, есть желание попробовать это дело на практике. Только вот не хочется начинать изучение технологии с фреймворка, хотя на заметку надо взять.

[Great Rash]

В продолжение темы:

Набрел в сети на очень интересный тег <canvas>, на MDC (Mozilla Developer Center) можно про него почитать. Вот ссылка на туториал (инглиш):

https://developer.mozilla.org/en/Canvas_tutorial/Basic_usage

Эта технология поддерживается Мозиллой (я проверял на 3.0.11), Оперой (у меня 9.63), Сафари (у меня 3.1.2), Гугль Хром (2.0.172.33).

Есть и проблемы, догадайтесь какие... правильно - всеми "любимый" ИЕ. Но его забороли добрые люди из гугля (боже, рано или поздно они захватят мир). Качаем скрипт отсюда:

http://code.google.com/p/explorercanvas/downloads/list

и ИЕ начинает "понимать" <canvas>, вообще скрипт тупо переписывает все в VML (но нам то что, главное работает). Самолично проверил в ИЕ7 и 8, надеюсь, что и в шестом работает.

Теоретикам и просто заинтересованным рекомендую ознакомится со ссылками. Сам же скоро попробую че-нить замутить при помощи этого добра.

UPD: Ах! Ложка дегтя - Гугль Хром к канвасом работает с ошибками, фигово работает с методом stroke(); и совсем не показал картинку, вставленную туда

Edited July 16, 2009 by Great Rash

[rash]

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

[rus]

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

Что за решение? Не то что я выше писал?

[rash]

Да, аналогичное.

В принципе, и у меня это была первая мысль, но я боялся искажений. Впрочем, именно с тем градиентом, который был нужен, искажения были не слишком заметны.

[SelenIT]

AFAIK, нативная поддержка SVG в качестве фона есть у Оперы 9.5+. Там же один товарищ хвастается, что сделал скрипт для замены картиночного фона SVG-шным, но у меня его пример почему-то не заработал ни в FF3.0, ни в FF3.5 (сам скрипт пока не смотрел)...