Comments 26
А не проще, тогда уж, закодировать изображения в base64 и вставить в сам CSS? Я почему-то уверен, что способ с картинками, а не градиентами, намного производительнее.
Смотря какие картинки. Если абсолютно примитивные и со строго вертикальным узором, так что можно буквально один пиксель повторять по вертикали сколько угодно, то может быть. А если посложнее, с наклонными линиями хотя бы, как в примере с занавесом, то это уже десятки килобайт.
Дело в том, что, опять же, для меня, намного интереснее и приятнее просматривать простой, но аккуратный сайт, чем сайт напичканный всем тем, что только возможно и при этом дико тормозит. И не особо важно то, что страница этих сайтов будет весить на десять килобайт больше.
Не спорю, сам люблю простые и быстрые сайты. Тем не менее повсеместно переходят от картинок к генерации всего на CSS. Надо же чем-то занять четырёхядерные смартфоны :) А если серьёзно — когда градиенты будут рендериться быстро — почему бы и нет. Плюсы ведь есть — можно, например, подбирать цвета и узор вживую, не открывая фотошопа.
Согласен. На небольших участках, в принципе, и сейчас можно использовать достаточно спокойно — кнопочки, закорючки и т.п., но не на бэкграунде всей страницы.

С темой не очень связано, но, помню, когда-то давно страдал градиентоманией и вставлял градиенты куда только можно и куда только нельзя. Затем понял, что чем проще — тем лучше. Белый фон — лучший фон :).
Мелкие картинки, особенно относящиеся к функционалу, какие нить кнопочки круглые, стрелочки, лучше рисовать с помощью ксс, а не вставлять картинкой, ибо такие иконки на мобильных устройствах смотрятся абсолютно ужасно, а если увеличивать масштаб то вообще, страх. Это еще один пунктик в строну плюсов.

в других случаях между png и base — всегда выбираю второе, но только если картинка относится к функционалу и не большая.
Это хороший способ создать сайт, который тормозит на обычной машине.
А обычный смартфон он будет завещивать, и за 10 минут сажать его батарею :)
Ага, а примеры используют старый синтаксис для градиентов?
а для поддержки IE младше 10-й версии вообще использовать DXImageTransform.Microsoft.gradient()

MS-фильтр поддерживает только самые простые градиенты: линейные, строго вертикальные или горизонтальные, с двумя колор-стопами «от и до».
Поэтому для цикады он, мягко говоря, малопригоден — даже если отбросить все прочие его недостатки. Так что закладывайтесь на то, что этот фон в старых IE будет априори «изящно деградирован». :) Ну разве что SVG привлечь для IE9…

Теперь по теме в целом.
Как эксперимент — безусловно интересно. На практике… решение нишевое и спорное.
Простые геометрические полосочки реализуются несложно — но они и в картинках мало весят! Которые можно засунуть в base64, как правильно замечают выше.
А что-то сложное — уже нет. Это отлично иллюстрирует пример с занавесом: изготовить/менять его очень муторно, а качество все равно оставляет желать лучшего. Он неживой, синтетический. А занавес из картинок намного вкуснее.
простите, конечно, но ваше «намного вкуснее» жутка артефачит на моём ноуте.
я все же за вектор, пусть даже пока синтетический, SVG и CSS (где попроще).
а если еще вспомнить про Retina…

при увеличении мощностей, вектор всё сильнее будет вытеснять растр. может даже когда-нибудь сплайновые 3d движки увидем. хотелось бы до этого дожить :)
Автор, желая оптимизировать объем, немного перегнул палку с постеризацией. Ценой десятка-другого килобайт от этого можно избавиться.
Но даже в нынешнем виде растровая картинка мне больше нравится. А шум отчасти даже в плюс — придает фактуру.
шум да, а вот квадратные артефакты — не очень :)
видимо, у нас разные мониторы.
Да не, я понимаю о чем речь. Это постеризация. Если целенаправленно обращать внимание — я её тоже вижу.
Автор немного переборщил с оптимизацией.
Как всегда не хватает на хабре отредактировать свой комментарий :(
Ничего, вы не первый, мне уже в личку писали на ту же тему. Наверное, когда ссылка стоит в самом начале текста, она проскальзывает мимо сознания :)
Она явно указывает на хабр, но не каждый же смотрит href. Обычно такие ссылки даются на Википедию, например. Я тоже первым делом полез топик ализара искать что бы убедиться что это не дежавю. И только потом прочитал эту ветку комментариев.
да согласен :) будет дикий тормоз, на компах с встроенной видео картой.

Но мне кажется человек выложил пост, как научно тематическую статью :) чем теоретически практическую :)))

или я не прав? :)
UFO landed and left these words here
UFO landed and left these words here
Красотища! С моей привычкой искать повторяющийся узор фона на сайта, стопорнуло меня минут на пять.
Only those users with full accounts are able to leave comments. Log in, please.