Кроссбраузерный CSS3 градиент

[homm]

А на svg, помоему, проще. И градиент будет не масштабированной картинкой, которая в разных версиях может по разному масштабироваться, и цвета можно задавать прямо в цсс без экспорта и кодирования картинок.

[Delka]

да, хорошая идея, согласен.

Но мне dataURI+background-size кажется более компактным и читабельным вариантом.
Плюс можно сделать эту картинку длинной и показывать её юзерам FF3.5 и ниже.

Картинке прийдется масштабироваться только в Opera, я проверил 9.6/10.10/10.5 — отлично растягивает из малюсенькой картинки 1x128px.

[Delka]

Согласен, SVG можно в dataURI запихнуть и даже кодировать на лету и по-логике должно быть лучше качество (правда css ещё замороченней будет), но практика показала иной результат!

Вот сравнение маленькой картинки растянутой до 860px и чистого SVG. На SVG лесенка видна :(

[Delka]

проверил в FF, Safari, Chrome, только в Safari — нормальный градиент.

вы могли бы выложить свой скрин?
получается в FF под Mac всё ок, а под винду — нет?

у меня Vista x32 SP2.

[homm]

К сожалению в FF3.5 не работает ни gradient ни background-size, но его доля всего 5%

Вы странно считаете. Доля всех фаерфоксов версии 3.5 и ниже — 9,1%

[Delka]

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

[Awake]

скорее бы всё стандартизировалось уже… Я согласен не поддерживать несколько устаревших браузерах, но писать ТАКОЕ — какое-то сомнительное удовольствие.

[lorndesign]

тысяча извинений, что дурачусь… такая большая зелёная строка base64 и в конце у ней смайлик =))))))))))

[akira]

Ну и рыба в примере.

[PingMe]

Раньше костыли писали для IE, теперь для Opera…

[TiGR]

Не совсем так. Для IE писали костыли, чтобы он показывал то, что уже в стандартах. background-gradient никак не стандарт ещё, так что требовать от всех браузеров его показывать несколько преждевременно.

К тому же, тут костыль нужен и для IE.

[foe_nix]

Где взяли рыбу? Хочу узнать с чего все началось и чем закончится…

[Delka]

с другом (сейчас он мой напарник, на Flex пишет) написали в 2003 году.

вот целиком: cyberfight.ru/site/columns/25/article_30165/

[Vii]

[offtopic]
Разрешение экрана меняется, а c58 всё такой же. А когда-то я на него смотрел как на эталонный портал o_O
[/offtopic]

[Perez]

Вот смотрю я на эти чудеса CSS ради сомнительного удовольствия растянуть градиент на блок и понимаю, что лучше старой доброй картинки в фоне пока ничего нет. Да она не тянется и цвет градиента не поменять, но она работает на 100% в любом браузере и не требует такого безумного количество фигни в CSS писать.

[PingMe]

Я победил эту проблему, с помощью задания правильного doctype.

[Delka]

это какой?
смена doctype HTML 5 на XHTML 1.0 Strict ничего не изменила

[PingMe]

Transitional.

[Delka]

попробовал, ничего не изменилось.

можно скрин?
какая версия винды?

[acy]

Картинка с градиентом 1х150 в PNG24 весит ~300 байт. CSS`а по стандартной схеме (background-repeat) максимум на 200 байт, против вот этой полутора килобайтовой хуеты; время изменения файла с градиентом не больше 3-ех минут, как здесь — пол минуты. Если ваша работа заключается в изменениии градиентов в бэках миллионов сайтов — этот способ, несомненно, хорош. В остальном: нахуя козе баян?

[Delka]

смысл в том, что градиент подстраивается под размеры блока

[acy]

Сомнительная полезность. Я вижу применимость только в фоне разного рода плашек и кнопок, где обрезанный бэк-градиент (в случае применения изображений) играет ничтожную роль в качестве отображения.

[pepelsbey]

Всё, ребята, расходимся — acy не видит смысла в градиентах :'(

[maxcold]

может еще стоит добавить background:linear-gradient(top,#ccc,#fff); для браузеров, которые будут поддерживать css3 фишки в будущем?

[Delka]

спека пока лишь Editor's Draft но почему-бы и нет!
спасибо, добвил.

[neptune]

Если добавить fixed для -moz-linear-gradient, -webkit-gradient, Microsoft.gradient, то Opera перестает вообще background показывать

[kotiara]

Opera 11 поддерживает css3 gradient -o-linear-gradient