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.
12 comentarios:
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.
Tienes toda la razón, ya lo he arreglado.
Muchas gracias.
Me he quedado a cuadros... pero sin degradar. Besos krisish.
El cabezero que has elegido para tu blog es muy chulo! Y los consejos que das para el degradado está muy bien.
Un saludo con "estilo" desde Barcelona.
Muchas gracias!!
La plantilla del blog la tomamos de Pannasmontata Templates, que tienen algunas bastante chulas.
Por cierto he pasado por tus blogs y me han parecido muy interesantes.
Un abrazo.
Entonces si quiero crear un degradado de todo el fondo de la web, no puedo hacerlo, salvo haicendo una imagen lo suficientemente grande como para cubrir toda la web no? :(
Efectivamente Adrian. No conozco ninguna forma estándar de expandir la imagen de fondo con CSS.
Si te basta con un degradado horizontal puedes crear una imagen de un solo píxel de alto y todos los píxeles de ancho que necesites y elegir background-repeat:x
Para un degradado vertical puedes hacer una imagen de un solo píxel de ancho y todos los píxeles de alto que quieras con background-repeat:y
Otra solución posible es crear una imagen con un degradado radial con origen en la esquina superior izquierda utilizando opacidad máxima como centro del degradado y transparencia máxima en los bordes y colocar esa imagen en la esquina superior izquierda del fondo con background-repeat:none
Publicar un comentario