30

11

Degradados con CSS3

Otra gran novedad de CSS3 es poder usar degradados, sin ninguna falta de usar imágenes, lo que nos ayuda a reducir enormemente el tamaño de nuestra web si usa varios degradados.
Antiguamente Internet Explorer tenía su propio método y los navegadores basados en WebKit igual, pero el estándar se a parado en el que os voy a enseñar, que nos permite establecer la dirección del degradado y los colores y sus posiciones.

Para explicaros el funcionamiento tomaremos de referencia el primer degradado (de color gris oscuro a gris claro), que empieza desde la izquierda (left) y en la posición 0% del degradado tiene el tono oscuro y en la parte final el claro (100%).
Nota: puede que sea necesario usar los prefijos de cada navegador (-webkit-, -moz-...).

1. background: linear-gradient([Dirección], [Color] [Posición en %], [Color] [Posición en %]);

Como funciona

En los degradados podemos añadir tantos colores como queramos y podemos establecer la posición del mismo (con un valor porcentual, donde 0% es el inicio y 100% es la parte final).
Este es el código del tercer ejemplo (el de los tres colores):

1. background: linear-gradient(left, #00B159 0%, #F37735 50%, #EC098C 100%);

Podemos establecer cualquier dirección del degradado estableciéndola en grados (deg) o con los nombres propios de posición como top, bottom, left y right.
En el siguiente ejemplo estableceremos que el degradado tenga una orientación de 60 grados (60 deg) y estableceré un par de colores con posiciones juntas para que se vea bien.

1. background: linear-gradient(60deg, #F37735 40%, #EC098C 60%);

Degradados circulares

Los degradados anteriores era degradados lineales y ahora usaremos degradados circulares.
Para este tipo de degradados no nos hace falta establecer la dirección del degradado, sino que debemos de establecer el centro (origen) del degradado, de la misma forma que establecemos donde empieza una imagen de fondo (si establecemos center se centrará en cambio podemos establecer valores porcentuales como 0% 100%, que sería lo equivalente a left bottom, que también podríamos usarlo escrito).

1. background: radial-gradient(left bottom, circle, #F37735 40%, #EC098C 60%);