Comunidad de diseño web y desarrollo en internet

Degradados en CSS de cualquier color

Este es un truco que tal vez podría seros útil ya que permite utilizar degradados en la web sólo con CSS. Con esta técnica se obtienen cosas del estilo de lo siguiente:

degradados

Generando las cajas:

Aqui pondrémos tres cajas, una con color de fondo rojo, otra azul y otra verde.

<div class="degradado" style="background-color: #ff0000;"></div>
<div class="degradado" style="background-color: #00ff00;"></div>
<div class="degradado" style="background-color: #0000ff;"></div>

El efecto funciona gracias a una imagen PNG con transparencia alfa como la siguiente:

degradado

imagen con transparencia alfa

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 éste color, sobreimprimir la imagen.

Nota: Para solucionar la incorrecta visualización de los ficheros PNG en Internet Explorer se utiliza la técnica detallada en png32 en Internet Explorer de Cristalab.

La clase CSS:

.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);
}

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

Javier Carrasco

Cristalab y Mejorando.la te traen el Curso Profesional de Node.js y Javascript. Online, avanzado, con diploma de certificación y clases en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate