Degradados en CSS de cualquier color

agosto 12, 2007

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:

 

 

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:

   

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

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: