Foros del Web » Creando para Internet » CSS »

Función "opacity"

Estas en el tema de Función "opacity" en el foro de CSS en Foros del Web. 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 ...

  #1 (permalink)  
Antiguo 25/10/2004, 19:25
 
Fecha de Ingreso: octubre-2004
Mensajes: 28
Antigüedad: 13 años, 1 mes
Puntos: 0
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.
  #2 (permalink)  
Antiguo 25/10/2004, 21:05
 
Fecha de Ingreso: junio-2004
Mensajes: 92
Antigüedad: 13 años, 5 meses
Puntos: 0
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/10/2004 a las 21:07
  #3 (permalink)  
Antiguo 26/10/2004, 04:44
Avatar de -Defero-
Colaborador
 
Fecha de Ingreso: julio-2004
Ubicación: Guipúzcoa
Mensajes: 4.777
Antigüedad: 13 años, 5 meses
Puntos: 76
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.
__________________
abogado en Errenteria + procuradora en San Sebastián = equipo imparable
  #4 (permalink)  
Antiguo 26/10/2004, 04:54
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 3 meses
Puntos: 1
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/
  #5 (permalink)  
Antiguo 27/10/2004, 07:38
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Tema trasladado al foro de CSS desde (x)html
  #6 (permalink)  
Antiguo 28/10/2004, 10:45
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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
  #7 (permalink)  
Antiguo 28/10/2004, 14:47
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
  #8 (permalink)  
Antiguo 15/04/2005, 19:46
Avatar de Tollelle  
Fecha de Ingreso: enero-2005
Mensajes: 62
Antigüedad: 12 años, 11 meses
Puntos: 0
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
  #9 (permalink)  
Antiguo 07/05/2005, 23:26
 
Fecha de Ingreso: enero-2003
Mensajes: 7
Antigüedad: 14 años, 11 meses
Puntos: 0
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
  #10 (permalink)  
Antiguo 09/05/2005, 20:29
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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
  #11 (permalink)  
Antiguo 13/05/2005, 06:56
 
Fecha de Ingreso: abril-2005
Ubicación: zürich, la rica suiza
Mensajes: 212
Antigüedad: 12 años, 7 meses
Puntos: 2
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??
  #12 (permalink)  
Antiguo 14/05/2005, 09:47
 
Fecha de Ingreso: mayo-2003
Mensajes: 544
Antigüedad: 14 años, 6 meses
Puntos: 1
Mira este ejmplo de opacity:
http://www.cssboulevar.com.ar/leer.php/articulo/9
  #13 (permalink)  
Antiguo 17/05/2005, 17:41
Avatar de quinqui  
Fecha de Ingreso: agosto-2004
Ubicación: Chile!
Mensajes: 776
Antigüedad: 13 años, 3 meses
Puntos: 56
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*
  #14 (permalink)  
Antiguo 17/05/2005, 18:37
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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
  #15 (permalink)  
Antiguo 18/05/2005, 11:39
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
¿ Y para Opera hay alguna manera?

Saludosss
  #16 (permalink)  
Antiguo 18/05/2005, 14:03
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
  #17 (permalink)  
Antiguo 18/05/2005, 14:47
Avatar de quinqui  
Fecha de Ingreso: agosto-2004
Ubicación: Chile!
Mensajes: 776
Antigüedad: 13 años, 3 meses
Puntos: 56
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*
  #18 (permalink)  
Antiguo 20/05/2005, 05:41
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
  #19 (permalink)  
Antiguo 20/05/2005, 20:18
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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
  #20 (permalink)  
Antiguo 21/05/2005, 18:45
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
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í: http://www.forosdelweb.com/f13/detectar-objetos-199518/

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 (permalink)  
Antiguo 21/05/2005, 22:09
 
Fecha de Ingreso: enero-2005
Mensajes: 188
Antigüedad: 12 años, 10 meses
Puntos: 0
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.
  #22 (permalink)  
Antiguo 23/05/2005, 11:19
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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/05/2005 a las 11:23 Razón: agregar divagaciones.
  #23 (permalink)  
Antiguo 13/01/2006, 18:30
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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 puedo , ni pinxar sobre enlaces, ni escribin en formularios directamente (tengo qusar el TAB para acceder a los campos)...
http://www.tripix.net/?p=36

http://www.daltonlp.com/daltonlp.cgi...=1&item_id=217

[/edit]

Última edición por furoya; 01/02/2006 a las 13:04
  #24 (permalink)  
Antiguo 08/11/2006, 07:58
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola, yo otra vez:

Como este tema es uno de los más completos sobre fondos semi transparentes, sigo agregando ideas aquí. Esta no eso que se dice "brillante", pero ya tenía una imagen hecha y me daba lástima no postearla.

Más arriba hay varios ejemplos sobre semitransparencia degradada, pero falta el más obvio y recién me di cuenta cuando saltó el tema en Degradado PNG sobre imagen de fondo en IE. Es usar una imagen (*.jpg; *.gif) que ya tenga un color fundido con el mosaico o color de fondo. Las limitaciones son enormes -empezando porque no se puede fijar el background del documento si hay un diseño- así que dejo el código sin muchas esperanzas de que a alguien le sirvan.

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>
<title>IMAGEN DEGRADADA. </title>
<script type="text/javascript">
var cambio = 1;

function cambiaColor (){
if(cambio == 1){
cambio = 0;
var colorAzar = "#" + ((Math.floor(Math.random()*4096)+4095).toString(16)).substring(1);
document.getElementById("pad").innerHTML = colorAzar;
document.getElementById("pad").style.backgroundColor = colorAzar;
setTimeout("cambio=1", 200)
}
}
</script>
<style type="text/css">
body{background-image:url("http://img43.imageshack.us/img43/9528/marmol2in.gif");}

table {border:8px inset silver;}

th{background-image:url("http://img386.imageshack.us/img386/1738/marmoldegrad3jx1.gif"); background-repeat:repeat-x; height:200px; width:200px; font-size:30px; border:8px outset silver;}

td {height:200px; width:200px; font-size:18px; border:8px outset silver;}

#pad {background:url("http://img43.imageshack.us/img43/7566/semitransmarmol5ba.gif") #fff; cursor:move; text-align:center; font:bold 30px monospace;}

</style>
</head>
<body>

<table>
<tbody><tr>
<th>FONDO</th><th>DEGRAD&Eacute;.</th>
</tr><tr>
<td><p>Moviendo el puntero sobre la celda derecha cambia el color del diseño de fondo.</p>
<p style="text-align:right; font:36px arial,'times new roman','courier new';">&rarr; &nbsp; </p></td><td id="pad" onmousemove="cambiaColor()">MOVER AQU&Iacute;</td>
</tbody>
</table>

<h2>Im&aacute;genes.</h2>

<img src= "http://img43.imageshack.us/img43/9528/marmol2in.gif
" border=1>
<img src= "http://img386.imageshack.us/img386/1738/marmoldegrad3jx1.gif" border=1>
<img src= "http://img43.imageshack.us/img43/7566/semitransmarmol5ba.gif" border=1>
</body>
</html>
Para compensar con un ejemplo tan pavo, agregué dos celdas con un efecto que muestra cómo cambiar el color de un diseño de fondo sin cambiar la imagen. El script es nada más que para generar colores aleatorios de la paleta de 4000; está claro que se puede hacer sólo con CSS.

Imágenes.

_ _

Última edición por furoya; 14/12/2006 a las 11:35
  #25 (permalink)  
Antiguo 07/05/2007, 12:15
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Re: Función "opacity"

Sí, yo de nuevo. Es que este tema da para mucho.

No encontré el ejemplo que cambiaba los colores, así que hice uno nuevo; no quedó tan bien, pero se entiende

Gif animado; con velocidad, secuencia y color aleatorios.

Y también puse un ejemplo de capa degradada o gradiente (con transparencia progresiva) y sin imagen para Firefox

Opacidad degradada en Firefox ( como alpha (type=) ).

Ahora, lo que me trae de vuelta, es un código que no funciona en Mozilla y supuse que lo haría

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>HSLA</title></head>
<body style="background-image:url('http://www.forosdelweb.com/images/top_right.gif'); background-attachment:fixed; ">

<table style="background-color:-moz-hsla(0, 100%, 50%, 0.5); background-color:hsla(0, 100%, 50%, 0.5); margin-top:250px; border:solid 5px #ffff00;
margin-left:50px; filter:alpha(opacity=50); /background-color:rgb(100%, 0, 0);">
<tr>
<td style="background-color:transparent; margin:15px;">
<span style="font-size:60px; font-weight:900; color:#000000; position: relative;">QWERTYUIOP</span>
</td>
</tr>
</table>

<p style="margin-top:800px;">.</p>
</body>
</html> 

Como se ve, reconoce hue, saturation y lightness , pero no alpha. Recordemos que el filtro de Microsoft se aplica a objetos, y por eso el ejemplo necesita un contenedor y su fondo transparentados, con un contenido opaco. En cambio -moz-hsla (o rgba) le quita opacidad al color de fondo sin modificar el resto del objeto.

Quiero creer que algún desarrollador de FF ya liberó un parche o actualización para usar esta función CSS, pero oficialmente no hay muchos datos

Mozilla CSS Extensions - MDC. -moz-hsla hsla .

Si alguien sabe cómo ver el efecto, nos avisa.

HSLA color values


Edición : En Firefox 3.05 ya anda; y en Chrome 2.0 / Safari 31. Windows, sin el prefijo. El código tiene un hack para IE7.

Última edición por furoya; 31/03/2009 a las 09:44 Razón: volví a actualizar
  #26 (permalink)  
Antiguo 15/05/2009, 16:14
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Función "opacity"

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.
  #27 (permalink)  
Antiguo 15/03/2010, 08:32
 
Fecha de Ingreso: marzo-2010
Mensajes: 10
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: Función "opacity"

Buenas

Como veo este tema ha dado mucho juego. Pero no se si llego un poco tarde para que alguien me ayude a mi,

soy nuevo en el tema web y muchas de las respuestas me cuesta entenderlas todavia, por eso voy a plantearos cual es mi duda y a ver si podeis solucionarmela, de una forma sencilla.

resulta que en el diseño de mi web, aparecen unos apartados destacados donde va a ir el texto, y queria que fuesen semitransparentes y que dejasen ver ligeramente el fondo de la web, que es de cuadros,
al desarrollarla en dreamweaver creo las tablas, pero no se como hacer que el fondo de las celdas quede semitransparente,. he probado a hacer una imagen en fireworks y en photoshop que fuese semitransparente, pero no me sale, seguramente x algo que hago mal.

que puedo hacer?

como he podido ver, comentais la posiblidad de introducir unos codigos con la función "opacity", pero donde deberia colocarlo, como os digo soy un novato en estos temas y x eso os pido paciencia

muchas gracias, espero impaciente vuestras respuestas

un saludo
  #28 (permalink)  
Antiguo 15/03/2010, 20:54
 
Fecha de Ingreso: febrero-2010
Mensajes: 5
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Función "opacity"

mr shepps:

La funcion opacity va en el codigo de tu CSS ya sea en una clase o un ID, una vez que la tengas deveras de poner la tabla o lo que quieras dentro del DIV con esa clase. y listo, No se exactamente si esto te ayude, pero habria que ver el codigo.

Honestamente no uso dreamw. todo es a mano. PE

para el CSS

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

para tu HTML

<DIV class="transparente">
<p>Lo que quieras hacer aqui sea solo texto o una tabla</p>
</DIV>

espero esto ayude
  #29 (permalink)  
Antiguo 15/03/2010, 21:03
Avatar de OmarV  
Fecha de Ingreso: febrero-2010
Mensajes: 82
Antigüedad: 7 años, 10 meses
Puntos: 3
Respuesta: Función "opacity"

#asd {
opacity: 0.5;
background:#000000
}

Eso necesitas?
  #30 (permalink)  
Antiguo 22/06/2010, 14:43
Avatar de bNd170  
Fecha de Ingreso: agosto-2009
Ubicación: $this->setLocation('Valencia', 'Spain');
Mensajes: 365
Antigüedad: 8 años, 3 meses
Puntos: 13
Respuesta: Función "opacity"

Tengo clara la funcion opacity, pero mi caso es este, aver si alguien me puede hechar un cable.

Tengo un div, en el que tengo una botonera de menu y unas imagenes, solo quiero que el fondo sea fondo con transparencia y no todo ese div, que debo hacer, poniendole la opacidad al div, tambien me afecta a la botonera y a las imagenes.

Etiquetas: alpha, gif, hsla, opacidad, opacity, png, rgba, semitransparente, transparencia, filtros
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:03.