aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

En A List Apart, ayer hablaban de como conseguir unos fondos degradados de forma fácil y eficiente. Para ello usan una imagen PNG transparente al que asignandoló como fondo mediante CSS podremos conseguir un degradado bastánte bonito.

¿Que necesitamos?

En A List Apart usan un par de imagenes PNG de 100×100 pixeles, una que es un degradado de blanco a transparente y otro de negro a transparente. Despues mediante CSS definiremos una serie de colores.

.blue {
  background-color: #2382a1;
}
.green {
  background-color: #4be22d;
}
.pink {
  background-color: #ff009d;
}

Y ahora un par de clases con la definición de las imagenes como fondo.

.gradwhite {
  background-image: url(grad_white.png);
}
.gradblack {
  background-image: url(grad_black.png);
}

Mediante el uso de varias clases dentro del atributo class indicamos que tipo de degradado ha de aplicar a cada color.

<div class="box gradwhite blue"></div>
<div class="box gradwhite green"></div>
<div class="box gradwhite pink"></div>
<div class="box gradblack blue"></div>
<div class="box gradblack green"></div>
<div class="box gradblack pink"></div>

Ver el ejemplo

Y en Internet Explorer

Como es de esperar para Internet Explorer hemos de realizar una modificación de nuestro CSS para poder disfrutar de este degradado, esto se debe a que IE no se lleva muy bien con los PNG transparente, para ello aplicaremos un filtro que nos permitirá trabajar con este tipo de ficheros.

.gradwhite {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='grad_white.png',sizingMethod='scale');
}

* html .gradwhite img {
  display:none;
}

Importante: Hay que indicar la ruta absulta de donde se encuentra el fichero para que aparezca.

Compártelo