Foros del web, para los que viven de bits

cincinatto · 25-oct-2004, 18:25

Hola, soy nuevo por acá y me gustaría saber si alguien puede ayudarme con un efecto que quiero para mi web.

La idea es que a una celda de disposición o a una tabla le pueda poner un color de fondo, pero traslúcido, es decir, semitransparente y no sólido como está en las opciones del editor dreamweaver.
Mi idea es poner una imagen de fondo en la página y sobre esta las celdas y tablas, pero transparentes.
Alguien por ahi me hablo sobre esta opcion "opacity" y que habia que insertarla en el código, pero realmente me la ha ganado, asi que si alguien pudiese ayudarme le estaría eternamente agradecido.

de antemano gracias.

CreaTuSitio.com · 25-oct-2004, 20:05

opacity es para el filter, vease http://msdn.microsoft.com/workshop/a...es/opacity.asp

seria mas o menos asi:
<table bgcolor="red" style="filter:progid:DXImageTransform.Microsoft.Al pha(
opacity = 50 )"><tr><td>aaaa</td></tr></table>

Defero.tk · 26-oct-2004, 03:44

Una pregunta... eso sólo funcionará en MS Internet Explorer, no?

A lo mejor puedes hacerlo con un fondo en formato PNG semitrasnparente. Mira estos ejemplos:

http://www.libpng.org/pub/png/png-rgba32.html
http://www.mozilla.org/start/1.0/demos/eagle-sun.html

Eso sí, si pretendes que se vean bien las transparencias con MS Internet Explorer (por desgracia el más usado), deberás utilizar este truco.

PascalC · 26-oct-2004, 03:54

con navegadores modernos se hace mediante el parametra css opacity.

En todos los casos, tanto el fondo como el contenido seran traslucidos, si solo quieres que sea el fondo hay que usar un PNG semitradparente como fondo de celda, pero IE no lo soporta. Si buscas en google hay trucos para forzar IE a aplicar la trasparencia de los PNG.

tunait · 27-oct-2004, 06:38

Tema trasladado al foro de CSS desde (x)html

furoya · 28-oct-2004, 09:45

Hola todos :

Ese último código está muy ingenioso. Pero quisiera hacer un par de objeciones.

Funciona solamente en IE5.5+, y no sólo por la sintaxis del mensaje condicional; sino también por el filtro del tipo DXImageTransform.
Por otro lado, el escript busca solamente etiquetas IMG, no fondos o botones.

En estos casos, lo mejor es tomarse el trabajo de agregar un filtro alpha(opacity=N) a cada imagen a través de una clase o un ID; que va a ser ignorado por navegadores que no sean Internet Explorer.

En el caso específico de cincinatto -que no pide imagen sino color- se puede usar un .GIF semitranspaente del color que quiera y ponerlo como fondo. No se ve tan claro como un .PNG o un "filtrado", pero funciona en todos los navegadores.

saludos

furoya

caricatos · 28-oct-2004, 13:47

Hola a todos:

Para Mozilla existe el estilo -moz-opacity con valores entre 0 y 1

Saludos

Tollelle · 15-abr-2005, 18:46

Wenasss, he conseguio las transparencias mediante png, añadiendole un script para el MSIE para que muestre las transparencia, pero me encuentro ocn varios problemas al usar esos png de fondos de celdas :S

No puedo , ni pinxar sobre enlaces, ni escribin en formularios directamente (tengo qusar el TAB para acceder a los campos)

Subi unas webs de prueba para ver si me puden ayudar a resolrver el problema, xq no entiendo xq no me deja hacer esas cosas el MSIE, en Firefox va todo sn problemas :D

http://www.muscana.com/GPH/prueba1.htm
http://www.muscana.com/GPH/prueba2.htm
http://www.muscana.com/GPH/prueba3.htm

esta es la pruebas.

He usado lo que venia en estas webs por orden:

prueba1 http://homepage.ntlworld.com/bobosola/imagemap.htm
prueba 2 http://dionysos.webcindario.com/truc...s_png_msie.php
prueba 3 http://homepage.ntlworld.com/bobosola/pnghowto.htm

GRacias y saludosss

ericktoti · 07-may-2005, 22:26

Navengado encontre esto:

<table height="200" width="200" bgcolor="#FF0000" style="filter: alpha (opacity=50);">
<tr>
<td><span style="position: relative;"><b>Hello There</b></td>
</tr>
</table>

Trabajaba muy bien con IE 5.5+

Codigo extraido del siguiente foro (En ingles):

Semi Transparent background but with full opacity text

furoya · 09-may-2005, 19:29

Hola de nuevo :

Muy bueno, ericktoti, no puedo creer que sea tan simple.

Habría que probarlo en Mozilla ( con el código que puso caricatos ( ), claro); y también con un .PNG, entonces solamente con alfa opacity.

saludos

furoya

peru · 13-may-2005, 05:56

Cita:

Iniciado por ericktoti

Navengado encontre esto:

<table height="200" width="200" bgcolor="#FF0000" style="filter: alpha (opacity=50);">
<tr>
<td><span style="position: relative;"><b>Hello There</b></td>
</tr>
</table>

Trabajaba muy bien con IE 5.5+

Codigo extraido del siguiente foro (En ingles):

Semi Transparent background but with full opacity text

pero eso solo funciona con el explorer no? como haria para que funcione con el netscape o el firefx??

Flashera · 14-may-2005, 08:47

Mira este ejmplo de opacity:
http://www.cssboulevar.com.ar/leer.php/articulo/9

quinqui · 17-may-2005, 16:41

yo siempre he usado la forma simple del "filter: alpha(opacity=...)" para poner semi o total transparencia, no sólo a fondos, sino textos e imágenes, en IE eso sí... la otra forma (la mostrada en los primeras respuestas, me da chusto ^^U)...

pero siempre he tenido una duda, que ojalá me la aclararan: cuando pongo el efecto de semitransparencia a un objeto que contiene otros, por ejemplo, a una tabla, todo el texto también hereda este filtro, aun cuando lo que yo hubiese querido era que sólo el fondo fuera semitransparente, pero dejando el texto e imágenes con su opacidad normal................ help? :o

furoya · 17-may-2005, 17:37

Hola de nuevo :

no quiero parecer mala onda, pero ... ¿ alguien lee los mensajes ?.

Digo, por

Cita:

Iniciado por peru en el mensaje #11.

... pero eso solo funciona con el explorer no? como haria para que funcione con el netscape o el firefx?? ...

Cita:

Iniciado por caricatos en el mensaje #7.

... Para Mozilla existe el estilo -moz-opacity con valores entre 0 y 1 ...

-------

Cita:

Iniciado por quinqui en el mensaje #13.

... cuando pongo el efecto de semitransparencia a un objeto que contiene otros, por ejemplo, a una tabla, todo el texto también hereda este filtro, aun cuando lo que yo hubiese querido era que sólo el fondo fuera semitransparente, pero dejando el texto e imágenes con su opacidad normal ...

Cita:

Iniciado por ericktoti en el mensaje #9.

...
<table height="200" width="200" bgcolor="#FF0000" style="filter: alpha (opacity=50);">
<tr>
<td><span style="position: relative;"><b>Hello There</b></td>
</tr>
</table> ...

... y porque no quiero poner primero mi última respuesta.

Tres cosas más. A partir de IE5.5 se puede usar una sintaxis más completa con

Código:

 
progid:DXImageTransform.Microsoft

como mencionó CreaTuSitio.com, pero no es recomendable porque no funciona en versiones anteriores y si se combina con Javascript ¡ hasta da error !.

Otra. Ya que hablé de sintaxis completa, la del filtro alpha es

Código:

  filter:alpha(style=2 opacity=0 finishOpacity=3 startx=0 starty=0 finishX=100 finishY=100);

Y otra. Para completar el código de Flashera

Código:

 .transparente {
filter:alpha(opacity=50); -khtml-opacity:.5; -moz-opacity:.5; opacity:.5;
}

Una última. ¿ El código de ericktoti con fondo .PNG, anda?

garcias y saludos

furoya

kahlito · 18-may-2005, 10:39

¿ Y para Opera hay alguna manera?

Saludosss

caricatos · 18-may-2005, 13:03

Hola kahlito:

Te había preparado una respuesta maravillosa e irrepetible, y se me fastidió la conexión, así que ahora voy a dar una respuesta escueta:

En la versión 8 de opera se puede obtener la lista de estilos (tengo un destripador maravillos)

Código:

<html>
<head>
<script>
function estilos() {
 var mostrar = ""
 for (estilo in document.body.style) {
  mostrar += "document.body.style." + estilo + " = " + eval("document.body.style." + estilo) + "<br />\n";
 }
 document.body.innerHTML = mostrar;
}
</script>
</head>
<body onload="estilos()">
</body>
</html>

Y no encontré nada que tenga que ver con la opacidad, así que solo vale el truco de una imagen opaca...

Saludos

quinqui · 18-may-2005, 13:47

gracias furoya Oo.................
había visto el código de la tabla, claro, pero no pensé que hubiese algo distinto de lo que ya hacía como para pensar que daría respuesta a mi request.
de cualquier forma, lo probé y funcionó ^__^ muchas gracias!
ahora sólo queda aclararme si es la tag <SPAN> o el STYLE con posición RELATIVE quien logra que el texto (contenido) se mantenga sin alteraciones pese al filtro del contenedor? sólo a modo de cultura general.......... gracias!

kahlito · 20-may-2005, 04:41

Cita:

Iniciado por caricatos

Hola kahlito:

Te había preparado una respuesta maravillosa e irrepetible, y se me fastidió la conexión, así que ahora voy a dar una respuesta escueta:

En la versión 8 de opera se puede obtener la lista de estilos (tengo un destripador maravillos)

Código:

<html>
<head>
<script>
function estilos() {
 var mostrar = ""
 for (estilo in document.body.style) {
  mostrar += "document.body.style." + estilo + " = " + eval("document.body.style." + estilo) + "<br />\n";
 }
 document.body.innerHTML = mostrar;
}
</script>
</head>
<body onload="estilos()">
</body>
</html>

Y no encontré nada que tenga que ver con la opacidad, así que solo vale el truco de una imagen opaca...

Saludos

Pues sí que tiene pocas opciones, muy bueno tu destripador caricatos

Estas son las pocas opciones que me sale:

document.body.style.getPropertyValue = function getPropertyValue() { [native code] }
document.body.style.setProperty = function setProperty() { [native code] }
document.body.style.removeProperty = function removeProperty() { [native code] }
document.body.style.item = function item() { [native code] }

que comparado con Iexplorer y Mozilla no son nada

Gracias por la información caricatos, un saludo

furoya · 20-may-2005, 19:18

Hola otra vez

caricatos : ese destripador es todo un hallazgo. Quiero hacer un par de pruebas y, si no me salen, voy a buscar el tema donde lo presentaste para hacer alguna pregunta.

No te sientas mal por perder un mensaje antes de enviarlo; a mí me pasa muuuuy seguido. Después de unos minutos la cookie se me borra y el sitio no me avisa hasta que ya intenté mandarlo; ¡ pero no me guarda el borrador !. Me tomé la costumbre de escribir en el Notepad y luego pegar el mensaje en el editor, así al menos tengo un back-up. Pero a veces estoy apurado hasta para buscar el Block de Notas.

quinqui : según el ... ¿ autor ? ... del código, las "palabras mágicas" son position: relative .

Supongo que algún día alguien probará el código en Mozilla, Konqueror, u otro ... y nos dirá aquí si también funciona en esos navegadores, o si es otra 'particularidad' del Internet Explorer.

De momento, aprovecho para contar algo que ya fue mencionado antes, pero sin la lista completa.

El uso de una tabla para el ejemplo no fue caprichoso. Ese elemento contiene en sí un formato de layout apto para usar filtros. Si hubiese que ponerlo en un div o un span, habría que agregarle alguna de las siguientes propiedades

display: inline

o block
height: cualquier valor *
float: left o right *
position: absolute *
width: cualquier valor *
writing-mode: tb-rl
zoom: cualquier valor
contentEditable = true

Los que están marcados con asterisco funcionan desde IE5.
Lo más comun es usar tamaño, porque el IE lo toma como sugerencia, pues si el relleno lo supera entonces el elemento se termina adaptando al contenido.

Pero otros navegadoes, como el Firefox, no. El contenedor toma el tamaño declarado, y el contenido que sobra simplemente desborda.
Hay algunos hacks para 'corregir' ésto, pero -insisto- habrá que confirmar qué pasa con un fondo semitransparente .png y/o cómo se comporta la opacidad de elementos con posición relativa en los demás navegadores; porque puede que todo esto no sirva de nada.

saludos

furoya

caricatos · 21-may-2005, 17:45

Hola otra vez:

kahlito:
Con la versión 8 de opera se pueden ver todos los estilos... (y como dije antes, no vi nada que se le pareciera a opacity)

furoya: Creo que la presentación fué aquí: Detectar objetos

Y también hay un enlace a la página actual (la pena es que no la he comentado)

Saludos

inforsol · 21-may-2005, 21:09

Sin tanto lío, yo he solido hacer fondos semitransparentes así:

- Creo con un programa de dibujo (Photoshop, Paint Shop Pro...) un pequeño cuadrado de 30px x 30px, por ejemplo y con fondo transparente.
- Luego coges el lapicito del programa, eliges un color y dibujas una especie de tablero de ajedrez, pero en vez de dos colores, solo pintas un cuadro de un color y el siguiente lo dejas transparente. Si los cuadros son de 1 x 1, te queda más denso y menos transparente. con cuadros de 4 x 4 queda más o menos bien.
- Guardas como PNG con transparencia (no alfa) o como GIF transparente y aplicas el dibujo al fondo que quieras.

Como problema, según los colores de fondo y de letra y los tamaños de esta, puede quedar visualmente "incómodo". Experimenta.

furoya · 23-may-2005, 10:19

Hola inforsol :

Creo que voy entendiendo. El problema del Internet Explorer no es con todas las transparencias de .png, sino con las que usen el canal alpha; porque al crear el archivo uno puede elegir cómo transparentarla.

Como yo uso casi exclusivamente IE, sé muy poco sobre esas imágenes; para mí no tienen diferencia con un .jpg.

Lo del .gif semitransparente ya se había mencionado más arriba, pero pasó desapercibido. Ahora que leo tu mensaje me doy cuenta de que nadie había explicado cómo hacerlo, y el truco no debe ser tan popular.

Existe una página -que yo no suelo recomendar mucho porque soy un resentido- donde muestran algunos ejemplos más.
Es un buen sitio, y al autor se le ocurrió, además del semitransparente, un gif "cuarto transparente" y "tres cuartos transparente". Cada vez que los veo me pego la cabeza repetidamente contra el teclado y digo : "¡¿ Por qué no se me ocurrieron a mí ?!".

Bueno, ma'sí, el sitio es este :

http://www.tierradenomadas.com/rc003.phtml

saludos

furoya

P.D.: Ahora que lo pienso, si medio transparente es "semi tranparente" : ¼ tranparente y ¾ tranparente ¿ no deberían ser cuartus tranparente y ter cuartus tranparente?.

furoya · 13-ene-2006, 17:30

Hola de nuevo :

Vuelvo para corregir y agregar algunos datos.

En el mensaje #9, ericktoti propuso un método para transparentar un contenedor y no su contenido. No sé cómo lo habré probado que quedé convencido de que funcionaba en Firefox. Pero no lo hace, es solamente para IE.

Aún no me respondieron si el problema del canal alfa es con el IExplorer y nada más; como no encontré quejas de otro navegador, supongo que sí; por lo que sigue siendo válida la sugerencia de usar un fondo *.png para todos y forzar la transparencia con alpha opacity para el de Microsoft. Aunque aparecen algunos problemas que voy a detallar más abajo.

En el mensaje #6 dije que el código puesto por Defero.tk (mensaje #3) no funcionaba en background , lo que olvidé mencionar es que se puede corregir facilmente aplicando el filtro al contenedor y no a la imagen. En el tema Tablas tranparentes y Contenido 100% Visible hay un enlace donde se lo puede ver funcionando. También se puede ver allí otro ejemplo de *.gif semitransparente y un comentario muy oportuno de RoQ

Cita:

...Lo que mtv.es usa para las transparencias es una imagen PNG de 1x1 como imagen de fondo que se repite, y para que funcione en IE usa javascript, prueba desactivando javascript en IE y vas a ver como ya no hay transparencias...

Si lo pensamos un poco, no hay ninguna necesidad de usar JS para transparentar fondos, se puede hacer muy bien con CSS. Lo que vamos a necesitar son algunos hacks ya que el IE7 (creo) reconoce bien canales alfa, el IE6 solamente con AlphaImageLoader y el IE5 ni a palos.

Me gustaría que alguien que sepa de diseño me corrija, pero creo que en un *.png se puede aplicar el canal alfa a cualquier color a partir de los 24 bits, por lo que si la imagen es de un color parejo con transparencia el problema se soluciona bastante bien; pero si se aplica a un componente del color, la imagen se va a ver distinta en IE5, y con aplicarle un alpha opacity no lo arreglamos; tendríamos que quitar la imagen y generar el color más parecido con background-color antes de darle la transparencia.
El problema se entiende claramente si imaginamos un fondo degradado (p.e.) de azul a rojo. Si hacemos transparente el azul la imagen nos queda con una transición de rojo a transparente, pero en los navegadores viejos se verá claramente el azul. Ésto también lo podríamos corregir usando filtros, siempre que la versión del DX no sea tan vieja como el navegador.

En IE5.5 anda el filtro gradient (superponer dos fondos) pero tampoco arreglaría una imagen que tenga un dibujo con bordes degradados, o con una "ventanita" semitransparente.

En el tema PNG e IE. Pregunta se propone usar un hack para cambiar la imagen *.png por una *.gif cuando sea necesaria; y el que lo vea mal que se embrome por usar IE.

Aquí dejo un par de ejemplos más

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head><title>FONDO SEMITRANSPARENTE PNG.</title>
<style type="text/css">
body {background:url(http://www.forosdelweb.com/images/statusicon/forum_old.gif) fixed red; font-size:100%; }

.bravo {font: bold 3em/4.5em helvetica, tahoma, sans-serif; padding:0; width:10em; margin:300px 10% 400px 10%; background-image: url("http://img72.imageshack.us/img72/2408/semitrans017oh.png"); background-repeat:repeat; border:0.5em solid gold; }

.delta {color:#ffffff; background-color:transparent; font: bold 24px/50px helvetica, tahoma, sans-serif; padding:0; height:100px; margin:300px 0 400px 0; background-image: url("http://img72.imageshack.us/img72/5572/degrad018my.png"); background-repeat:repeat-x; text-align:center; border:1px solid red;}

.charly {width:10em; height:4.5em; color:#cc9900; padding:0; position:relative; }

.eco {position:relative; }
</style>

</head >
<body>

<!--[if IE]> 
<style>
.bravo { background-color:transparent; background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled:"true", src="http://img72.imageshack.us/img72/2408/semitrans017oh.png", sizingMethod="scale"); }

.delta { background-color:transparent; background-image:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled:"true", src="http://img72.imageshack.us/img72/5572/degrad018my.png", sizingMethod="scale"); }
</style>
<![endif]-->

<!--[if gte IE 7.0000]> 
<style>
.bravo { background-color:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled:"false", ); background-image:url("http://img72.imageshack.us/img72/2408/semitrans017oh.png"); }

.delta { background-color:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled:"false", ); background-image:url("http://img72.imageshack.us/img72/5572/degrad018my.png"); }
</style>
<![endif]-->


<!--[if lt IE 6.0000]> 
<style>
.bravo { filter:alpha(opacity=40); background-color:#0000ff; background-image:none; border:none; }

.delta { display:block; filter:alpha(style=1 opacity=0 finishOpacity=100 startx=100 starty=100 finishX=100 finishY=0); background-color:#666699; background-image:none; }

.charly {border:0.5em solid gold; }
</style>
<![endif]-->

<h3>INICIO</h3>

<div class="bravo" ><div class="charly">
<div>QWERTYUIOP</div>
</div></div>

<p class="delta" ><span class="eco">
Texto Texto Texto Texto QWERTYUIOP Texto Texto Texto Texto </span>
</p>

<h3>FIN</h3>
  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  </p>


</body>
</html>

Las imágenes son :

__

[edit]

Un dato más

Cita:

Iniciado por Tollelle

...No pu

25-oct-2004, 18:25	#1 (permalink)
cincinatto Fecha de Ingreso: octubre-2004 Mensajes: 28	Función "opacity" Hola, soy nuevo por acá y me gustaría saber si alguien puede ayudarme con un efecto que quiero para mi web. La idea es que a una celda de disposición o a una tabla le pueda poner un color de fondo, pero traslúcido, es decir, semitransparente y no sólido como está en las opciones del editor dreamweaver. Mi idea es poner una imagen de fondo en la página y sobre esta las celdas y tablas, pero transparentes. Alguien por ahi me hablo sobre esta opcion "opacity" y que habia que insertarla en el código, pero realmente me la ha ganado, asi que si alguien pudiese ayudarme le estaría eternamente agradecido. de antemano gracias.

25-oct-2004, 20:05	#2 (permalink)
CreaTuSitio.com Fecha de Ingreso: junio-2004 Mensajes: 92	opacity es para el filter, vease http://msdn.microsoft.com/workshop/a...es/opacity.asp seria mas o menos asi: <table bgcolor="red" style="filter:progid:DXImageTransform.Microsoft.Al pha( opacity = 50 )"><tr><td>aaaa</td></tr></table> __________________ Crea tu Sitio Última edición por CreaTuSitio.com; 25-oct-2004 a las 20:07.

26-oct-2004, 03:44	#3 (permalink)
Defero.tk Colaborador Fecha de Ingreso: julio-2004 Ubicación: Utopía Mensajes: 3.689	Una pregunta... eso sólo funcionará en MS Internet Explorer, no? A lo mejor puedes hacerlo con un fondo en formato PNG semitrasnparente. Mira estos ejemplos: http://www.libpng.org/pub/png/png-rgba32.html http://www.mozilla.org/start/1.0/demos/eagle-sun.html Eso sí, si pretendes que se vean bien las transparencias con MS Internet Explorer (por desgracia el más usado), deberás utilizar este truco. __________________ a Defero le encanta andar GIMPeando y enredando con softweb libre

26-oct-2004, 03:54	#4 (permalink)
PascalC Fecha de Ingreso: agosto-2003 Mensajes: 501	con navegadores modernos se hace mediante el parametra css opacity. En todos los casos, tanto el fondo como el contenido seran traslucidos, si solo quieres que sea el fondo hay que usar un PNG semitradparente como fondo de celda, pero IE no lo soporta. Si buscas en google hay trucos para forzar IE a aplicar la trasparencia de los PNG. __________________ Plaza Mozilla http://www.chevrel.org/es/noticias/

28-oct-2004, 13:47	#7 (permalink)
caricatos Moderador Fecha de Ingreso: noviembre-2002 Ubicación: Torremolinos (Málaga) Mensajes: 12.264	Hola a todos: Para Mozilla existe el estilo -moz-opacity con valores entre 0 y 1 Saludos __________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo

27-oct-2004, 06:38	#5 (permalink)
tunait Moderadora Fecha de Ingreso: noviembre-2002 Ubicación: Terok Nor Mensajes: 14.914	Tema trasladado al foro de CSS desde (x)html

28-oct-2004, 09:45	#6 (permalink)
furoya Fecha de Ingreso: noviembre-2002 Mensajes: 981	Hola todos : Ese último código está muy ingenioso. Pero quisiera hacer un par de objeciones. Funciona solamente en IE5.5+, y no sólo por la sintaxis del mensaje condicional; sino también por el filtro del tipo DXImageTransform. Por otro lado, el escript busca solamente etiquetas IMG, no fondos o botones. En estos casos, lo mejor es tomarse el trabajo de agregar un filtro alpha(opacity=N) a cada imagen a través de una clase o un ID; que va a ser ignorado por navegadores que no sean Internet Explorer. En el caso específico de cincinatto -que no pide imagen sino color- se puede usar un .GIF semitranspaente del color que quiera y ponerlo como fondo. No se ve tan claro como un .PNG o un "filtrado", pero funciona en todos los navegadores. saludos furoya

15-abr-2005, 18:46	#8 (permalink)
Tollelle Fecha de Ingreso: enero-2005 Mensajes: 10	Wenasss, he conseguio las transparencias mediante png, añadiendole un script para el MSIE para que muestre las transparencia, pero me encuentro ocn varios problemas al usar esos png de fondos de celdas :S No puedo , ni pinxar sobre enlaces, ni escribin en formularios directamente (tengo qusar el TAB para acceder a los campos) Subi unas webs de prueba para ver si me puden ayudar a resolrver el problema, xq no entiendo xq no me deja hacer esas cosas el MSIE, en Firefox va todo sn problemas :D http://www.muscana.com/GPH/prueba1.htm http://www.muscana.com/GPH/prueba2.htm http://www.muscana.com/GPH/prueba3.htm esta es la pruebas. He usado lo que venia en estas webs por orden: prueba1 http://homepage.ntlworld.com/bobosola/imagemap.htm prueba 2 http://dionysos.webcindario.com/truc...s_png_msie.php prueba 3 http://homepage.ntlworld.com/bobosola/pnghowto.htm GRacias y saludosss

07-may-2005, 22:26	#9 (permalink)
ericktoti Fecha de Ingreso: enero-2003 Mensajes: 7	Prueba esto...puede ser una buena solución Navengado encontre esto: <table height="200" width="200" bgcolor="#FF0000" style="filter: alpha (opacity=50);"> <tr> <td><span style="position: relative;"><b>Hello There</b></td> </tr> </table> Trabajaba muy bien con IE 5.5+ Codigo extraido del siguiente foro (En ingles): Semi Transparent background but with full opacity text

09-may-2005, 19:29	#10 (permalink)
furoya Fecha de Ingreso: noviembre-2002 Mensajes: 981	Hola de nuevo : Muy bueno, ericktoti, no puedo creer que sea tan simple. Habría que probarlo en Mozilla ( con el código que puso caricatos ( ), claro); y también con un .PNG, entonces solamente con alfa opacity. saludos furoya

13-may-2005, 05:56	#11 (permalink)
peru Fecha de Ingreso: abril-2005 Ubicación: zürich, la rica suiza Mensajes: 183	Cita: Iniciado por ericktoti Navengado encontre esto: <table height="200" width="200" bgcolor="#FF0000" style="filter: alpha (opacity=50);"> <tr> <td><span style="position: relative;"><b>Hello There</b></td> </tr> </table> Trabajaba muy bien con IE 5.5+ Codigo extraido del siguiente foro (En ingles): Semi Transparent background but with full opacity text pero eso solo funciona con el explorer no? como haria para que funcione con el netscape o el firefx??

14-may-2005, 08:47	#12 (permalink)
Flashera Fecha de Ingreso: mayo-2003 Mensajes: 437	Mira este ejmplo de opacity: http://www.cssboulevar.com.ar/leer.php/articulo/9

17-may-2005, 16:41	#13 (permalink)
quinqui Fecha de Ingreso: agosto-2004 Ubicación: Chile! Mensajes: 403	yo siempre he usado la forma simple del "filter: alpha(opacity=...)" para poner semi o total transparencia, no sólo a fondos, sino textos e imágenes, en IE eso sí... la otra forma (la mostrada en los primeras respuestas, me da chusto ^^U)... pero siempre he tenido una duda, que ojalá me la aclararan: cuando pongo el efecto de semitransparencia a un objeto que contiene otros, por ejemplo, a una tabla, todo el texto también hereda este filtro, aun cuando lo que yo hubiese querido era que sólo el fondo fuera semitransparente, pero dejando el texto e imágenes con su opacidad normal................ help? :o __________________ pipus.... vieeeeeji plomius!!! quinqui site

17-may-2005, 17:37	#14 (permalink)
furoya Fecha de Ingreso: noviembre-2002 Mensajes: 981	Hola de nuevo : no quiero parecer mala onda, pero ... ¿ alguien lee los mensajes ?. Digo, por Cita: Iniciado por peru en el mensaje #11. ... pero eso solo funciona con el explorer no? como haria para que funcione con el netscape o el firefx?? ... Cita: Iniciado por caricatos en el mensaje #7. ... Para Mozilla existe el estilo -moz-opacity con valores entre 0 y 1 ... ------- Cita: Iniciado por quinqui en el mensaje #13. ... cuando pongo el efecto de semitransparencia a un objeto que contiene otros, por ejemplo, a una tabla, todo el texto también hereda este filtro, aun cuando lo que yo hubiese querido era que sólo el fondo fuera semitransparente, pero dejando el texto e imágenes con su opacidad normal ... Cita: Iniciado por ericktoti en el mensaje #9. ... <table height="200" width="200" bgcolor="#FF0000" style="filter: alpha (opacity=50);"> <tr> <td><span style="position: relative;"><b>Hello There</b></td> </tr> </table> ... ... y porque no quiero poner primero mi última respuesta. Tres cosas más. A partir de IE5.5 se puede usar una sintaxis más completa con Código: progid:DXImageTransform.Microsoft como mencionó CreaTuSitio.com, pero no es recomendable porque no funciona en versiones anteriores y si se combina con Javascript ¡ hasta da error !. Otra. Ya que hablé de sintaxis completa, la del filtro alpha es Código: filter:alpha(style=2 opacity=0 finishOpacity=3 startx=0 starty=0 finishX=100 finishY=100); Y otra. Para completar el código de Flashera Código: .transparente { filter:alpha(opacity=50); -khtml-opacity:.5; -moz-opacity:.5; opacity:.5; } Una última. ¿ El código de ericktoti con fondo .PNG, anda? garcias y saludos furoya

18-may-2005, 10:39	#15 (permalink)
kahlito Colaborador Fecha de Ingreso: marzo-2003 Ubicación: En el Estrecho y el mar Mensajes: 2.554	¿ Y para Opera hay alguna manera? Saludosss

18-may-2005, 13:03	#16 (permalink)
caricatos Moderador Fecha de Ingreso: noviembre-2002 Ubicación: Torremolinos (Málaga) Mensajes: 12.264	Hola kahlito: Te había preparado una respuesta maravillosa e irrepetible, y se me fastidió la conexión, así que ahora voy a dar una respuesta escueta: En la versión 8 de opera se puede obtener la lista de estilos (tengo un destripador maravillos) Código: <html> <head> <script> function estilos() { var mostrar = "" for (estilo in document.body.style) { mostrar += "document.body.style." + estilo + " = " + eval("document.body.style." + estilo) + "<br />\n"; } document.body.innerHTML = mostrar; } </script> </head> <body onload="estilos()"> </body> </html> Y no encontré nada que tenga que ver con la opacidad, así que solo vale el truco de una imagen opaca... Saludos __________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo

18-may-2005, 13:47	#17 (permalink)
quinqui Fecha de Ingreso: agosto-2004 Ubicación: Chile! Mensajes: 403	gracias furoya Oo................. había visto el código de la tabla, claro, pero no pensé que hubiese algo distinto de lo que ya hacía como para pensar que daría respuesta a mi request. de cualquier forma, lo probé y funcionó ^__^ muchas gracias! ahora sólo queda aclararme si es la tag <SPAN> o el STYLE con posición RELATIVE quien logra que el texto (contenido) se mantenga sin alteraciones pese al filtro del contenedor? sólo a modo de cultura general.......... gracias! __________________ pipus.... vieeeeeji plomius!!! quinqui site

20-may-2005, 04:41	#18 (permalink)
kahlito Colaborador Fecha de Ingreso: marzo-2003 Ubicación: En el Estrecho y el mar Mensajes: 2.554	Cita: Iniciado por caricatos Hola kahlito: Te había preparado una respuesta maravillosa e irrepetible, y se me fastidió la conexión, así que ahora voy a dar una respuesta escueta: En la versión 8 de opera se puede obtener la lista de estilos (tengo un destripador maravillos) Código: <html> <head> <script> function estilos() { var mostrar = "" for (estilo in document.body.style) { mostrar += "document.body.style." + estilo + " = " + eval("document.body.style." + estilo) + "<br />\n"; } document.body.innerHTML = mostrar; } </script> </head> <body onload="estilos()"> </body> </html> Y no encontré nada que tenga que ver con la opacidad, así que solo vale el truco de una imagen opaca... Saludos Pues sí que tiene pocas opciones, muy bueno tu destripador caricatos Estas son las pocas opciones que me sale: document.body.style.getPropertyValue = function getPropertyValue() { [native code] } document.body.style.setProperty = function setProperty() { [native code] } document.body.style.removeProperty = function removeProperty() { [native code] } document.body.style.item = function item() { [native code] } que comparado con Iexplorer y Mozilla no son nada Gracias por la información caricatos, un saludo

20-may-2005, 19:18	#19 (permalink)
furoya Fecha de Ingreso: noviembre-2002 Mensajes: 981	Hola otra vez caricatos : ese destripador es todo un hallazgo. Quiero hacer un par de pruebas y, si no me salen, voy a buscar el tema donde lo presentaste para hacer alguna pregunta. No te sientas mal por perder un mensaje antes de enviarlo; a mí me pasa muuuuy seguido. Después de unos minutos la cookie se me borra y el sitio no me avisa hasta que ya intenté mandarlo; ¡ pero no me guarda el borrador !. Me tomé la costumbre de escribir en el Notepad y luego pegar el mensaje en el editor, así al menos tengo un back-up. Pero a veces estoy apurado hasta para buscar el Block de Notas. quinqui : según el ... ¿ autor ? ... del código, las "palabras mágicas" son position: relative . Supongo que algún día alguien probará el código en Mozilla, Konqueror, u otro ... y nos dirá aquí si también funciona en esos navegadores, o si es otra 'particularidad' del Internet Explorer. De momento, aprovecho para contar algo que ya fue mencionado antes, pero sin la lista completa. El uso de una tabla para el ejemplo no fue caprichoso. Ese elemento contiene en sí un formato de layout apto para usar filtros. Si hubiese que ponerlo en un div o un span, habría que agregarle alguna de las siguientes propiedades display: inline o block height: cualquier valor * float: left o right * position: absolute * width: cualquier valor * writing-mode: tb-rl zoom: cualquier valor contentEditable = true Los que están marcados con asterisco funcionan desde IE5. Lo más comun es usar tamaño, porque el IE lo toma como sugerencia, pues si el relleno lo supera entonces el elemento se termina adaptando al contenido. Pero otros navegadoes, como el Firefox, no. El contenedor toma el tamaño declarado, y el contenido que sobra simplemente desborda. Hay algunos hacks para 'corregir' ésto, pero -insisto- habrá que confirmar qué pasa con un fondo semitransparente .png y/o cómo se comporta la opacidad de elementos con posición relativa en los demás navegadores; porque puede que todo esto no sirva de nada. saludos furoya

21-may-2005, 17:45	#20 (permalink)
caricatos Moderador Fecha de Ingreso: noviembre-2002 Ubicación: Torremolinos (Málaga) Mensajes: 12.264	Hola otra vez: kahlito: Con la versión 8 de opera se pueden ver todos los estilos... (y como dije antes, no vi nada que se le pareciera a opacity) furoya: Creo que la presentación fué aquí: Detectar objetos Y también hay un enlace a la página actual (la pena es que no la he comentado) Saludos __________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo

21-may-2005, 21:09	#21 (permalink)
inforsol Fecha de Ingreso: enero-2005 Mensajes: 189	Sin tanto lío, yo he solido hacer fondos semitransparentes así: - Creo con un programa de dibujo (Photoshop, Paint Shop Pro...) un pequeño cuadrado de 30px x 30px, por ejemplo y con fondo transparente. - Luego coges el lapicito del programa, eliges un color y dibujas una especie de tablero de ajedrez, pero en vez de dos colores, solo pintas un cuadro de un color y el siguiente lo dejas transparente. Si los cuadros son de 1 x 1, te queda más denso y menos transparente. con cuadros de 4 x 4 queda más o menos bien. - Guardas como PNG con transparencia (no alfa) o como GIF transparente y aplicas el dibujo al fondo que quieras. Como problema, según los colores de fondo y de letra y los tamaños de esta, puede quedar visualmente "incómodo". Experimenta.

23-may-2005, 10:19	#22 (permalink)
furoya Fecha de Ingreso: noviembre-2002 Mensajes: 981	Hola inforsol : Creo que voy entendiendo. El problema del Internet Explorer no es con todas las transparencias de .png, sino con las que usen el canal alpha; porque al crear el archivo uno puede elegir cómo transparentarla. Como yo uso casi exclusivamente IE, sé muy poco sobre esas imágenes; para mí no tienen diferencia con un .jpg. Lo del .gif semitransparente ya se había mencionado más arriba, pero pasó desapercibido. Ahora que leo tu mensaje me doy cuenta de que nadie había explicado cómo hacerlo, y el truco no debe ser tan popular. Existe una página -que yo no suelo recomendar mucho porque soy un resentido- donde muestran algunos ejemplos más. Es un buen sitio, y al autor se le ocurrió, además del semitransparente, un gif "cuarto transparente" y "tres cuartos transparente". Cada vez que los veo me pego la cabeza repetidamente contra el teclado y digo : "¡¿ Por qué no se me ocurrieron a mí ?!". Bueno, ma'sí, el sitio es este : http://www.tierradenomadas.com/rc003.phtml saludos furoya P.D.: Ahora que lo pienso, si medio transparente es "semi tranparente" : ¼ tranparente y ¾ tranparente ¿ no deberían ser cuartus tranparente y ter cuartus tranparente?. Última edición por furoya; 23-may-2005 a las 10:23. Razón: agregar divagaciones.