Foros del Web » Creando para Internet » CSS »

Tablas tranparentes y Contenido 100% Visible

Estas en el tema de Tablas tranparentes y Contenido 100% Visible en el foro de CSS en Foros del Web. Alguien sabe como Mtv.es puede utilizar un background transparente sin "opacity", es decir que las tablas son transparentes pero el texto es visible al 100%. ...
  #1 (permalink)  
Antiguo 01/11/2005, 22:12
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 19 años, 10 meses
Puntos: 5
Tablas tranparentes y Contenido 100% Visible

Alguien sabe como Mtv.es puede utilizar un background transparente sin "opacity", es decir que las tablas son transparentes pero el texto es visible al 100%.

tradicionalmente al hacer esto con opacity el contenido que esta dentro del div se transparenta(absolutamente todo:background,texto,imagenes), y en este caso solo se transparenta el background y no el contenido...por eso supongo que no utilizan el opacity.


espero haber explicadome bien. saludos, y espero que alguien sepa como hacerlo.
  #2 (permalink)  
Antiguo 02/11/2005, 00:23
Avatar de leoj90
Usuario baneado!
 
Fecha de Ingreso: agosto-2005
Mensajes: 1.365
Antigüedad: 19 años, 4 meses
Puntos: 0
Será esto...?
background-color: transparent;
  #3 (permalink)  
Antiguo 02/11/2005, 10:50
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.672
Antigüedad: 23 años
Puntos: 16
y que diferencia abria a no poner fondo?

disculpen mi indiorancia
  #4 (permalink)  
Antiguo 02/11/2005, 12:10
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 19 años, 10 meses
Puntos: 5
Me refiero a backgrounds transparentes (no como si no existieran, lo que es por default), o sea al 30% o algo asi.

sjam7:si se va a poner fondo en las tablas o divs, pero como dije sera transparentado en un porcentaje deseado...el beneficio seria utilizar un background en la pagina que sea "fixed" o sea que no se mueva...entonces al desplazarse la pagina...ok?
entra a http://mtv.es y miralo por ti mismo.

bueno... la duda sigue al aire...alguien tendra alguna idea??
  #5 (permalink)  
Antiguo 02/11/2005, 12:15
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.672
Antigüedad: 23 años
Puntos: 16
oye, y si el fondo lo pones en un PNG? este soporta mas canales de transparencias que el gif, solo tendras que poner un miniscript para la porqueria del IE
  #6 (permalink)  
Antiguo 02/11/2005, 13:57
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 19 años, 10 meses
Puntos: 5
bueno, se que seria una opcion buena para backgrounds de imagenes en divs de alta calidad(puesto que si los queremos de un solo color debemos usar gif)... aunque no estoy seguro si tambien se pueda hacer son css.


saludos.
__________________

  #7 (permalink)  
Antiguo 03/11/2005, 14:01
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 9 meses
Puntos: 1826
1-¿Cual sería ese Miniscript para Ie?
2-No encuentro la página con el efecto, pero se podría hacer un div con el efecto opacity, con un ancho y alto definidos y un div arriba de este sin opacity y el mismo ancho y alto. con un posicionamiento absoluto.
  #8 (permalink)  
Antiguo 04/11/2005, 09:30
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 19 años, 6 meses
Puntos: 17
El otro día (2-nov-2005 desde las 2:30 –hora de Panamá–) intenté postear una respuesta, pero no sé que pasaba que Foros del Web no me andaba, ok aquí está mi respuesta:

Ya hace tiempo alguién preguntó lo mismo que tú mtv.es, hubo un post pero sin conclusión, tiempo después otro compañero preguntó por algo parecido (una imagen con borde sombreado sobre otra imagen en una capa distinta). La respuesta fue usar PNG de 32 bits, un formato que tiene un canal alfa que permite 255 niveles de transparencia. El único problema es que internet explorer no lo soporta como debe ser y en las transparencia muestra un color como gris, para esto se han inventado cantidad de scripts que permiten mostrar el PNG como es debido, y las desventajas de estos script son que solo se aplican a los img, o sea que a los background no!.

Bueno aquí un blog con algunos enlaces
http://weblogs.javahispano.org/page/...ernet_explorer

y aquí una respuesta que me pareció interesante:
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Saludos
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 04/11/2005 a las 11:05
  #9 (permalink)  
Antiguo 04/11/2005, 14:50
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Hola todos :

en el foro hay un tema muy completo

Función "opacity"

saludos
  #10 (permalink)  
Antiguo 27/12/2005, 19:08
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 19 años, 10 meses
Puntos: 5
Extraño , NO?

Alguien sabe Cual Demonios fue la Respuesta???

...si, nos mandaron a otros post,blabla...pero nunca quedo alcarado...
es decir..llegamos aciertas verdades como:
-Utilizar fondo gif transparentes (no semitransparente)
-utilizar el JScript para corregor error de IE (pero solo funciona en imagenes)
-Un codigo que funciona para ie 5.4 o algo asi

etcetc..

El caso es que nunca llegamos a la pregunta original:
Como hacer fondo transparente en PNG (para backgrounds en divs, no para imagenes)???

lo respuesta mas cercana fue:
Cita:
Iniciado por Rafael
1-¿Cual sería ese Miniscript para Ie?
2-No encuentro la página con el efecto, pero se podría hacer un div con el efecto opacity, con un ancho y alto definidos y un div arriba de este sin opacity y el mismo ancho y alto. con un posicionamiento absoluto.
aunque no es lo mas apropiado si trabajamos con multiples divs...


No se porque razon me deje convencer por SJAM7 que me dijo:
Cita:
oye, y si el fondo lo pones en un PNG? este soporta mas canales de transparencias que el gif, solo tendras que poner un miniscript para la porqueria del IE
pero pues eso funciona para imagenes png...no para un Png como Background



BUENO, espero que alguien se acuerde de la Respuesta , si es que existe Alguna.
Saludos
__________________

  #11 (permalink)  
Antiguo 27/12/2005, 19:50
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 21 años, 10 meses
Puntos: 10
tranquilo amigo... no podes enojarte porque nadie da una respuesta concreta a un problema que, si buscaste plenamente, ya deberias saber que no la tiene.
Hay muchos consejos dando vuelta por ahi, yo he probado muchos y ninguno me resulto al 100%... solo te queda seguir probando y/o buscando hasta encontrar la solucion que mas se adecue a lo que queres lograr.
__________________
oohh... quisiera ser godines!!!

Última edición por safe; 27/12/2005 a las 20:14
  #12 (permalink)  
Antiguo 28/12/2005, 12:15
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.672
Antigüedad: 23 años
Puntos: 16
por otro lado, yo no te intente convencer, solo te dije una opinion...pa ayudar y tener esta respuesta mejor ni opinar....

con esa actitud solo conseguiras que a la otra ni se te intente ayudar... no perdemos nada haciendolo
  #13 (permalink)  
Antiguo 28/12/2005, 16:58
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 19 años, 10 meses
Puntos: 5
Cita:
Alguien sabe Cual Demonios fue la Respuesta???
esto no es una groseria, es una forma Bizarra y torcida de tratar de hacer entender (de manera critica, del vervo crisis) la razon 'inexplicable' del porque no encontramos una respuesta, la cual quedo perdida a traves del tiempo (y sobre todo en espacio).....

Creo q no ofendo a nadie..nisiquiera yo me di cuenta de que no llgamos a una conclusion..y es que ya a habido varios post acerca de lo mismo.

Cita:
No se porque razon me deje convencer por SJAM7 que me dijo:
esto es cierto, por alguna razon me deje convencer de algo que en un principio no era correcto(desde antes de que preguntara en el post ya lo habia tratado, pero luego se me olvido)...tal ves suena un poco feo(viendolo desde otro punto de vista) pero es una forma de auto-repudio (no era una critica hacia ningun otro) por no haber conseguido lo que me prepuse...la Respuesta.

La verdad es que tengo razon, nunca llegamos a una conclusion, o sera que simplemente no creo en lo 'imposible'.

Bueno, saludos...tal ves este sea una de las tantas preguntas sin respuesta, tal ves a traves de los siglos esta pregunta se convierta en una leyenda, luego en un mito, despues creeremos que nunca existio, pero al final la respuesta estara en nuestras mentes, lugar del cual no la supimos rescatar...


Saludos.
  #14 (permalink)  
Antiguo 28/12/2005, 17:10
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 19 años, 10 meses
Puntos: 5
PD:

Respeto a foros del web, y por consiguiente a la mayoria de las personas que hacen que esto funcione (exepto por un par de ñoños que me regañaron por hablar de 'spyware' cuando recien ingrese por aqui, pero bueno, eso es otra historia)

no hay problema si no hayamos la respuesta, si alguien que no tiene,pues tal ves no tengo nada mas que decir por aqui.

saludos.
__________________

  #15 (permalink)  
Antiguo 28/12/2005, 17:20
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 21 años, 10 meses
Puntos: 10
no es que no haya respuesta o que no te las quieran dar. Tenés que tener en cuenta que hay tantos factores que influyen a la hora de desarrollar un sitio web (SO, navegador, plugins, etc de los usuarios en potencia) que es muy dificil encontrar una respuesta que funcione al 100%.

Alguien te puede dar un respuesta que a el le sirvio, pero porque solo usa IE y resulta que vos la queres para firefox entonces te parece que la respuesta estaba mal, etc.

Solo hay que aceptar los consejos y comentarios, probarlos, aceptar los que sirven y rechazar los que no.
Nada mas que eso, nop creo que nadie quiera perder escribiendo respuestas que sabe de antemano que estan mal.

Saludos
__________________
oohh... quisiera ser godines!!!
  #16 (permalink)  
Antiguo 29/12/2005, 11:05
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Hola de nuevo :

No sé si hay que responder a "Cual Demonios fue la Respuesta??? " de la pregunta original, cpucpu, lo que seguro podías hacer es aprovechar que tenías un ejemplo y mirar el código fuente. Confieso que en un momento de debilidad lo empecé a mirar

Código:
default bgcolor at each sections.css */
/* change from default bg: avoid gray til js adds filter */

.realtransparent, .realtoptransparent, .newtransparent {
background: url("/mtv.es/graphics/siteimgs/opacity.png");
pero cuando no pude abrir el JS al primer intento lo abandoné.

Imagino que usa algún DX para IE, lo que deja afuera algunas versiones del 'navegador más popular'. Igual, que las notas se vean con fondo semitransparente o no, afecta poco y nada al contenido del documento; es un adorno.

Si a ti te parece un buen método, lo puedes desarrolar aquí para que el resto de la comunidad lo aprovechemos, aunque en "otros post,blabla..." ya hay bastante sobre IE/png.

Pero lo que quería comentar es otra cosa. Y aprovecho tu tema .

Insistí mucho tiempo con eso de no duplicar las preguntas. A cualquiera que -como tú- necesite encontrar un dato, se le hace dificil porque está disperso entre varios temas. Y algo que estoy empezando a entender es que la gente se aburre leyendo los mensajes.
Lo que explicaría algunas líneas como

Cita:
...Utilizar fondo gif transparentes (no semitransparente)...
el gif semitransparente existe. En el enlace que puse yo está la explicación, y tiene que andar en todos los navegadores; aunque en la comparación con png pierde por goleada.

Cita:
...El caso es que nunca llegamos a la pregunta original:
Como hacer fondo transparente en PNG (para backgrounds en divs, no para imagenes)???...
esa no fue la pregunta original sino

Cita:
...Alguien sabe como Mtv.es puede utilizar un background transparente sin "opacity", es decir que las tablas son transparentes pero el texto es visible al 100%...
Por otro lado

Cita:
...tradicionalmente al hacer esto con opacity ... en este caso solo se transparenta el background ... supongo que no utilizan el opacity...
con ver el código era suficiente para no suponer. Pero sí se puede hacer con CSS. El problema es con los navegadores que no soportan -aún- opacidad. (Opera, p.e.)

El ejemplo también está en el enlace que dejé arriba. Y siguen siendo 'casi' trucos, porque no existe un atributo o propiedad que "semitransparente" las imágenes de fondo.

Quiero insistir una vez más en que uso tu tema como ejemplo, porque lo que te pasó a ti nos pasa a muchos, y es muy pero muy frustrante tener que leer temas enormes que casi no tienen diferencia entre sí, pero en los que cada tanto salta el párrafo salvador. Por eso hay que juntar estómago y leerlos hasta el final.

No hago esta aclaración por ti, ya que pareces tener un sentido de la ironía peor que el mío y no creo que me malinterpretes, pero siempre salta alguien que no entiende bien los mensajes a defender a algún forero de supuestas "agresiones". Y yo también me aburro de responder a esas defensas.

Para que nadie dude de mi buena voluntad, dejo un ejemplo y algunos enlaces más sobre gif con distinta opacidad.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<style>
body {background:url(http://www.forosdelweb.com/images/statusicon/forum_old.gif) fixed; 
font-size:100%; }
#alfa {width:10em; height:4.5em; border:4px solid gold; 
margin:300px 20% 400px 20%; color:#cc9900; 
font: bold 3em/4.5em helvetica, tahoma, sans-serif; padding:0.5em; 
background:url(http://img43.imageshack.us/img43/5321/semitransnegro7dw.gif); }
</style>
</HEAD>
<BODY>
INICIO

<div id="alfa">QWERTYUIOP</div>

FIN
</BODY></HTML>
La imagen es



A vueltas con la compatibilidad

baccxus : Muy bueno tu mensaje. A mi también me gusta linkear a otros temas para ayudar a los que hacen búsquedas.

saludos
  #17 (permalink)  
Antiguo 29/12/2005, 13:21
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 19 años, 10 meses
Puntos: 5
lo mejor q veo hasta el momento seria la opcion de los .gif (utilizando la opcion de un pixel 'pintado' y otro 'sin pintar'), en la pagina que diste http://www.tierradenomadas.com/rc003.phtml hay un buen ejemplo al final.

algo asi como el que escribiste, pero creo que lleva los pixeles en diagonal.

...

...
El problema mas grande no creo que sea precisamente que no sepamos como hacerlo que sirva para todos los browsers, sino que alguien ya lo sabe: mtv.es
puesto que sus transparencias funcionan por lo menos igul para ie y firefox

quiere decir que es posible.. claro, ya lo intente pero me perdi.. el saco es que esta pregunta continuara a traves de otros usuarios con la misma duda...y por eso me pregunto..
no seria bueno? tenerla en las FAQ's como una respuesta (o mas bien un conjunto de respuestas integradas para obtener un resultado ideal)

esto no es una queja,sino una sugerencia.. yo seguire viendo a ver que pasa.
Saludos
__________________

  #18 (permalink)  
Antiguo 29/12/2005, 13:48
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 19 años, 8 meses
Puntos: 0
Cita:
Iniciado por cpucpu
eo que sea precisamente que no sepamos como hacerlo que sirva para todos los browsers, sino que alguien ya lo sabe: mtv.es
puesto que sus transparencias funcionan por lo menos igul para ie y firefox
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.
Y creo que esta respuesta ya te la habia dado sjam7, y tambien se habia tratado en el foro varias veces y tambien en el de diseño grafico
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 21:59.