para - fondo degradado transparente css

¿Cómo hacer un div CSS puro con un fondo degradado?

Question

Digamos que la altura de la div es 34px y el ancho es de 480px. El div debe verse así:

y no quiero que realmente use una imagen, solo CSS. ¿Es posible?

Answer 1

Es con CSS3. Incluso hay un práctico generador de gradientes que elimina las conjeturas. Por supuesto, esto es completamente incompatible en IE8 y bajo.

Editar

En aras de la integridad, como mencionó sluukkonen , IE admite gradientes en CSS usando el filtro de filter:progid:DXImageTransform.Microsoft.Gradient .

Answer 2

Es posible con CSS3;

Ejemplo: (negro y gris)

mydiv
{

   background-image:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.15, rgb(189,189,189)),
        color-stop(0.58, rgb(0,0,0)),
        color-stop(0.79, rgb(0,0,0))
    )
    -moz-linear-gradient(
        center bottom,
        rgb(189,189,189) 15%,
        rgb(0,0,0) 58%,
        rgb(0,0,0) 79%
    )
}

Pero esto solo funciona en los navegadores Mozilla y webkit, IE8 y anteriores ignorarán esto.

Espero eso ayude :)

Answer 3

Hay formas de hacer esto con las ''funciones'' de -webkit-gradient y -moz-linear-gradient como valores de background-image de background-image . Estos utilizan una sintaxis diferente, pero se estandarizarán si la especificación de gradiente se convierte en la versión final de CSS 3.

/* webkit example */ background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(50,50,50,0.8)), to(rgba(80,80,80,0.2)), color-stop(.5,#333333) );

/* mozilla example - FF3.6+ */ background-image: -moz-linear-gradient( rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95% );