Tablas transparentes (mtv.es)

[Artdeco]

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

[baccxus]

busca de la función alpha de CSS.

Saludos

[Artdeco]

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

[Artdeco]

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;
}

[cpucpu]

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.

[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.

[cpucpu]

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.

[baccxus]

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.

[Artdeco]

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

[baccxus]

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

[Artdeco]

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.

[cpucpu]

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.

[Eduardo75]

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

[cpucpu]

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??

[badstupidmonkey]

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

[mati_vlnc]

Iniciado por Artdeco

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!!