Letras o imagenes transparentes

Rebel001 · #1 (**permalink**) 25/01/2006, 17:38

Que tal. Les escribo por que tengo una duda, ahora no recuerdo la página pero una vez vi un sitio web en el que tenia una imagen de fondo estática, con eso no tengo problema, pero lo que me llamó la atencion es que al bajar el scroll hacia abajo las letras rojas se posaban sobre una parte roja de la imágen de fondo y se volvian blancas.... ¿Alguien sabe como hacer eso?.

Gracias.

kemie · #2 (**permalink**) 26/01/2006, 03:48

checate este tutorial a ver si es lo que buscas
http://www.westciv.com/style_master/...ide/index.html

fullmental · #3 (**permalink**) 26/01/2006, 10:49

jeje, esta muy sencillo...

Rebel001 · #4 (**permalink**) 26/01/2006, 18:00

Gracias, aun no se si es lo que busco pero gracias XD

furoya · #5 (**permalink**) 03/02/2006, 12:01

Hola todos :

Qué idea interesante.

Estoy casi seguro de que lo que viste estaba hecho con flash, Rebel001. Pero estuve probando con javascript y algo se puede hacer.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>CONTRASTE.</title>
<style type="text/css">
html {overflow:hidden; margin:0; height:100%; }
body {background-color:#990000; color:white; overflow:hidden; margin:0; height:100%; }

#contenedor {position:relative; top:0; left:0; overflow:auto; height:100%; width:100%; position:fixed; }

#alfa , #bravo {position:absolute; top:0; left:0; font-size:30px; 
font-weight:bold; color:#cccccc; background-color:#990000; padding-top:350px; }

#bravo {color:#990000; background-color:#ffffff; clip:rect(50px,600px,200px,100px); 
width:100%; overflow:hidden; }

.charly {padding:15px;}

.delta {background-image:url("http://www.forosdelweb.com/images/statusicon/user_offline.gif"); 
height:30px; background-repeat:repeat-x; width:90%; }

#bravo .delta {background-image:url("http://www.forosdelweb.com/images/statusicon/user_invisible.gif"); 
}

</style>
<script type="text/javascript">
var dist = 0;
var arrI = 50;
var abaI = 200;

function inicio(){
var contenido = document.getElementById("alfa").innerHTML;
document.getElementById("contenedor").scrollTop = "0";
document.getElementById("bravo").innerHTML = contenido;
document.getElementById("bravo").style.clip = "rect(50px,600px,200px,100px)"
}

function mueve(){
dist = document.getElementById("contenedor").scrollTop;
document.title = dist;
status = dist;
arrF = arrI + dist;
abaF = abaI + dist;

document.getElementById("bravo").style.clip = "rect("+arrF+"px, 600px, "+abaF+"px, 100px)";
}
</script>
</head >
<body onload="inicio()" onscroll=none>

<div id="contenedor" onscroll="mueve()" >

<div id="alfa">
<div class="charly">
<h1>Al desplazarse el texto sobre el <em>banner</em> blanco cambia su color. (IE7, FF3, Op9.6, Chr)</h1>
<div class="delta"></div>
QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP 
QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP 
QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP 
QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP 
QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP <br />QWERTYUIOP <br />QWERTYUIOP <br />QWERTYUIOP 
<br />QWERTYUIOP <br />QWERTYUIOP <br />QWERTYUIOP <br />QWERTYUIOP <br />QWERTYUIOP 
<br />QWERTYUIOP <br />QWERTYUIOP <br />QWERTYUIOP <br />QWERTYUIOP 
</div>
</div>

<div id="bravo">
</div>

</div>
</body>
</html>

En el IExplorer6 (y seguramente en los otros) el rectángulo salta un poco; pero en Firefox no se nota tanto. Aunque también depende de los recursos del SO.

Texto transparente en Firefox (como filter chroma)

Rebel001 · #6 (**permalink**) 10/02/2006, 00:22

Muchas gracias furoya.

furoya · #7 (**permalink**) 22/01/2009, 09:03

De nada Rebel001. Hace un tiempo volví para actualizar el código que puse arriba; tenía un bug en Opera que no corregí (todavía está), pero lo parché con un position:fixed y ahora no se nota.
Otra cosa que tendría que corregir son los saltos del cuadro blanco. Se puede hacer una animación de desplazamiento suave, quizá con "amortiguación"; ya hubo temas donde se mencionó el asunto. Si nadie lo hace antes, quizá junte ganas y se lo agregue. Les dejo algunos enlaces.

Smooth scroll

Mover un DIV con efecto Easing

backgound image resizable?

Velocidad Opacity en imagen

Mirando otra vez la idea original, se me ocurrió otro efecto. Y me puse a trabajar porque iba a ser muy fácil. Había que superponer parcialmente las letras de un texto, donde se cruzaran los colores se debían mezclar formando —claro— otro color que sería la suma de ambos. Pero la transparencia era sólo entre letras, no contra el fondo del párrafo o del documento.

A estas alturas, ya se imaginarán que el efecto se hace con dos capas de texto superpuestas, la de adelante con la transparencia. Jugando con letter-spacing, y el z-index con el orden invertido, tendríamos todo resuelto.
Lo más difícil es hacer que no se repitan los colores aleatorios en dos letras seguidas (que lo resolví más o menos).

Pues no. No fue nada fácil. Fue una tragedia. Los span me ignoraban el z-index, si le ponía el layout para el filtro perdía el espaciado entre caracteres, si le daba position:relative en IE aparecía un "background-color" para cada letra.

Un ejemplo sencillo y didáctico que debió salir 'de taquito' me demandó casi 3 horas. y terminó siendo un engendro espantoso, que lo posteo solamente para ver si alguien tiene una idea mejor. A mí se me terminaron.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>MEZCLA COLORES.</title>
<script type="text/javascript">
function colores(){
var misLetras1 = "";
var misLetras2 = "";

var misColores = ["c0c0c0","808080","000000","800000","ff0000","800080","ff00ff","008000","00ff00","808000","ffff00","000080","0000ff","008080","00ffff","ffffff"];

var miColor = Math.floor(Math.random()*15);

var miParrafo1 = document.getElementById("texto1");
var miParrafo2 = document.getElementById("texto2");
var miTexto = (miParrafo1.innerText)? miParrafo1.innerText : miParrafo1.textContent;
miTexto = miTexto.replace(/ /g, "_");
var textoCortado1 = miTexto.split("");
var largoTexto = textoCortado1.length;
var letrasX = [];

document.getElementById("contenedor").style.height = miParrafo1.offsetHeight +"px";

miParrafo1.innerHTML = "";

for(c=0; c<largoTexto; c++){
var colorLetra = Math.floor(Math.random()*15);
colorLetra = (colorLetra == miColor)? colorLetra+1 : colorLetra;
miColor = colorLetra;

textoCortado1[c] = "<span style='color:#"+ misColores[colorLetra] +";'>"+ textoCortado1[c] +"</span>";

miParrafo1.innerHTML += textoCortado1[c];
letrasX[c] = miParrafo1.getElementsByTagName("span")[c].offsetLeft;

}

var textoCortado2 = textoCortado1;
textoCortado2.reverse();
letrasX.reverse();

miParrafo2.innerHTML = "";

for(c=0; c<largoTexto; c++){

miParrafo2.innerHTML += textoCortado2[c];
miParrafo2.getElementsByTagName("span")[c].style.position = "absolute";
miParrafo2.getElementsByTagName("span")[c].style.left = letrasX[c] +"px";
}

}
onload = colores;
</script>
<style type="text/css">
body {font-size:100%; background-image: url(http://www.forosdelweb.com/images/statusicon/forum_old_lock.gif); }
h2 , p {color:#000000; background-color:#ffffff; }
#contenedor {position:relative; }
#texto1 , #texto2 {color:#ffffff; font-family:arial, verdana, sans-serif; font-size:8em; font-weight:bold; white-space:nowrap; position:absolute; top:0; left:0; }
#texto1 {letter-spacing:-0.3em; filter:alpha(opacity="40"); -khtml-opacity:.4; -moz-opacity:.4; opacity:.4; }
</style>
</head>
<body>
<h2>El texto encimado mezcla sus colores entre caracteres pero no contra el fondo. (IE7, FF3, Op9.6, Chr0.2)</h2>

<div id=contenedor>
<div id=texto2></div>
<div id=texto1>FOROS DEL WEB.</div>
</div>

<p><strong>Los espacios se reemplazan por 'guiones bajos'.</strong></p>
</body>
</html>

Sí, sí, ya sé. Pero al menos es compatible.

Digo, porque la otra forma que se me ocurrió después no lo es.
En mi primer mensaje dije que el efecto debía estar hecho con flash. Porque me olvidé del IE5.5 y sus DX

DXImageTransform.Microsoft.Compositor()

Este filtro permite modificar 2 capas superpuestas sumando o restando sus colores, "recortando" el contorno de un elemento (como un texto) del otro, y algunos efectos más que no recuerdo.
Pero es muy díficil de usar. Aunque es CSS, un muchos casos hay que "guardar" una capa, "ubicar" la otra y después "aplicar" el filtro ... y todo esto se hace con JS!

Los demás navegadores tienen su propia versión, para canvas

globalCompositeOperation

pero también usa JS y el texto sería sólo para la familia Mozilla. Así que seguimos con las incompatibilidades.

Igual les dejo un par de ejemplos

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CRUCE DE COLORES. (DX)</title>
<style type="text/css">
body{color:#ffffff; background-color:#000000; font-size:100%; }

#contenedor0{position:relative; height:3em; color:#ffff00; 
background-color:#333333; font-size:4em; }

#contenedor1 {position:relative; height:3em; color:#ffffff; background-color:transparent; font-size:1em; filter:progid:DXImageTransform.Microsoft.Compositor(); }

#cuadroFondo, #cuadrofrente {position:absolute; height:1em; width:2.6em; top:0; left:0; background-color:transparent; color:#ff0000; font:bold 2em arial, verdana, sans-serif; 
white-space:nowrap; }

#cuadrofrente {color:#ffffff; }

#fDw {font:bold 1em arial, verdana, sans-serif; top:0.75em; 
left:1em; position:absolute; white-space:nowrap; }
</style>
</head>
<body>
<h2>La superposici&oacute;n de dos textos 
se destaca con otro color. (IE5.5+)</h2>


<div id=contenedor0>
<div id=cuadroFondo><(o)></div>
<div id=contenedor1>
<div id=fDw>FOROS DEL WEB.</div>
</div>
</div>


<script type=text/javascript>

var ancho;
var origen = 0;
var dirForos = 2;

function mueve(){
dirForos = (origen < 0)? 2 : (origen > ancho)? -2 : dirForos;

origen = origen + dirForos;

document.getElementById("cuadroFondo").style.left = origen + "px";
document.getElementById("cuadroFrente").style.left = origen + "px";

setTimeout("mueve()", 100);
}

function cambia0(){	alert('cambia0');

document.getElementById("contenedor1").filters.item(0).Apply();
document.getElementById("contenedor1").innerHTML = 
"<div  id=cuadroFrente>" + document.getElementById("cuadroFondo").innerHTML + "</div>";
document.getElementById("contenedor1").filters.item(0).Play();

setTimeout("cambia1()" , 1000);
}

function cambia1(){	alert("cambia1");

document.getElementById("contenedor1").filters.item("DXImageTransform.Microsoft.Compositor").Function = 10;

ancho = document.getElementById("contenedor1").offsetWidth - document.getElementById("cuadroFondo").offsetWidth;

mueve();
}

onload = cambia0;
</script>

<p>Ambos textos de color blanco cambian a rojo en las zonas de cruce.</p>
</body>
</html>

_____________________

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head>
  
<title>CRUCE DE COLORES. (CANVAS)</title>
 
<script type="text/javascript">
var dm = 40;
var dir = 1;

function contraste(){

document.getElementById("contenedor").innerHTML = "var dm = "+dm+"<canvas id='circArroba' width='200' height='200'>";
var elCanvas = document.getElementById('circArroba').getContext('2d');

elCanvas.translate(20, 115);
elCanvas.mozTextStyle = 'bold 100px arial, verdana, sans-serif';
elCanvas.mozPathText('@');
elCanvas.fillStyle = "#ff0000";
elCanvas.fill();

elCanvas.globalCompositeOperation = "xor";

dir = (dm < 30)? 1 : (dm > 80)? -1 : dir;
dm = dm + dir;
elCanvas.fillStyle = "#ff0000";
elCanvas.beginPath();
elCanvas.arc(90,0,dm,0,Math.PI*2,true);
elCanvas.fill();

}

function inicio(){
setInterval(contraste,60);
}

onload = inicio;
</script>
<style type="text/css">
body {background-color: #000000; color: #ffffff; }
#contenedor {background-color: #ffffff; color: #000000; width: 200px; }
</style>
</head>
<body>
<h2>Capas de <code>canvas</code> se transparentan con <code>"xor"</code>. (Moz)</h2>

<div id=contenedor><canvas id=circArroba width="200" height="200"></canvas></div>
<p>Ambas capas de color rojo cambian al blanco de fondo en las zonas 
de cruce.
</p>
</body>
</html>

Los primeros ejemplos que pusimos kemie y yo —insisto— al menos funcionan en ... ¿todos?

.

furoya · #8 (**permalink**) 15/05/2009, 15:10

A partir de IE 7 podemos decir que este truco funciona en todos los navegadores. lo malo es que sirve sólo para imágenes. Más aún, para imágenes de fondo.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>FONDO REEMPLAZADO.</title>
<style type="text/css">
html {height: 100%;}
body {font-size: 100%; height:200%; width: 200%; padding:0; margin:0; 
background:#000000; color: #ffffff; 
background-image: url(http://static.forosdelweb.com/fdwtheme/images/statusicon/forum_old.gif); 
background-attachment: fixed;}
h2 {background-color: #000000; }

.caja {font-size: 150%; height:2.5em; width: 10em; font-weight: bold; 
padding:10px 20px; margin-top: 20%; margin-left: 40%; 
background-color: blue; background-attachment: fixed; 
background-image: url("http://static.forosdelweb.com/fdwtheme/images/statusicon/forum_new.gif"); 
overflow: auto; color: #000000; }
</style>
</head><body>
<h2>Al desplazar el contenido se reemplaza la imagen de fondo.</h2>

<div class="caja">
FOROS DEL WEB<BR>
FOROS DEL WEB<BR>
FOROS DEL WEB<BR>
FOROS DEL WEB</div>

</body></html>

El efecto aparece porque todos los background-attachment: fixed toman como origen el mismo del documento. Poniendo igual diseño, con distintos colores en el body y en una capa desplazable, ésta crea la ilusión de un reemplazo de colores al moverse.
No sirve para versiones más viejas del MSIE, porque cada fondo se fijaba al elemento de origen en que estaba declarado. Que por otro lado es lo que corresponde.

Vamos a creer que IE 6 fue el último navegador coherente de Microsoft.
De cualquier forma, si podemos aprovechar estos bugs para inventar nuevos efectos, está muy bien. Ahora sólo nos resta buscar un código para que todos los navegadores pongan los fondos como lo hacía el IExplorer 6; por si alguna vez necesitamos que se vean donde deben.

En este enlace hay más efectos para probar

http://www.cssblog.es/truco-de-scrol...-css/#more-648