Comprender los gradientes lineales de CSS3

Crear una imagen sólo para mostrar un degradado es inflexible y puede convertirse rápidamente en una mala práctica. Pero, lamentablemente, en el momento de escribir este artículo, es posible que todavía tenga que ser así, aunque esperemos que no por mucho más tiempo. Gracias a Firefox y Safari/Chrome, ahora podemos conseguir potentes degradados con el mínimo esfuerzo. En este artículo, mostraremos una implementación simple de gradientes CSS y en qué se diferencia esta propiedad en los navegadores Mozilla y webkit.

PD: El texto original de este artículo proporciona un video, pero por razones bien conocidas, no podemos verlo en Youtube. Los estudiantes que quieran verlo, busquen una manera de verlo usted mismo (hasta 720P): http. https://www.youtube.com/watch?v=9D2hyM5SSCE

kit web

Aunque Mozilla y Webkit generalmente adoptan la misma sintaxis para las propiedades CSS3, desafortunadamente no pueden ponerse de acuerdo sobre los gradientes. Webkit es el primer kernel del navegador que admite gradientes y utiliza la siguiente estructura:

/* Sintaxis, tomada de: http://webkit.org/blog/175/introtaining-css-gradients/ */
-webkit-gradient(, [, ]?, [, ]? [, ]*)

/* En la práctica... */
fondo: -webkit-gradient(lineal, 0 0, 0 100%, desde(rojo), hasta(azul));