Me costó mucho entender de qué están hablando, y aún no sé si lo logré. Insistimos siempre en que titulen los temas correctamente; aunque dobo reconocer que en su incoherencia, éste es muy llamativo. De otra forma ni lo hubiese abierto.
Empecemos por decir que una
scrollbar es esa herramienta que aparece —tipicamente— a la derecha y/o debajo de un bloque, tiene 3 botones (uno deslizable), y sirve entre otras cosas para desplazar el contenido.
Lo de meterle un texto como fondo no es imposible; sí es un truco limitadísimo, casi una curiosidad que no he visto hasta ahora en ningún ejemplo. Y lo de meter una imagen (puede ser de un texto en degradé) es también un truco, más viejo y conocido. Por eso cuando dijiste "
hasta ahí bien" pensé que podías estar hablando de eso,
Cukiwoman.
Pero no. Al final llegué a la conclusión de que estás buscando un bloque con barras de desplazamiento, al que quieres agregar 3 imágenes fijas, una de fondo, otra 'arriba' con un gradiente para que simule que el texto se desvanece —con el desplazamiento— hacia el fondo del documento,m y la última 'abajo', para el efecto inverso.
Ahí pensé
¿cómo puede ser que estos chicos le den tanta vuelta a un efecto tan pavo? ¡yo lo había hecho hace casi 10 años, y es tan obvio y tan conocido que debe estar por todos lados!.
Sin embargo, lo pensé mejor. Porque justamente lo hice "
hace casi 10 años". Hoy los navegadores se han vuelto tan incoherentes, que nos complican las cosas más fáciles. Y decidí participar.
Hasta aquí fue sólo una introducción. Como hay demasiadas situaciones en qué usar este efecto, y no voy a cubrirlas todas, dejo algunos ejemplos con estilo de tutorial, para que te vayas acostumbrando a leerlos. Porque si vas a participar en un foro especializado, mínimo tienes que haber leído 2 ó 3 antes de postear, aunque más no sea para que sepas explicar lo que buscas y que entiendas nuestras respuestas. (Mi respeto y aplauso para tí,
kseso?, que le entendiste a la primera).
___________________________
[Nota : las imágenes usadas en los ejemplos no serán las más adecuadas, porque no quiero seguir subiendo otras a servidores gratis ya que a cada rato desaparecen, tengo que reponerlas y editar todos los mensajes que las enlazaban. Una pena que
Foros del Web no tenga un espacio para subir imágenes, pero creo que debe ser difícil de implementar]
El efecto básico era para HTML/CSS. Se creaba un
div de (p.e.) 300 × 400 pixeles con
overflow: auto y una imagen de fondo con la misma medida y
background-attachment: fixed. Si el fondo del documento es (p.e.) negro, la imagen empieza arriba en negro, degrada a (p.e.) blanco hasta el medio y termina degradando otra vez a negro abajo.
El texto que contenga será negro, y la ilusión al desplazarse arriba y abajo es que se 'funde' con el documento antes de desaparecer.
Las limitaciones son muchas. Como la combinación de colores : si usamos texto rojo, se hará evidente que pasa 'por delante' y no 'por detrás' del gradiente. Además está el tamaño de la imagen, que debe ser igual a la del bloque (por lo menos en alto), ¡y ahora lo de fijar el fondo!.
Para no explicar de nuevo, dale una mirada a este post
Letras o imagenes transparentes #8
Éste debe ser el motivo por el que te desaparecen las imágenes.
Todos estos problemas tienen alguna solución. La de ver un fondo
fixed sin usar
fixed es meter 2 capas anidadas, la de atrás tiene el fondo y la de adelante la
scrollbar
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>
<style type="text/css">
body {background-color: #000080; color: #ffffff; }
#contenedor {width: 22em; height: 6em; background-color: #ffffff;
background-image: url(http://img72.imageshack.us/img72/5572/degrad018my.png);
background-repeat: repeat-x; color: #000080;
font-size: 1.5em; line-height: 0.75em; font-weight: bold; }
#contenido {width: 22em; height: 6em; overflow: auto; }
#fin {margin-top: 1000px; }
</style>
</head>
<body>
<h2>Imagen de fondo en capa contenedora con repetición horizontal detrás de capa de contenido. (IE6; FF3; Op9; Chr2)</h2>
<div id=contenedor>
<p id=contenido>Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
<span style="color:#ff0000;">
Foros del Web. Foros del Web. Foros del Web.</span> <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br></p>
</div>
<p id=fin>final</p>
</body>
</html>
Allí también se resuelve el ancho de la imagen con
repeat-x. Para que el texto se meta 'por debajo' de los degradé, la única que tenemos es ponérselos encima. Usar
position: fixed parece la solución obvia; pero tiene el mismo problema que los fondos, toman como referencia el documento
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">
function ancho(){
var anchoUtil = document.getElementById("contenedor").clientWidth;
document.getElementById("imag0").style.width = anchoUtil + "px";
document.getElementById("imag1").style.width = anchoUtil + "px";
}
onload = ancho;
</script>
<style type="text/css">
body {background-color: #000080; color: #ffffff; }
#contenedor {width: 22em; height: 6em; overflow: auto;
background-color: #ffffff; color: #800000; position: relative;
font-size: 1.5em; line-height: 0.75em; font-weight: bold; }
#contenedor #imag0 , #imag1 {position: fixed; width: 22em; height: 2em; margin-top: 0; }
#contenedor #imag1 {margin-top: 4em; }
#fin {margin-top: 1000px; }
</style>
</head>
<body>
<h2>Imágenes posición fija y escript para ajustar el ancho. (IE7; FF3; Op9; Chr2) BUG!</h2>
<div id=contenedor>
<img src="http://img72.imageshack.us/img72/5572/degrad018my.png" id=imag0>
<img src="http://img72.imageshack.us/img72/2408/semitrans017oh.png" id=imag1>
<p>Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
</p>
</div>
<p id=fin>final</p>
</body>
</html>
Sigue en el próximo mensaje.