16 nov. 2012

Como crear fondos degradados con CSS3

Tutorial: Como crear fondos degradados con CSS3

En el presente tutorial explicaremos como crear fondos degradados con CSS3 que funcionan en los siguientes navegadores:
  1. Mozilla Firefox
  2. Webkit: Safari, Google Chrome, Epiphany, etc
Como ya os podéis imaginar, Internet Explorer  en sus versiones 6, 7 y 8 no dan soporte a CSS3, aunque existen soluciones para 'hacerlos compatibles'.

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:
-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 HTML5
Como crear una página de error 404 personalizada