CSS (возможно, с компасом): кросс-браузерный градиент

Я хотел бы получить градиент в CSS (возможно, через Compass), который работает в каждом крупном браузере, включая IE7+. Есть ли простой способ сделать это (без написания большого количества кода и без специального файла изображения)?

Я смотрел Compass градиент mixin, но он не работает с Internet Explorer.

Любые идеи? (Он не должен быть компасом - я счастлив установить что-то еще.)

Изменить: То, что я пытаюсь получить, - это некоторая среда (например, Compass?), которая генерирует код, как то, что Blowsie отправил, который был протестирован в браузерах. В принципе, как Compass gradient mixin Я упомянул, но с поддержкой IE. (Я немного опасаюсь просто переместить мой собственный SCSS-микс и вставить в блоки, такие как Blowsie-код, потому что я его не тестировал и не имею ресурсов для этого.)

Ответы

Ответ 1

Я только заметил, что текущая бета-версия Compass (0.11.b.6) имеет поддержку для генерации градиентов IE в модуле compass/css3/images ( который заменяет предыдущий модуль градиента), поэтому вы можете генерировать ваши градиенты в общей сложности двумя короткими командами:

@import "compass/css3/images";
@import "compass/utilities/general/hacks";  /* filter-gradient needs this */

.whatever {
  /* IE; docs say this should go first (or better, placed in separate IE-only stylesheet): */
  @include filter-gradient(#aaaaaa, #eeeeee);
  /* Fallback: */
  background: #cccccc;
  /* CSS 3 plus vendor prefixes: */
  @include background(linear-gradient(top, #aaaaaa, #eeeeee));
}

Это генерирует следующее множество CSS:

.whatever {
  *zoom: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE')";
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE');
  background: #cccccc;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aaaaaa), color-stop(100%, #eeeeee));
  background: -moz-linear-gradient(top, #aaaaaa, #eeeeee);
  background: -o-linear-gradient(top, #aaaaaa, #eeeeee);
  background: linear-gradient(top, #aaaaaa, #eeeeee);
}

Думаю, я предпочел бы, чтобы IE-код и градиент IE не использовался в одном вызове, но поскольку функция градиента IE DXImageTransform довольно ограничена, возможно, это невозможно.

Ответ 2

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

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

Вам нужно будет указать высоту или масштаб: 1 применить hasLayout к элементу, для которого это будет работать, т.е.

Ответ 3

Хотя градиенты имеют ограниченную сложность, они достаточно сложны, чтобы требовать, чтобы вы считали "много кода".

Рассмотрим:

  • начальный цвет, конечный цвет и шестнадцатеричная математика, необходимая для перехода между одним и другим
  • Количество "шагов"
  • Ширина/высота каждого шага
  • Поскольку для этого не существует чистого CSS-метода, это означает рендеринг HTML, один элемент для каждого цвета/шага, без испорчения существующего HTML

Итак, нет, без плагина, который делает все это для вас, для этого потребуется немного кода или изображения.