Regreso al concepto del post anterior, dando dos pasos más atrás. Cuando vimos un ejemplo de fondo degradado desde un color hasta quedar transparente, se usó una imagen *.png que funcionaba en casi todos los navegadores. Para
IE6 había que usar un filtro que 'habilitara' el canal alfa, pero para las versiones anteriores solamente se podía generar el efecto con filtros
gradient o
alpha; es decir, con capas, y no realmente con un
background CSS.
En el código anterior la transparencia sí está en el fondo, que es un color que contiene en sí mismo el cambio de opacidad. Pero no se puede ir degradando.
Una de las enormes desventajas de la propiedad CSS
opacity con respecto al filtro
alpha, es que no se puede manipular más que el grado de transparencia; en cambio las variables del filtro nos dejan poner valores de inicio y fin de opacidad, además de límites de posición.
Así que en navegadores como
Opera o
Mozilla / Firefox no podemos usar el truco de poner una capa gradiente a modo de fondo.
Pero con
webkit sí. Es más, ni siquiera es necesario, porque
Safari permite generar colores de fondo con efectos de gradiente además de transparencias. El problema del siguiente código es que solamente lo pude hacer andar en
Chrome / WXP. En
Safari / WXP, no. Será cuestión de tiempo para que todos los navegadores adopten estas funciones CSS.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">
</script>
style type="text/css">
body {background-color: #ffffff; background-image: url(http://www.forosdelweb.com/images/rating/rating_5.gif); }
#degradado {background: -webkit-gradient(linear, left top, left bottom, from(#0000ff), to(transparent));
display: block; height: 10em; width: 10em; border: 0.1em solid black;
-webkit-box-shadow: 0.3em 0.5em 1em #0000ff;
text-shadow: 0.2em 0.2em 0.2em #996600;
font: bold 2em sans-serif; text-align:-webkit-center;
-webkit-border-bottom-left-radius: 0.5em 0.5em;
-webkit-border-bottom-right-radius: 0.5em 0.5em;
-webkit-border-top-left-radius: 0.5em 0.5em;
-webkit-border-top-right-radius: 0.5em 0.5em; }
</style>
</head>
<body>
<h2>Fondo degradado (Chrome).</h2>
<div id=degradado>Foros del Web<br>
Foros del Web<br>
Foros del Web<br>
Foros del Web<br>
Foros del Web<br>
Foros del Web<br>
Foros del Web<br>
Foros del Web</div>
</body>
</html>
Un detalle del código anterior es que agregué otros
webkit para probar que sí funcionan en
Safari, incluyendo unas sombras que muestran el gradiente.
Todos andan, menos el del fondo
Ya que hablé de las imágenes, aprovecho el tema y así no sigo editando el anterior. No sé si es porque están en un servidor gratis, o por la forma en que éste comprime y descomprime, o almacena los archivos; pero la última vez que se me dio por probarlos esos *.png estaban algo deteriorados. Pudo ser un problema de ese momento, no sé. De cualquier forma, los códigos funcionan. Quizá en
IE 8+ haya que actualizar la sintaxis de los filtros, aunque
AlphaImageLoader es sólo para
IE 6. Las versiones siguientes ya reconocen el canal alfa ellos solitos.