{"id":637,"date":"2008-05-29T14:46:00","date_gmt":"2008-05-29T17:46:00","guid":{"rendered":"http:\/\/aleare.com.ar\/web\/que-ves-cuando-me-ves-iframe-transparente\/"},"modified":"2024-04-01T16:27:48","modified_gmt":"2024-04-01T19:27:48","slug":"que-ves-cuando-me-ves-iframe-transparente","status":"publish","type":"post","link":"https:\/\/aleare.com.ar\/blog\/que-ves-cuando-me-ves-iframe-transparente\/","title":{"rendered":"\u00bfQu\u00e9 ves cuando me ves? Iframe transparente"},"content":{"rendered":"
<\/div>

En este post les voy a contar c\u00f3mo casi por casualidad descubr\u00ed que un Iframe pod\u00eda ser absolutamente transparente, usando un par de propiedades en HTML y CSS, para que quede integrado a un sitio sin que se note.<\/p>\n

.<\/span>
\nHab\u00eda una vez un Iframe<\/h2>\n

Estuve m\u00e1s de dos horas peleando con un Iframe<\/a>. \u00bfPor qu\u00e9? Porque se me ocurri\u00f3 usarlo para mi nuevo portfolio online, porque me permit\u00eda generar toda la vista de proyecto de una sola vez. Como el color de fondo se lo da una background del primer HTML que contiene parte del otro fondo (podr\u00e1n verlo online en breve), era necesario que este Iframe fuese transparente, sin color, sin nada. En FireFox qued\u00f3 muy bien de una. En Explorer, shit, me puso un fondo blanco espantoso. Estuve largo rato buscando qu\u00e9 hab\u00eda salido mal, y no encontraba error… El CSS asignaba un background:none, el HTML tampoco, el tag de Iframe tampoco…<\/p>\n

A punto de perder los estribos, busqu\u00e9 en Google y me cans\u00e9 de mirar foros con casos como el m\u00edo cuyas respuestas oscurec\u00edan m\u00e1s que aclarar. Hay gente reacia a compartir el conocimiento.<\/p>\n

.<\/span>
\nEureka!<\/h2>\n

As\u00ed fue que, de casualidad y buscando otra cosa (cuando no la serendipia) encontr\u00e9 la respuesta que buscaba: el tag allowtransparency=true<\/span> combinado con background-color: transparent<\/span>.<\/p>

\"Abre<\/a><\/div><\/div>\n

Supongamos, que tenemos un HTML llamado principal.html<\/span> que contiene un DIV con una imagen como background. Dentro de ese DIV insertaremos un Iframe. Entonces el tag deber\u00e1 quedar as\u00ed:<\/p>\n

\"Iframe<\/p>\n

Y en la hoja de estilo de pagina.html<\/span>, le agregamos la siguiente propiedad a BODY:<\/p>\n

\"Iframe<\/p>\n

Ahora s\u00ed, \u00bfque ves cuando me ves? El contenido din\u00e1mico de pagina.html<\/span> qued\u00f3 integrado bellamente a principal.html<\/span>, y la p\u00e1gina se ve exactamente igual en ambos navegadores sin tener que haber usado hacks.<\/p>\n

.<\/span>
\nAl maestro con cari\u00f1o<\/h3>\n

Mi maestro de c\u00f3digo (casi un Yoda), don Jarandilla, me hubiera sacado la duda. Pero ahora que no est\u00e1 aqu\u00ed, le dedico este peque\u00f1o logro, y lo publico para que todos los iniciados encuentren respuesta a sus dudas.<\/p>\n

Te puede interesar:<\/em>
\nSmooth Scrolling: JQuery Vs CSS<\/a><\/strong><\/em><\/div>\n

Y ahora s\u00ed, me voy a terminar los htmls que me faltan para completar mi Portfolio, que est\u00e1 quedando bonito.<\/p>\n

Larga vida a los iframes, con o sin transparencias._<\/span><\/span><\/p>\n


\n\"presearch\"<\/a><\/p>\n<\/div><\/div>