Comments 34
А на svg, помоему, проще. И градиент будет не масштабированной картинкой, которая в разных версиях может по разному масштабироваться, и цвета можно задавать прямо в цсс без экспорта и кодирования картинок.
да, хорошая идея, согласен.
Но мне 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.
UFO just landed and posted this here
UFO just landed and posted this here
Согласен, SVG можно в dataURI запихнуть и даже кодировать на лету и по-логике должно быть лучше качество (правда css ещё замороченней будет), но практика показала иной результат!
Вот сравнение маленькой картинки растянутой до 860px и чистого SVG. На SVG лесенка видна :(
Вот сравнение маленькой картинки растянутой до 860px и чистого SVG. На SVG лесенка видна :(
К сожалению в FF3.5 не работает ни gradient ни background-size, но его доля всего 5%Вы странно считаете. Доля всех фаерфоксов версии 3.5 и ниже — 9,1%
скорее бы всё стандартизировалось уже… Я согласен не поддерживать несколько устаревших браузерах, но писать ТАКОЕ — какое-то сомнительное удовольствие.
тысяча извинений, что дурачусь… такая большая зелёная строка base64 и в конце у ней смайлик =))))))))))
Ну и рыба в примере.
Раньше костыли писали для IE, теперь для Opera…
Где взяли рыбу? Хочу узнать с чего все началось и чем закончится…
с другом (сейчас он мой напарник, на Flex пишет) написали в 2003 году.
вот целиком: cyberfight.ru/site/columns/25/article_30165/
вот целиком: cyberfight.ru/site/columns/25/article_30165/
UFO just landed and posted this here
Вот смотрю я на эти чудеса CSS ради сомнительного удовольствия растянуть градиент на блок и понимаю, что лучше старой доброй картинки в фоне пока ничего нет. Да она не тянется и цвет градиента не поменять, но она работает на 100% в любом браузере и не требует такого безумного количество фигни в CSS писать.
Картинка с градиентом 1х150 в PNG24 весит ~300 байт. CSS`а по стандартной схеме (background-repeat) максимум на 200 байт, против вот этой полутора килобайтовой хуеты; время изменения файла с градиентом не больше 3-ех минут, как здесь — пол минуты. Если ваша работа заключается в изменениии градиентов в бэках миллионов сайтов — этот способ, несомненно, хорош. В остальном: нахуя козе баян?
смысл в том, что градиент подстраивается под размеры блока
Сомнительная полезность. Я вижу применимость только в фоне разного рода плашек и кнопок, где обрезанный бэк-градиент (в случае применения изображений) играет ничтожную роль в качестве отображения.
Всё, ребята, расходимся — acy не видит смысла в градиентах :'(
может еще стоит добавить background:linear-gradient(top,#ccc,#fff); для браузеров, которые будут поддерживать css3 фишки в будущем?
Если добавить fixed для -moz-linear-gradient, -webkit-gradient, Microsoft.gradient, то Opera перестает вообще background показывать
Opera 11 поддерживает css3 gradient -o-linear-gradient
Sign up to leave a comment.
Кроссбраузерный CSS3 градиент