Tutorial: Como crear fondos degradados con CSS3
En el presente tutorial explicaremos como crear fondos degradados con CSS3 que funcionan en los siguientes navegadores:
- Mozilla Firefox
- Webkit: Safari, Google Chrome, Epiphany, etc
Aunque CSS3 es un estándar y todos los navegadores deberían funcionar con la misma sintaxis, nos encontramos, una vez más, con la libre interpretación que hacen los diferentes navegadores con un mismo estándar, por este motivo vamos a explicar como crear fondos degradados con CSS3 con Mozilla Firefox y con Webkit por separado.
Crear fondos degradados con CSS3 y Mozilla Firefox
La sintaxis con Mozilla Firefox es la siguiente:
Veamos un ejemplo de degradado de negro a blanco desde arriba:
Veamos un ejemplo de degradado de negro a blanco desde arriba:
Como crear una página de error 404 personalizada
-moz-linear-gradient( [ || <ángulo>,]? , [, ]* )Veamos un ejemplo de degradado de negro a blanco desde arriba:
background: -moz-linear-gradient(top, black, white);Crear fondos degradados con CSS3 y Webkit
La sintaxis con Webkit es la siguiente:-webkit-gradient(, [, ]?, [, ]? [, ]*)Veamos un ejemplo de degradado de negro a blanco desde arriba:
background: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white));
En este caso estamos realizando degradado lineal desde el punto 0 0 (esquina superior izquierda) hasta el punto 0 100% (esquina inferior izquierda) desde el color negro al color blanco
Artículos que te pueden interesar
Como crear un localizador con HTML5Como crear una página de error 404 personalizada