Degradados en CSS de cualquier color (Cristalab)

Estás en: Cristalab > Tutoriales > Degradados en CSS de cualquier color

Degradados en CSS de cualquier color

Por: jacarma + Otros tutoriales de jacarma + 4 de Diciembre del 2006

Autor

jacarma
clabLevel: 1
1 Tutoriales
0 Ejemplos

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

Información adicional

Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros

Cristalab