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

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

12 голосов
/ 14 апреля 2011

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

Я посмотрел на Градиентный миксин Compass , но он не работает с Internet Explorer.

Есть идеи? (Это не обязательно должен быть Компас - я счастлив установить что-то еще.)

Редактировать: То, что я пытаюсь получить, - это какая-то инфраструктура (например, Compass?), Которая генерирует код, подобный тому, который опубликовал Blowsie, который был протестирован во всех браузерах. В основном, как я упомянул Compass Gradient Mixin , но с поддержкой IE. (Я немного настороженно отношусь к тому, чтобы просто свернуть свой собственный SCSS-миксин и вставить в блоки, подобные коду Blowie, потому что я не тестировал его и не располагал ресурсами для этого.)

Ответы [ 3 ]

29 голосов
/ 15 апреля 2011

Я только что заметил, что текущая бета-версия Compass (0.11.beta.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 голосов
/ 14 апреля 2011

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

            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 к элементу, чтобы он работал, т.е.

0 голосов
/ 14 апреля 2011

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

Рассмотрим:

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

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

...