degradados utilizando solo html y css y javascript?

¿Hay alguna manera de hacer gradientes en css/html/javascript que funcione en todos los principales navegadores? (MS IE 5+, Firefox, Opera, Safari)?degradados utilizando solo html y css y javascript?

Editar: Me gustaría hacer esto para fondos (encabezado, panel principal, paneles laterales). Además, me gustaría tener degradados de línea verticales también.

Editar: después de leer las respuestas, vamos a abrir esto también a las soluciones de Javascript, ya que HTML/CSS por sí mismo hace que sea más difícil de lograr.

Fuente

2008-12-11 joshjdevl

No estoy seguro de los detalles de implementación que está buscando (como fondo, o solo un borde a lo largo del borde de la ventana, etc.); sin embargo, es posible aunque un poco tedioso.

Un ejemplo que viene a la mente sería tener elementos de nivel nbloqueantes, como divs, y luego darles una altura pequeña (un par de píxeles, por ejemplo) y luego cambiar gradualmente el color de fondo de cada uno elemento posterior.

Fuente

2008-12-11 20:00:42 Tom

El problema con los enfoques de este tipo es que, fundamentalmente, se mezclan la estructura y la presentación. –

Sí, no estoy en desacuerdo contigo. Simplemente no conozco ninguna otra opción que simplemente use HTML/CSS y funcione en todos los navegadores A. – Tom

dependiendo de cómo se ve la implementación, si funciona en todos los navegadores A, mezcla la estructura y la presentación mientras que no es ideal, lo consideraría frente a la creación de imágenes en photoshop. ¿Tiene algún ejemplo usando html/css con el que pueda experimentar? – joshjdevl

Creo que la respuesta corta es no.

Puede crear algo que se parece a un degradado utilizando solo css, pero luego usarlo como un fondo de imagen ... Creo que eso lo está presionando un poco.

EDITAR (sentirse tonta)

he encontrado la solución: http://en.wikipedia.org/wiki/JPEG

Fuente

2008-12-11 20:27:08 inspite

que he hecho esto antes como un truco, usando javascript como:

var parent = document.getElementByID('foo'); 
for(var i=0; i< count; i++) { 
    var div = document.createElement('div'); 
    div.style.position = 'absolute'; 
    div.style.width='100%'; 
    div.style.height = 1/count+"%"; 
    div.style.top = i/count+"%"; 
    div.style.zIndex = -1; 
    parent.appendChild(div); 
}

Si su requerimiento es solo para tener un degradado, debería usar una imagen de degradado configurada como imagen de fondo en css. En mi caso, estaba animando los colores y la posición del gradiente también. No puedo responder por el navegador cruzado que es (para empezar, asegúrese de que el padre tiene una posición aplicada, de lo contrario no será un contenedor de posición para el posicionamiento absoluto.

Fuente

2008-12-11 20:43:32 Jimmy

Uso el código CSS de degradado generador por ColorZilla:... http://www.colorzilla.com/gradient-editor/

tiene polyfills para IE - pero no sabe a qué distancia se va

Fuente

2013-02-23 18:40:33

Hay muchas maneras de crear un gradiente ahora 1. puede crear una imagen para que 2. Use CSS3 Gradient, puede ser lineal, radial y repetitivo.

Sintaxis para lineal:

linear-gradient: ([angle | to ] ,[ [color-stop], [color-stop]+);

Sintaxis para radial:

linear-gradient: ([angle | to ] ,[ [color-stop], [color-stop]+);

Para IE6 a IE 9 podemos utilizar la propiedad de filtro o también puede utilizar CSS3Pie.

A continuación se presentan algunos referances que ayudarán:

Mozilla MDN

CSS3File

Fuente

2013-09-09 03:21:32 Avdhut

degradados utilizando solo html y css y javascript?

Respuesta

Cuestiones relacionadas