Hablemos de Los degradados en CSS los (gradient)

Los degradados. Un degradado es una imagen que se desvanece sin problemas de un color a otro. En CSS utilizamos esta propiedad para aplicarla a los objetos, fondos o cajas, en css contamos con dos caminos para aplicar degradados a lo que necesitemos claro esta dependerá del proyecto, esas dos propiedades son: linear-gradient y radial-gradient. es decir degradado lineal y degradado radial. Vamos hablar de cada uno:

1 – degradado lineal o (linear-gradient)

Veamos un ejemplo del funcionamiento de este tipo de degradado y como funciona.

y tenfremos el siguiente resultado:

linear gradient css3

Es decir podriamos defirnirlo asi:

el color lo podemos definir en valor hexadecimal o el valor RGBA.

Ahora, para poder mostrar este buen efecto en los diferentes navegadores vamos a tener que aplicar los prefijos de propiedad de cada unos de los navegadores (-ms, -moz, -webkit, -op).Ejemplo:

Para Que funcione en Mozilla:

Para Que funcione en Internet explorer despues de la version 10:

Para Que funcione en Chrome y Safari:

Para Que funcione en Mozilla

Es decir que para tener un codigo completo tendriamos que tener el siguiente codigo:

Para obtener este resultado en todos los navegadores:

gradient-css3

Para los antiguos navegadores como internet explorer 6 + utilizaremos filtros, algo como esto:

Mas informacion de el degradado lineal Aqui.

2 – degradado radial o (radial-gradient)

El radialGradient o degradado radial lo que hace es presentarnos un degradado de forma circular, solo elegimos el punto de origen y su ángulo y claro el tipo de forma de propagación, puede ser circle o ellipse es decir circular o en forma de elipse.

De sintaxis podemos tomar este ejemplo:

Los valores los podemos definir asi:

<position> o <posicion> : la posición del epicentro del degradado si se omite el valor será center, o el centro del objeto.

<angle> o <angulo>: Es un parámetro que defini el angulo que se extiende desde el punto de partida por defecto es 0.

<shape>o<forma>: Define la forma del degradado.puede ser un circle o círculo (lo que significa que la forma del degradado es un círculo con un radio constante) o elipse (es decir, que la forma es una elipse alineado con el eje). El valor predeterminado es una elipse .

<size> o <tamaño>: define el tamaño del degradado.

Vamos a ver esta teoria en una practica visual:

para este codigo:

Tendriamos el siguiente resultado:

gradient radial

Recuerde que para poder visualizarlo correctamente en los diferentes navegadores vamos a tener que utlizar los prefijos de los navegadores, los recuerdas, seria algo asi:

Hay mucho de qué hablar acerca de los degradados en css, podemos crear muchísimos efectos y jugar con ellos.

Para saber mas acerca los degradados radiales ve a este link: http://www.w3schools.com/svg/svg_grad_radial.asp
o a este otro: https://developer.mozilla.org/en/CSS/-moz-radial-gradient

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo