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> 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.
7 comentarios, 2 referencias
+
#