Комментарии 34
А на svg, помоему, проще. И градиент будет не масштабированной картинкой, которая в разных версиях может по разному масштабироваться, и цвета можно задавать прямо в цсс без экспорта и кодирования картинок.
+3
да, хорошая идея, согласен.
Но мне dataURI+background-size кажется более компактным и читабельным вариантом.
Плюс можно сделать эту картинку длинной и показывать её юзерам FF3.5 и ниже.
Картинке прийдется масштабироваться только в Opera, я проверил 9.6/10.10/10.5 — отлично растягивает из малюсенькой картинки 1x128px.
Но мне dataURI+background-size кажется более компактным и читабельным вариантом.
Плюс можно сделать эту картинку длинной и показывать её юзерам FF3.5 и ниже.
Картинке прийдется масштабироваться только в Opera, я проверил 9.6/10.10/10.5 — отлично растягивает из малюсенькой картинки 1x128px.
+2
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Согласен, SVG можно в dataURI запихнуть и даже кодировать на лету и по-логике должно быть лучше качество (правда css ещё замороченней будет), но практика показала иной результат!
Вот сравнение маленькой картинки растянутой до 860px и чистого SVG. На SVG лесенка видна :(
Вот сравнение маленькой картинки растянутой до 860px и чистого SVG. На SVG лесенка видна :(
+1
К сожалению в FF3.5 не работает ни gradient ни background-size, но его доля всего 5%Вы странно считаете. Доля всех фаерфоксов версии 3.5 и ниже — 9,1%
+2
скорее бы всё стандартизировалось уже… Я согласен не поддерживать несколько устаревших браузерах, но писать ТАКОЕ — какое-то сомнительное удовольствие.
+1
тысяча извинений, что дурачусь… такая большая зелёная строка base64 и в конце у ней смайлик =))))))))))
+5
Ну и рыба в примере.
+4
Раньше костыли писали для IE, теперь для Opera…
+3
Где взяли рыбу? Хочу узнать с чего все началось и чем закончится…
+1
с другом (сейчас он мой напарник, на Flex пишет) написали в 2003 году.
вот целиком: cyberfight.ru/site/columns/25/article_30165/
вот целиком: cyberfight.ru/site/columns/25/article_30165/
+1
НЛО прилетело и опубликовало эту надпись здесь
Вот смотрю я на эти чудеса CSS ради сомнительного удовольствия растянуть градиент на блок и понимаю, что лучше старой доброй картинки в фоне пока ничего нет. Да она не тянется и цвет градиента не поменять, но она работает на 100% в любом браузере и не требует такого безумного количество фигни в CSS писать.
+3
Картинка с градиентом 1х150 в PNG24 весит ~300 байт. CSS`а по стандартной схеме (background-repeat) максимум на 200 байт, против вот этой полутора килобайтовой хуеты; время изменения файла с градиентом не больше 3-ех минут, как здесь — пол минуты. Если ваша работа заключается в изменениии градиентов в бэках миллионов сайтов — этот способ, несомненно, хорош. В остальном: нахуя козе баян?
0
может еще стоит добавить background:linear-gradient(top,#ccc,#fff); для браузеров, которые будут поддерживать css3 фишки в будущем?
-1
Если добавить fixed для -moz-linear-gradient, -webkit-gradient, Microsoft.gradient, то Opera перестает вообще background показывать
0
Opera 11 поддерживает css3 gradient -o-linear-gradient
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Кроссбраузерный CSS3 градиент