Texto transparente en Firefox (como filter chroma)

furoya · #1 (**permalink**) 20/10/2008, 16:33

Todos hemos oido hablar del efecto "chromaK" o de "pantalla azul" (también puede ser verde). Se filma o se graba una escena con un telón de fondo de un color 'liso'; luego en la posproducción, todo lo que tenga ese color se hace transparente y eso permite poner una imagen u otra película detrás para que se incorpore a la escena.

El efecto es muy fácil de hacer en una página web : se usa un filtro chroma() aplicado (p.e.) a un texto para hacerlo transparente, y que se vea la imagen de fondo como si fuera un diseño en las mismas letras.

Efecto Máscara / Marquesina

El problema es que los filtros DX son para Internet Explorer.

En Firefox el método es más complicado, pero también se puede. Hay que usar una combinación de CSS, JS, canvas (HTML) y un 'filtro' XOR. En realidad no sería un croma-K, porque no se transparenta un color sino el cruce de 2 capas, pero para el caso funciona lo mismo.

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>EFECTO CROMA-K.</title>
<script type="text/javascript">
function transparenta(){

var miTexto = document.getElementById("texto");
var ancho = miTexto.offsetWidth;
var alto = miTexto.offsetHeight;

if(navigator.userAgent.indexOf("Firefox") != -1){
var canvas = document.getElementById("cromaK");
canvas.style.display = "block";

var cadena = miTexto.textContent;
miTexto.style.display = "none";

canvas.width = ancho;
canvas.height = alto;
var ejemplo = canvas.getContext("2d");

var colorFondoTexto = 
document.defaultView.getComputedStyle(miTexto, null).getPropertyValue("background-color");
var colorTexto = 
document.defaultView.getComputedStyle(miTexto, null).getPropertyValue("color");
var grosorTexto = 
document.defaultView.getComputedStyle(miTexto, null).getPropertyValue("font-weight");
var tamanoTexto = 
document.defaultView.getComputedStyle(miTexto, null).getPropertyValue("font-size");
var fuenteTexto = 
document.defaultView.getComputedStyle(miTexto, null).getPropertyValue("font-family");

ejemplo.fillStyle = colorFondoTexto;
ejemplo.fillRect(0, 0, ancho, alto);
ejemplo.save();
ejemplo.globalCompositeOperation = "xor";
ejemplo.translate(0, alto*0.8);
ejemplo.mozTextStyle = grosorTexto+ " " +tamanoTexto+ " " +fuenteTexto;
ejemplo.mozPathText(cadena);
ejemplo.fillStyle = colorTexto;
ejemplo.fill();
ejemplo.restore();
}}
onload = transparenta;
</script>
<style>
html{height:100%; width:100%; }
body{color:#ffffff; background-color:#000000; }

#contenedor{background-image:url(http://img43.imageshack.us/img43/9528/marmol2in.gif); 
background-color:#ffff80; overflow:visible; 
min-width:10px; min-height:10px; float:left; height:1; width:1; 
border:1px solid #ffff00; white-space:nowrap; }

#texto{font:bold 100px 'verdana' 'arial' 'serif'; 
filter:progid:DXImageTransform.Microsoft.Chroma(color='#ffffff'); color:#ffffff; 
background-color:#000000; zoom:1; }

#cromaK{display:none; }
</style>
</head><body>
<h2>Simula el filtro <tt>Chroma()</tt> (de IE) en Firefox. </h2>

<div id="contenedor"><span id="texto">Foros del Web</span><canvas 
id="cromaK"></canvas></div>

<p><strong>En el ejemplo las letras parecen transparentes y 
dejan ver el dise&ntilde;o de fondo.</strong></p>
</body></html>

Aunque debería verse en cualquier Mozilla, éste es para Firefox y para IExplorer 5.5+.

Efecto borroso o nublado o desenfocado, sin filter blur.

Voltear texto verticalmente en Firefox ( sin filter : flipV(); flipH() )

Panino5001 · #2 (**permalink**) 21/10/2008, 20:23

Genial