Crea fondos degradados con CSS

  • 12
Practicando el diseño web se nos ha ocurrido un truco que tal vez podría seros útil ya que permite utilizar degradados en la web solo con CSS.
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>

Por supuesto si vais a usar cajas más grandes, usad una imagen más grande.

12 comentarios:

Anónimo dijo...

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.

jacarma dijo...

Tienes toda la razón, ya lo he arreglado.
Muchas gracias.

Isabel Barceló Chico dijo...

Me he quedado a cuadros... pero sin degradar. Besos krisish.

NATRIBU dijo...

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.

jacarma dijo...

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.

Unknown dijo...

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? :(

jacarma dijo...

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

Anónimo dijo...
Este comentario ha sido eliminado por un administrador del blog.
Anónimo dijo...
Este comentario ha sido eliminado por un administrador del blog.
Anónimo dijo...
Este comentario ha sido eliminado por un administrador del blog.
Anónimo dijo...
Este comentario ha sido eliminado por un administrador del blog.
Anónimo dijo...
Este comentario ha sido eliminado por un administrador del blog.