Delka 25 мая 2010 в 03:59

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

3 мин

63K

CSS *

+36

Комментарии 34

homm 25 мая 2010 в 04:18

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

Delka 25 мая 2010 в 04:57

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

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

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

НЛО прилетело и опубликовало эту надпись здесь

Delka 25 мая 2010 в 07:11

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

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

НЛО прилетело и опубликовало эту надпись здесь

Delka 25 мая 2010 в 07:53

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

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

у меня Vista x32 SP2.

НЛО прилетело и опубликовало эту надпись здесь

homm 25 мая 2010 в 04:22

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

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

Delka 25 мая 2010 в 04:59

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

Awake 25 мая 2010 в 05:15

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

lorndesign 25 мая 2010 в 05:31

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

akira 25 мая 2010 в 05:55

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

PingMe 25 мая 2010 в 05:58

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

TiGR 23 дек 2010 в 10:21

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

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

foe_nix 25 мая 2010 в 06:00

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

Delka 25 мая 2010 в 06:06

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

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

Vii 25 мая 2010 в 08:12

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

НЛО прилетело и опубликовало эту надпись здесь

Perez 25 мая 2010 в 06:30

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

НЛО прилетело и опубликовало эту надпись здесь

PingMe 25 мая 2010 в 08:42

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

Delka 25 мая 2010 в 08:46

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

PingMe 25 мая 2010 в 08:48

Transitional.

Delka 25 мая 2010 в 08:51

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

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

acy 25 мая 2010 в 06:49

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

Delka 25 мая 2010 в 07:13

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

acy 25 мая 2010 в 08:36

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