El desgradado más sencillo que podemos hacer con CSS3 es el degradado lineal mediante la propiedad linear-gradient. Podremos variar el color, donde empieza, que ángulo, donde termina…
El código que utilizaremos podría ser el siguiente:
background-image: linear-gradient(top, #f00 0%, #00f 100%);
Y tendríamos lo que muestra esta imagen
Parece sencillo de utilizar, pero tenemos que tener en cuenta que no solo es copiar el código de arriba. Como es muy nuevo solamente funciona con los últimos navegadores como Opera, Chrome, Safari y Firefox. Además tenemos que especificar la etiqueta de estilo propietaria de cada navegador. Con esto el código que debemos de utlizar para que funcione correctamente es:
background: -webkit-linear-gradient(top, #f00 0%, #00f 100%); background: -moz-linear-gradient(top, #f00 0%, #00f 100%); background: -o-linear-gradient(top, #f00 0%, #00f 100%); background: linear-gradient(top, #f00 0%, #00f 100%);
En este caso concreto tenemos un degradado del rojo al azul y ocupa el 100% del elemento y comienza en la parte de arriba del elemento (debido a la etiqueta [highlight]top[/highlight] utilizada)
Para conseguir un degradado de izquierda a derecha, solamente tendríamos que cambiar la etiqueta top por la etiqueta left, como es este ejemplo (aprovechamos para utlizar otros colores)
background: -webkit-linear-gradient(left, #0f0 0%, #f0f 100%); background: -moz-linear-gradient(left, #0f0 0%, #f0f 100%); background: -o-linear-gradient(left, #0f0 0%, #f0f 100%); background: linear-gradient(left, #0f0 0%, #f0f 100%);
Veamos la imagen
Otra variante es parar uno de los colores, [highlight]color stop[/highlight], es una parada de color que está asignada con el 50% en el primer color. Quiere decir que el primer color estaría homogeneo (sin degradado) hasta el 50% del tamaño del elemento y que luego comenzaría a degradarse hacia el segundo color.
Un código para este caso podría ser:
linear-gradient(#00f 50%, #000);
Un código mas complejo utilizando color stop puede ser el siguiente: vemos que no hay gradiente, esto es debido a que comento
background: -webkit-linear-gradient(top, #00f 50%, #0ff 25%, #f0f 25%); background: -moz-linear-gradient(top, #00f 50%, #0ff 25%, #f0f 25%); background: -o-linear-gradient(top, #00f 50%, #0ff 25%, #f0f 25%); background: linear-gradient(top, #00f 50%, #0ff 25%, #f0f 25%);
Podemos variar el ángulo e incluir todos los colores que queramos, por ejemplo (no espedifico todo el código necesarios para los navegadores por ahorrar espacio)
background: linear-gradient(45deg, #66f 10%, #f80 30%, #ffc 60%);
Donde: el degradado comienza en la esquina inferior izquierda al 10% del contenedor y continua con el segundo color hasta el 30% de lcontenedor para terminar con u ntercer color hasta el final.
Este mismo ejemplo para comenzar en la esquina superior izquierda tendríamos:
background: linear-gradient(-45deg, #66f 10%, #f80 30%, #ffc 60%);
Donde el águnlo es -45º en lugar de los 45º indicados en el primer caso.
Las variaciones pueden ser muchas y podremos combinar todo tipo de colores. El límite está solamente en tu imaginación.
