Cómo diseñar IFrames con CSS

Cuando incrusta un elemento en su HTML, tiene dos oportunidades para agregarle estilos CSS:

• Puede diseñar & lt; pre & gt; IFRAME & lt; / pre & gt; sí mismo.
• Puede diseñar la página dentro de & lt; pre & gt; IFRAME & lt; / pre & gt; (bajo ciertas condiciones).

Usando CSS para diseñar el elemento IFRAME

& lt; / img & gt ;
vgajic / Getty Images

Lo primero que debe tener en cuenta al diseñar sus iframes es el

Video destacado
& lt; pre & gt; IFRAME & lt; / pre & gt ;

• sí mismo. Si bien la mayoría de los navegadores incluyen iframes sin muchos estilos adicionales, sigue siendo una buena idea agregar algunos estilos para mantenerlos consistentes. Aquí hay algunos estilos CSS que siempre incluimos en iframes: & lt; pre & gt; margen: 0; & lt; / pre & gt ;
• & lt; pre & gt; relleno: 0; & lt; / pre & gt ;
• & lt; pre & gt; border: none; & lt; / pre & gt ;
• & lt; pre & gt; ancho: valor ; & lt; / pre & gt ;
• & lt; pre & gt; altura: valor ; & lt; / pre & gt ;

Con el

& lt; pre & gt; width & lt; / pre & gt ;

y

& lt; pre & gt; height & lt; / pre & gt ;

configurado al tamaño que cabe en mi documento. Aquí hay ejemplos de un marco sin estilos y uno con solo los conceptos básicos diseñados. Como puede ver, estos estilos en su mayoría solo eliminan el borde alrededor del iframe, pero también aseguran que todos los navegadores muestren ese iframe con los mismos márgenes, relleno y dimensiones. HTML5 recomienda que use el

& lt; pre & gt; desbordamiento & lt; / pre & gt ;

propiedad para eliminar las barras de desplazamiento dentro de una caja de desplazamiento, pero eso es confiable. Entonces, si desea eliminar o cambiar las barras de desplazamiento, debe usar el

& lt; pre & gt; scrolling & lt; / pre & gt ;

atributo en su iframe también. Para usar el

& lt; pre & gt; scrolling & lt; / pre & gt ;

atributo, agréguelo como cualquier otro atributo y luego elija uno de los tres valores:

& lt; pre & gt; yes & lt; / pre & gt ;

,

& lt; pre & gt; no & lt; / pre & gt ;

, o

& lt; pre & gt; auto & lt; / pre & gt ;

. & lt; pre & gt; yes & lt; / pre & gt ;

le dice al navegador que siempre incluya barras de desplazamiento, incluso si son necesarias.

& lt; pre & gt; no & lt; / pre & gt ;

dice eliminar todas las barras de desplazamiento, sean necesarias o no.

& lt; pre & gt; auto & lt; / pre & gt ;

es el valor predeterminado e incluye las barras de desplazamiento cuando se necesitan y las elimina cuando no lo son. Aquí se explica cómo desactivar el desplazamiento con el

& lt; pre & gt; scrollattribute: scrolling = & amp; quot; no & amp; quot; & amp; gt; Este es un iframe. & lt; / pre & gt ;

Para desactivar el desplazamiento en HTML5, se supone que debe usar el

& lt; pre & gt; desbordamiento & lt; / pre & gt ;

propiedad. Pero como puede ver en estos ejemplos, todavía no funciona de manera confiable en todos los navegadores. Aquí y amp; apos; s cómo encendería el desplazamiento todo el tiempo con el

& lt; pre & gt; desbordamiento & lt; br & gt ;
propiedad: style = & amp; quot; desbordamiento: scroll; & amp; quot; & amp; gt; Este es un iframe. & lt; / br & gt; & lt; / pre & gt ;

Hay

de ninguna manera

para apagar el desplazamiento completamente con el

& lt; pre & gt; desbordamiento & lt; / pre & gt ;

propiedad.& amp; amp; nbsp; Muchos diseñadores quieren que sus iframes se mezclen con el fondo de la página en la que se encuentran para que los lectores no sepan que los iframes están allí. Pero también puede agregar estilos para que se destaquen. Ajustar los bordes para que el iframe aparezca más fácilmente es fácil. Simplemente use el

& lt; pre & gt; border & lt; / pre & gt ;

propiedad de estilo (o está relacionada con los apostos

& lt; pre & gt; border-top & lt; / pre & gt ;

,

& lt; pre & gt; border-right & lt; / pre & gt ;

,

& lt; pre & gt; border-left & lt; / pre & gt ;

, y

& lt; pre & gt; border-bottomproperties) para diseñar los bordes: iframe {border-top: # c00 1px punteado; border-right: # c00 2px punteado; border-left: # c00 2px punteado; border-bottom: # c00 4px punteado;} & lt; & lt; &

Pero no debes detenerte con el desplazamiento y las fronteras para tus estilos. Puede aplicar muchos otros estilos CSS a su iframe. Este ejemplo utiliza estilos CSS3 para darle al iframe una sombra, esquinas redondeadas y rotarlas 20 grados.

& lt; pre & gt; iframe {& lt; / pre & gt ;
& lt; pre & gt; margin-top: 20px; & lt; / pre & gt ;
& lt; pre & gt; margen inferior: 30px; & lt; br & gt ;
& lt; br & gt ;
-moz-border-radius: 12px; & lt; br & gt ;
-webkit-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 4px 4px # 000; -webkit-box-shadow: 4px 4px 14px # 000; box-shadow: 4px 4px

Diseño del contenido de Iframe

Diseñar el contenido de un iframe es como diseñar cualquier otra página web. Pero usted debe tener acceso para editar la página . Si puede & amp; apos; t editar la página (por ejemplo, it & amp; apos; s en otro sitio).

Si puede editar la página, puede agregar una hoja de estilo externa o estilos directamente en el documento, tal como lo haría con cualquier otra página web en su sitio.

& amp; # x203A; Informática}