CSS (quizás con brújula): degradado entre exploradores

Question

Me gustaría obtener un degradado en CSS (quizás a través del Compass) que funciona en todos los principales navegadores, incluido IE7 +. ¿Hay una manera fácil de hacerlo (sin escribir mucho código y sin un archivo de imagen personalizado)?

Miré Compass gradient mixin, pero no funciona con Internet Explorer.

¿Alguna idea? (No tiene por qué ser Brújula - Estoy feliz de instalar otra cosa.)

Editar: Lo que estoy tratando de conseguir es algún tipo de marco que genera un código como lo Blowsie publicó que haya sido analizada (como brújula?) a través de navegadores. Básicamente me gusta el Compass gradient mixin que mencioné, pero con soporte de IE. (Estoy un poco receloso de simplemente rodar mi propia mezcla de SCSS y pegar en bloques como el código de Blowsie, porque no lo he probado y no tengo los recursos para hacerlo).

Answer 1

acabo se dio cuenta de que la versión actual de Compass beta (0.11.beta.6) es compatible con la generación de degradados IE en el módulo compass/css3/images (que sustituye al módulo de degradado anterior), por lo que puede generar sus degradados con un total de dos comandos cortos:

Esto genera la siguiente serie de 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); 
} 

supongo que hubiera preferido tener la IE y el código de gradiente no IE en una llamada, pero dado que la función del gradiente DXImageTransform de IE es bastante limitado, es decir probablemente no sea posible.

Answer 2

Si bien los gradientes son de complejidad limitada, son lo suficientemente complejas como para requerir lo que considerarías "un montón de código".

considerar:

• comenzando color, terminando color y la matemáticas hexadecimal requerida para la transición entre una y la otra
• El número de "pasos"
• La anchura/altura de cada paso
• Como no hay una forma pura de CSS de hacer esto, significa renderizar HTML, un elemento para cada color/paso, sin estropear su HTML existente

Por lo tanto, no, sin un complemento que haga todo esto por usted, requerirá un poco de código o una imagen.

Answer 3

El código que utilizo para todos los navegadores gradientes ..

  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; 

Usted tendrá que especificar una altura o el zoom: 1 para aplicar hasLayout al elemento para que esto funcione es decir en