Consejo rápido Entender los gradientes de CSS3

Crear una imagen con el único fin de mostrar un degradado es inflexible y se está convirtiendo rápidamente en una mala práctica. Desafortunadamente, en el momento de escribir este artículo, es muy posible que todavía sean necesarios, pero esperemos que no sea por mucho tiempo. Gracias a Firefox y Safari / Chrome, ahora podemos crear gradientes potentes con un mínimo esfuerzo. En este consejo rápido de video, examinaremos algunas de las diferencias en la sintaxis cuando trabajamos con los prefijos de proveedores -moc y -webkit.

Suscríbete a nuestra página de YouTube para ver todos los videos tutoriales.!

Webkit

Si bien Mozilla y Webkit generalmente adoptan la misma sintaxis para las propiedades de CSS3, lamentablemente no están del todo de acuerdo cuando se trata de gradientes. Webkit fue el primero en adoptar gradientes y utiliza la siguiente estructura:

 / * Sintaxis, tomada de: http://webkit.org/blog/175/introducing-css-gradients/ * / -webkit-gradient (,  El, ]?,  El, ]? El, ] *) / * En la práctica ... * / background: -webkit-gradient (linear, 0 0, 0 100%, from (red), to (blue));

No te preocupes si tus ojos pasan por alto esa sintaxis; ¡El mío también! Solo tenga en cuenta que requerimos una lista de parámetros separados por comas.

¿Qué tipo de gradiente? (lineal)
Coordenadas de los ejes X e Y de donde comenzar. (0 0 - o esquina superior izquierda)
Coordenadas de los ejes X e Y de dónde concluir (0 100% - o esquina inferior izquierda)
¿De qué color para empezar? (de (rojo))
¿Con qué color para concluir? (a (azul))

Mozilla

Firefox, que implementó el soporte de degradado con la versión 3.6, prefiere una sintaxis ligeramente diferente.

 / * Sintaxis, tomada de: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ * / -moz-linear-gradient ([ || ,]? ,  El, ] *) / * En la práctica * / background: -moz-linear-gradient (top, red, blue);

Observe cómo hemos colocado el tipo de degradado, lineal, dentro de la extensión del proveedor.
¿Dónde debería comenzar el gradiente? (arriba - también podríamos pasar en grados, como en -45 grados)
¿De qué color para empezar? (rojo)
¿Con qué color para concluir? (azul)

Paradas de color

¿Qué sucede si no necesita un gradiente del 100% de un color a otro? Aquí es donde entran en juego las paradas de color. Una técnica de diseño común es aplicar un gradiente corto y sutil, como este:

Tenga en cuenta el sutil degradado de blanco a negro en la parte superior.

En el pasado, la implementación estándar consistía en crear una imagen, establecerla como fondo de un elemento y configurarla para que se repita horizontalmente. Sin embargo, con CSS3, esto es un juego de niños..

 fondo: blanco; / * retroceso para navegadores antiguos / no compatibles * / background: -moz-linear-gradient (top, #dedede, white 8%); fondo: -webkit-gradiente (lineal, 0 0, 0 8%, desde (#dedede), hasta (blanco)); borde superior: 1px blanco sólido;

Esta vez, establecemos que el gradiente concluya en 8%, en lugar de 100%, que es el valor predeterminado. Tenga en cuenta que también estamos aplicando un borde superior para agregar contraste; esto es muy comun.

Si deseamos agregar un tercer color (o No), podemos hacer:

 fondo: blanco; / * retroceso para navegadores antiguos / no compatibles * / background: -moz-linear-gradient (top, #dedede, white 8%, red 20%); fondo: -webkit-gradiente (lineal, 0 0, 0 100%, de (#dedede), color-stop (8%, blanco), color-stop (20%, rojo);

Con la versión -moz, designamos que, al 20% de la altura del elemento, ahora deberíamos estar en el color rojo..
Para -webkit, usamos stop de color y pasamos dos parámetros: dónde debe ocurrir la detención y cuál debe ser el color..

Notas importantes sobre los gradientes de CSS

Úsalos tanto como puedas. Si está bien dejar que los usuarios de IE vean un color sólido, lo invito a usar este método.
IE6 / 7/8, Opera, Safari 3 y Firefox 3 no pueden generar gradientes CSS3. Los usuarios de Firefox y Safari generalmente se actualizan a menudo, por lo que no es tan importante..
Siempre aplique un fondo predeterminado, de color sólido, para los navegadores que no entiendan los prefijos de los proveedores.
Nunca use un degradado de rojo a azul, como hice para los ejemplos.
¡Las páginas web no necesitan verse igual en todos los navegadores! :)

Gracias por leer / mirar!

Código