Con esta técnica se obtienen cosas del estilo de lo siguiente.
El código que genera las cajas es este:
<div class="degradado" style="background-color: #ff0000;"></div>
<div class="degradado" style="background-color: #00ff00;"></div>
<div class="degradado" style="background-color: #0000ff;"></div>
...
Para ello se ha creado una imagen PNG con transparencia alfa como la siguiente:
En firefox la verás correctamente y en internet explorer como un cuadro blanco.
Es una imagen con un degradado de blanco a transparente.
El truco es poner el color de fondo que prefieras a la caja DIV y luego sobre este color, sobreimprimir la imagen.
Para solucionar la incorrecta visualización de los ficheros PNG en Internet Explorer se utiliza la técnica detallada en daltonlp.com.
El último elemento es la clase CSS:
<style>
.degradado {
width: 60px; height: 80px;
background-position:center;
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='degradado.png');
}
/* IE ignores styles with [attributes], so it will skip the following. */
.degradado[class] {
background-image:url(degradado.png);
}
</style>
.degradado {
width: 60px; height: 80px;
background-position:center;
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='degradado.png');
}
/* IE ignores styles with [attributes], so it will skip the following. */
.degradado[class] {
background-image:url(degradado.png);
}
</style>
Por supuesto si vais a usar cajas más grandes, usad una imagen más grande.
Etiquetas: web
Hay algunos descuidos en el código:
1) Para que funcione correctamente en Firefox, a la clase "degradado" hay que establecerle ancho y alto, de lo contrario lo repite. La otra posibilidad es darle el atributo de fijación (fixed) en el background.