Generador Gradient CSS3

CSS3 Gradients Explicación

El gradiente CSS3 es una de las herramientas más útiles para un diseñador web. Te permite crear impresionantes interfaces mediante gradientes sin necesidad de imágenes. Esto significa que sus páginas web sean más ligero que acelerará los tiempos de descarga e incluso puede mejorar la SEO.

Cada navegador tiene su propio prefijo para que la sintaxis puede ser bastante complejo. He aquí un ejemplo:

#myDiv {
    background: rgb(30, 50, 230);
    background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
    background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
    background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
    background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
    background: linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
}

Lo primero que hacemos es asignar el elemento de un color de fondo. Esto es para que el navegador no soporte CSS3 gradientes .

Las siguientes cuatro líneas son las variaciones para los distintos navegadores. Cuando escribir la especificación CSS3 no se ha finalizado por lo que utilizar estas diferentes proveedores prefijos como medida provisional. Los navegadores modernos apoyarán una de estas reglas y caso omiso de los demás.

La última línea es la regla de que la especificación CSS3 define actualmente, por lo que escribimos este último con el fin de sustituir los prefijos de proveedores cuando los navegadores empiezan a apoyarlo.

Debido a que la sintaxis es tan complicado que lo mejor es utilizar este generador para evitar cometer errores.

Navegadores compatibles

Navegador	Soporta Gradients en CSS3 ?
Firefox 3.6+	Soporte completo
Firefox 1-3	No
Safari 4+	Soporte completo
Safari 1-3	No
Chrome 1+	Soporte completo
IE10	Soporte completo
Opera 11.1+	Soporte completo

Generador Gradient en CSS3

CSS3 Gradients Explicación

Navegadores compatibles