En este post les voy a contar cómo casi por casualidad descubrí que un Iframe podía ser absolutamente transparente, usando un par de propiedades en HTML y CSS, para que quede integrado a un sitio sin que se note.
.
Había una vez un Iframe
Estuve más de dos horas peleando con un Iframe. ¿Por qué? Porque se me ocurrió usarlo para mi nuevo portfolio online, porque me permitía 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án verlo online en breve), era necesario que este Iframe fuese transparente, sin color, sin nada. En FireFox quedó muy bien de una. En Explorer, shit, me puso un fondo blanco espantoso. Estuve largo rato buscando qué había salido mal, y no encontraba error… El CSS asignaba un background:none, el HTML tampoco, el tag de Iframe tampoco…
A punto de perder los estribos, busqué en Google y me cansé de mirar foros con casos como el mío cuyas respuestas oscurecían más que aclarar. Hay gente reacia a compartir el conocimiento.
.
Eureka!
Así fue que, de casualidad y buscando otra cosa (cuando no la serendipia) encontré la respuesta que buscaba: el tag allowtransparency=true combinado con background-color: transparent.
Supongamos, que tenemos un HTML llamado principal.html que contiene un DIV con una imagen como background. Dentro de ese DIV insertaremos un Iframe. Entonces el tag deberá quedar así:
Y en la hoja de estilo de pagina.html, le agregamos la siguiente propiedad a BODY:
Ahora sí, ¿que ves cuando me ves? El contenido dinámico de pagina.html quedó integrado bellamente a principal.html, y la página se ve exactamente igual en ambos navegadores sin tener que haber usado hacks.
.
Al maestro con cariño
Mi maestro de código (casi un Yoda), don Jarandilla, me hubiera sacado la duda. Pero ahora que no está aquí, le dedico este pequeño logro, y lo publico para que todos los iniciados encuentren respuesta a sus dudas.
Smooth Scrolling: JQuery Vs CSS
Y ahora sí, me voy a terminar los htmls que me faltan para completar mi Portfolio, que está quedando bonito.
Larga vida a los iframes, con o sin transparencias._
