CSS градиенты ... мнения? - PullRequest
Новая
       35

CSS градиенты ... мнения?

8 голосов
/ 16 июля 2011

Я долгое время разрабатывал веб-сайт, просто используя изображения для градиентов, для небольших градиентов это, кажется, работает нормально и не увеличивает время загрузки, но сейчас с такой большой фрагментацией с новым CSS (webkit / moz / o)/ khtml, не говоря уже о 6,7,8,9)

, поэтому для одного универсального градиента будет много CSS.

С сайтами, которые собираютсяМне нужна тонна градиентов. Я использую Less.js, чтобы сделать его немного лучше, но это еще далеко ...

Мне было просто интересно, какой размер имеет больше смысла использовать CSS-градиенты над изображениями,если действительно есть переломный момент.

[напр.маленький градиент 5px, имеет смысл иметь изображение размером 5px, но, как и градиент 1000px, возможно, имеет смысл просто использовать css]

О, и я знаю, что есть SVG, я на самом деле не пробовалэто, но это работает хорошо?

Любые мнения будут высоко оценены.:)

Ответы [ 4 ]

4 голосов
/ 16 июля 2011

Проблема с использованием изображений заключается в том, что вы гораздо более ограничены в своих действиях. Если вы хотите использовать фоновый градиент и поле будет больше, чем вы ожидали, либо градиент останавливается рано, либо он начинает повторяться. Оба решения, вероятно, не то, что вы хотите.

Вы можете проверить www.css3please.com для примеров того, как получить хорошие эффекты в css3 (с живым примером кода). Для фоновых градиентов вы можете использовать следующее: 

.box_gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #444444, #999999);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */
}
2 голосов
/ 05 августа 2011

Подводя итог: вы можете получить поддержку градиентов с помощью одного SVG в в каждом браузере , который поддерживает градиенты CSS3, с бонусными баллами за поддержку IE9, Opera возвращается назад (поддерживается только недавно -o - добавлен префикс CSS3 в последнее время), и он устраняет проблемы, возникающие из-за различий в двух синтаксисах webkit. Два синтаксиса webkit - это не просто различное упорядочение или комбинация слов и чисел, они полностью несовместимы друг с другом, и их очень трудно нормализовать.

Это если вы используете SVG в качестве фонового изображения из файла. Если вы сделаете дополнительный шаг для встраивания SVG в виде данных, вы потеряете поддержку Firefox до 6. Во всех версиях Firefox поддерживается «правильный» синтаксис градиента CSS3, так что в большинстве случаев не так уж и сложно в большинстве случаев просто использовать SVG datauri plus -moz- CSS3.

Основная хитрость заключается в том, что нужно немного разобраться и изучить взаимодействие между внутренним размером SVG -> область просмотра -> внутренним размером / размером фона CSS -> и, наконец, модификаторами, такими как background-size. Вот почему, несмотря на всеобщее признание, люди избегают использования SVG.

Я не смог добиться успеха в нормализации между повторяющимися градиентами CSS3 с остановками в процентах и ​​SVG одновременно (поддержка с -moz-). Проблема заключается в том, что независимо от того, какая комбинация способов получения желаемого результата, один или другой требует, чтобы размер фона был установлен таким образом, чтобы он нарушал другой. Это довольно специфический вариант использования.

Вот горизонтальный линейный градиент: 

<svg xmlns="http://www.w3.org/2000/svg">
  <style>stop{stop-color:#f00}</style>
  <linearGradient id="g">
    <stop stop-opacity=".4"/>
    <stop stop-opacity="0" offset="1"/>
  </linearGradient>
  <rect width="100%" height="100%" fill="url(#g)"/>
</svg>

Как данные (удалены пробелы и разрывы строк) 

#base64 {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxzdHlsZT5zdG9we3N0b3AtY29sb3I6I2YwMH08L3N0eWxlPjxsaW5lYXJHcmFkaWVudCBpZD0iZyI+PHN0b3Agc3RvcC1vcGFjaXR5PSIuNCIvPjxzdG9wIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cpIi8+PC9zdmc+);
}

А вот как CSS3 

#css3 {
                                                   background-image: -webkit-gradient(linear, 0 0, 100% 0, 
  from(0,rgba(255,0,0,0)),to(1,rgba(255,0,0,.4))); background-image: -webkit-linear-gradient(
  right, rgba(255,0,0,0),      rgba(255,0,0,.4));  background-image: -moz-linear-gradient(
  right, rgba(255,0,0,0),      rgba(255,0,0,.4));  background-image: -ms-linear-gradient(
  right, rgba(255,0,0,0),      rgba(255,0,0,.4));  background-image: -o-linear-gradient(
  right, rgba(255,0,0,0),      rgba(255,0,0,.4));  background-image:  linear-gradient(
  right, rgba(255,0,0,0),      rgba(255,0,0,.4));  filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr="#33ff0000", endColorstr="#00ff0000", GradientType=1);
}

Вот повторяющиеся диаганальные полосы SVG: 

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="900">
    <style>
        stop{stop-color:#fff;stop-opacity:0}
        [b]{stop-opacity:.15}
    </style>
    <linearGradient id="g" x1="1" x2="0" y2="1">
        <stop offset=".25" b=""/>
        <stop offset=".25"/>
        <stop offset=".5"/>
        <stop offset=".5" b=""/>
        <stop offset=".75" b=""/>
        <stop offset=".75"/>
    </linearGradient>
    <rect width="900" height="900" fill="url(#g)"/>
</svg>

и данные 

.diag {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iOTAwIj48c3R5bGU+c3RvcHtzdG9wLWNvbG9yOiNmZmY7c3RvcC1vcGFjaXR5OjB9W2Jde3N0b3Atb3BhY2l0eTouMTV9PC9zdHlsZT48bGluZWFyR3JhZGllbnQgeDE9IjEiIHgyPSIwIiB5Mj0iMSIgaWQ9ImciPjxzdG9wIG9mZnNldD0iLjI1IiBiPSIiLz48c3RvcCBvZmZzZXQ9Ii4yNSIvPjxzdG9wIG9mZnNldD0iLjUiLz48c3RvcCBvZmZzZXQ9Ii41IiBiPSIiLz48c3RvcCBvZmZzZXQ9Ii43NSIgYj0iIi8+PHN0b3Agb2Zmc2V0PSIuNzUiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iOTAwIiBmaWxsPSJ1cmwoI2cpIi8+PC9zdmc+);
    background-size: 33% auto;
}

И CSS3 для него, который не поразит IE9: 

background-image: -moz-repeating-linear-gradient(45deg,
    rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
    rgba(255,255,255,  0) 15%, rgba(255,255,255,  0) 30%);
background-image: -webkit-repeating-linear-gradient(45deg,
    rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
    rgba(255,255,255,  0) 15%, rgba(255,255,255,  0) 30%);
background-image: -ms-repeating-linear-gradient(45deg,
    rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
    rgba(255,255,255,  0) 15%, rgba(255,255,255,  0) 30%);
background-image: -o-repeating-linear-gradient(45deg,
    rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
    rgba(255,255,255,  0) 15%, rgba(255,255,255,  0) 30%);
background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
    rgba(255,255,255,  0) 15%, rgba(255,255,255,  0) 30%);

... Или что-то в этом роде, я столько раз искажал, пытаясь заставить SVG выглядеть так же, как градиент для скрытия Firefox <6, но не могу найти способ заставить эти два правила сосуществовать (определение размера фона), не понимая, что я забыл, что у меня было изначально. Может просто откусить пулю и вернуться к извлечению ее из файла (который работает нормально) или минимальной JS-шайбы, чтобы Firefox загрузил данные. </p>

Плюс, каким будет старый синтаксис Webkit ... то, что будет использовать background-size и неизменно нарушать новый синтаксис. Получите удовольствие от одновременной работы обоих синтаксисов Webkit, не нарушая один.

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

Здесь есть ошибки, так что это не прогулка в парке. Есть некоторые случайные ошибки браузера, которые вы найдете, если спуститесь по кроличьей норе. Как будто у меня повторяющийся градиент был настроен по-другому, как указано в способе определения повторяющегося градиента SVG. Отлично работал в IE9, но, очевидно, есть некоторые странные проблемы в WebKit, когда он встроен в виде datauri и применяется процентная ширина для нескольких элементов разных размеров. По сути, он использовал одну общую копию сервера рисования SVG для нескольких элементов, а его размер соответствовал первому открытому элементу, а затем был наполовину сломан и полуразмерен при открытии других элементов.

Но, в конце концов, легче было справиться с проблемами SVG, чем с градиентами CSS3, когда они нацелены на тот же набор браузеров. В любом случае, вы должны использовать SVG, чтобы покрыть IE9 (ms-фильтр - мусор, и он не будет работать с другими CSS3-объектами, такими как радиус границы, он все время отстает на парковке ради производительности).

Написал большую часть этого здесь: http://bbenvie.com/svggrads

В качестве дополнения приведем описание достижения ускоренных градиентов в SVG (несколько градиентов от одного SVG): http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/.

1 голос
/ 27 июня 2012

Код, который я использую для всех градиентов браузера: 

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

Вам потребуется указать высоту или zoom: 1, чтобы применить hasLayout к элементу, чтобы это работало в IE.

Обновление:

Вот версия LESS Mixin (CSS) для всех пользователей LESS: 

.gradient(@start, @end) {
    background: mix(@start, @end, 50%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -webkit-linear-gradient(@start, @end);
    background: -moz-linear-gradient(top, @start, @end);
    background: -ms-linear-gradient(@start, @end);
    background: -o-linear-gradient(@start, @end);
    background: linear-gradient(@start, @end);
    zoom: 1;
}
1 голос
/ 16 июля 2011

Мой текущий подход заключается в использовании CSS3 градиента (webkit-, moz- и т. Д.) И предоставлении старого фонового изображения в качестве запасного.Размер изображения, как правило, не является проблемой, учитывая текущую пропускную способность - даже градиент 200px занимает всего около 200 байтов.Большая часть накладных расходов связана с задержкой из-за множественных запросов изображений, которые можно было бы устранить с помощью CSS.

Основным преимуществом использования CSS является то, что он уменьшит количество запросов.Чем больше изображений вы используете на странице, тем больше выигрыш.

...