Foros del Web » Creando para Internet » HTML »

Tablas transparentes (mtv.es)

Estas en el tema de Tablas transparentes (mtv.es) en el foro de HTML en Foros del Web. Hola! Me gustaría que alguien me dijese cómo se lo montan los de www.mtv.es para que sus tablas sean transparentes. Miré su código fuente hace ...
  #1 (permalink)  
Antiguo 21/06/2005, 11:32
Avatar de Artdeco  
Fecha de Ingreso: abril-2005
Ubicación: Barcelona
Mensajes: 165
Antigüedad: 12 años, 8 meses
Puntos: 1
Tablas transparentes (mtv.es)

Hola! Me gustaría que alguien me dijese cómo se lo montan los de www.mtv.es para que sus tablas sean transparentes.

Miré su código fuente hace tiempo y conseguí encontrar en las CSS las tablas transparentes, pero no pude aplicarlo porque no me salía. Si alguien conoce el método, se lo agradecería, ya que he buscado por Internet y en este foro a ver si se había hablado del tema antes y parece que no.

Muchas gracias
  #2 (permalink)  
Antiguo 21/06/2005, 13:24
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
busca de la función alpha de CSS.

Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #3 (permalink)  
Antiguo 21/06/2005, 13:40
Avatar de Artdeco  
Fecha de Ingreso: abril-2005
Ubicación: Barcelona
Mensajes: 165
Antigüedad: 12 años, 8 meses
Puntos: 1
Creo que me voy a responder a mí mismo, CREO (creo) que he encontrado mi respuesta. Si alguien estaba buscando lo mismo que yo, le recomiendo un enlace:

http://www.desarrolloweb.com/articulos/1859.php

Gracias, baccxus, he buscado en Google ALPHA CSS y TRANSPARENCIA y he encontrado una pagina donde enlazaban ahí.

Ahora os cuento si consigo llevarlo a cabo.

Gracias a mí mismo xD
  #4 (permalink)  
Antiguo 21/06/2005, 14:05
Avatar de Artdeco  
Fecha de Ingreso: abril-2005
Ubicación: Barcelona
Mensajes: 165
Antigüedad: 12 años, 8 meses
Puntos: 1
A ver, he hecho una tabla con un clas="tabla transp" (dos class juntas) y, efectivamente, se ve la tabla de color marrón transparente sobre la imagen de fondo. Hasta ahí todo bien. Error: el texto TAMBIÉN se hace opaco :__(

he creado otro fliter alpha llamado "opaco" y lo he puesto al 100 para quitar la transparencia y se lo he aplicado al texto, pero no funciona. Se ve todo transparente y no hay forma de arreglarlo!


}

.transp{
filter: alpha(opacity=50); opacity: .5

}

.opaco{
filter: alpha(opacity=100);

}

.tabla {
font-family: Verdana, Helvetica, sans-serif;
font-size: 10px;
background-color: #FFCC00;
}
  #5 (permalink)  
Antiguo 21/06/2005, 15:07
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 12 años, 10 meses
Puntos: 5
Muy interesante, ya lo habia visto antes pero gracias por recordarmelo....
lamentablmente no se como corregirlo, pero pues espero q alguien mas nos pueda ayudar, saludos.
__________________

  #6 (permalink)  
Antiguo 21/06/2005, 15:15
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Mira que no usan la funcion Alpha...

Jejeje... me puse a ver la página, y revisando encontré que usan un .PNG de 1x1 como background en el menú, es este es el que tiene la transparencia, para que te hagas una idea de lo que hablo esta es la imagen http://www.mtv.es/graphics/siteimgs/opacity.png, y aquí esta es parte de su CSS:

.realtransparent, .realtoptransparent, .newtransparent{
background-image: url("/mtv.es/graphics/siteimgs/opacity.png");
}

En conclusión me adelanté al responderte sobre el alpha, pero me alegra haber aprendido algo nuevo.
__________________
Al final del día hablar es gratis, codificar no lo es
  #7 (permalink)  
Antiguo 21/06/2005, 15:37
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 12 años, 10 meses
Puntos: 5
bueno, no me funciona poner como background el archivo .png debido a que tenia entendido q solo los .gif se podan ver correctamente como tranparencias, es decir que cuando uso un archivo .png en frontpage no me aparece correctamente como transparente (sino q se modifican los colores, por lo general lo q deberia ser transparene se ve algo gris)corriganme si me equivoco.

pero pues si me funciono creando mis propias transparencias (digamos al 50% de visibilidad) con .gif. saludos.
__________________


Última edición por cpucpu; 21/06/2005 a las 15:54
  #8 (permalink)  
Antiguo 21/06/2005, 16:11
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Figurate que con PNG si se puede...

Buscando, buscando, encontré que lo del PNG con Internet Explorer y por ende con Front Page, no es problema de PNG sino de microsoft (no vamos a entrar en polémica), bueno... el caso es que para usar transparencias PNG en explorer encontré un truco y esta es la dirección:

http://dionysos.webcindario.com/truc...s_png_msie.php

Saludos

P.D. En el país de los ciegos, el tuerto es Rey.
__________________
Al final del día hablar es gratis, codificar no lo es
  #9 (permalink)  
Antiguo 21/06/2005, 17:15
Avatar de Artdeco  
Fecha de Ingreso: abril-2005
Ubicación: Barcelona
Mensajes: 165
Antigüedad: 12 años, 8 meses
Puntos: 1
Cita:
Iniciado por baccxus
Jejeje... me puse a ver la página, y revisando encontré que usan un .PNG de 1x1 como background en el menú, es este es el que tiene la transparencia, para que te hagas una idea de lo que hablo esta es la imagen http://www.mtv.es/graphics/siteimgs/opacity.png, y aquí esta es parte de su CSS:

.realtransparent, .realtoptransparent, .newtransparent{
background-image: url("/mtv.es/graphics/siteimgs/opacity.png");
}

En conclusión me adelanté al responderte sobre el alpha, pero me alegra haber aprendido algo nuevo.
Ehmm... a ver, yo no tengo Photoshop, tengo Corel Photo Paint y he exportado una capa transparente de color marrón (que es el color que quiero) a PNG, pero no se ve transparente

De todas formas, he ido a
http://dionysos.webcindario.com/truc...s_png_msie.php
la página que me has dicho y lo he hecho todo bien, pero tiene un grave error: NO FUNCIONA SI LA IMAGEN ES UN FONDO DE TABLA.

En fin, acabo de intentar aplicar el trozo de CSS que me has dado, me he guardado el PNG de la MTV de prueba:

}

.realtransparent, .realtoptransparent, .newtransparent{
background-image: url(".../opacity.png");
}

Y la tabla es así:

<table width="450" height="300" border="0" align="center" cellpadding="0" cellspacing="0" class="realtransparent realtoptransparent newtransparent">

En el class no sé qué poner, he puesto una sola y no funcionaba, dos tampoco, así que he puesto las tres.

NO VA DE NINGUNA FORMA. O sea, que el único método que me ha funcionado para hacer fondos de tabla transparentes ha sido el método de la página que he puesto yo O__O
  #10 (permalink)  
Antiguo 21/06/2005, 18:02
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Ahh. pero trabajas con tablas:

este es el CSS

.transparencia {background-color:#F00; filter:alpha (opacity=50)}


Esta es tu tabla
<table width="450" height="300" border="0" align="center" cellpadding="0" cellspacing="0" class="transparencia">

Mira que simple... pero ojo, solo funciona en Internet Explorer, estoy buscando a ver para los otros navegadores, lo simple de esto es que no necesitas ninguna imagen de fondo ni nada.

TODAVIA NO TENGO NADA CLARO, es cuestion de seguir probando... calma
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 21/06/2005 a las 18:10
  #11 (permalink)  
Antiguo 21/06/2005, 18:15
Avatar de Artdeco  
Fecha de Ingreso: abril-2005
Ubicación: Barcelona
Mensajes: 165
Antigüedad: 12 años, 8 meses
Puntos: 1
Eso funciona también con Mozilla y con Firefox si añadimos:

filter: alpha(opacity=50); opacity: .5; -moz-opacity:0.5;


Vamos, que eso ya lo he probado, pero no me interesa porque transpararenta también al texto!! Al texto de la tabla, a las imágenes e, incluso, a la tabla que pongamos dentro también le afectará. He creado otro class opaco al 100%:

filter: alpha(opacity=10); opacity: .1; -moz-opacity:0.1;

Se lo he añadido al texto, pero tampoco funciona V_V Se transparenta todo.
  #12 (permalink)  
Antiguo 21/06/2005, 18:53
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 12 años, 10 meses
Puntos: 5
que tal, mira pues, ya me funciono el script para que se vizualie correctamente los .png, (solo insertados como images)......

puesto que cuando utilizo el opacity.png como background de una tabla no me funciona (se ve mal como antes, o sea, solo funciona el script si inserto el .png como imagen) (pero tambien deseo hacer el efecto MTV....), lo han intentado ustedes?(utilizar el opacity.png como background de una tabla y que se vizualize correctamente) no se si a istedes les sirva, q dicen.
__________________

  #13 (permalink)  
Antiguo 22/06/2005, 10:41
 
Fecha de Ingreso: marzo-2005
Mensajes: 9
Antigüedad: 12 años, 9 meses
Puntos: 0
Aquí tienes un tutorial para crear un menú horizontal desplegable con efecto de transparencia, el mismo efecto del menu vertical de mtv, funciona tanto en iexplorer como firefox y otros navegadores, te puedes descargar el código fuente.

Con respecto a las imagenes, recomiendo usar los gifs en vez de los png, precisamente por que la transparencia no suele funcionar en distintos navegadores.

Saludos
  #14 (permalink)  
Antiguo 22/06/2005, 18:14
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 12 años, 10 meses
Puntos: 5
Exclamación

bueno, Creo que todos tenemos la misma duda....

=como rayos se hace una tabla de fondo transparente sin que se afecte el contenido de la misma?

...algun dia lo sabremos??
...algun genio css se apiadara de nosotros??
__________________

  #15 (permalink)  
Antiguo 01/07/2008, 09:54
 
Fecha de Ingreso: julio-2008
Mensajes: 1
Antigüedad: 9 años, 5 meses
Puntos: 0
Sonrisa Respuesta: Tablas transparentes (mtv.es)

Código:
<html>
<head>
<style type="text/css">
div.background
  {
  width: 500px;
  height: 250px;
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
  }
div.transbox
  {
  width: 400px;
  height: 180px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  }
div.transbox p
  {
  margin: 30px 40px;
  font-weight: bold;
  color: #000000;
  }
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>
Esta en ingles pero seguro que se entiende

sacado de w3schools

Saludos
  #16 (permalink)  
Antiguo 27/01/2010, 09:16
 
Fecha de Ingreso: noviembre-2009
Mensajes: 5
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Tablas transparentes (mtv.es)

Cita:
Iniciado por Artdeco Ver Mensaje
Hola! Me gustaría que alguien me dijese cómo se lo montan los de [url]www.mtv.es[/url] para que sus tablas sean transparentes.

Miré su código fuente hace tiempo y conseguí encontrar en las CSS las tablas transparentes, pero no pude aplicarlo porque no me salía. Si alguien conoce el método, se lo agradecería, ya que he buscado por Internet y en este foro a ver si se había hablado del tema antes y parece que no.

Muchas gracias


ya se q el post es d hace unos añitos xo creo q lo acabo d descubrir, x si a alguien le interesa...
yo tengo el cs4 y en mi caso, el la barra de abajo del dreamweaver selecciono la tabla y luego en la misma barra de abajo, hay como un icono q pone "quick and tag editor", q es como una hoja de papel y un lapiz, apretas encima y te sale una especie de ventana, yo en mi caso he puesto:

<table width="800" border="0" align="center" cellpadding="2" bgcolor="transparent" style="text-align: center">

y se ha qdado transparente, y veo la imagen de fondo, además el texto se sigue viendo igualmente.
espero q le sirva a alguien!!
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:39.