Cómo diseñar IFrames con CSS

Comprender cómo funcionan los IFrames en el diseño de sitios web Cuando incrusta un elemento en su HTML, tiene dos oportunidades para agregarle estilos CSS: Puede diseñar el propio IFRAME .

Comprender cómo funcionan los IFrames en el diseño de sitios web

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

  • Puede diseñar el propio
     IFRAME 

    .

  • Puede diseñar la página dentro del

     IFRAME 

    (bajo ciertas condiciones).

Usar CSS para dar estilo al elemento IFRAME

Lo primero que debe considerar al diseñar sus iframes es el

 IFRAME 
  • 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 incluyo en mis iframes:

     margin: 0; 
  •  relleno: 0; 
  •  borde: ninguno; 
  •  ancho:  valor ; 
  •  height:  value ; 

Con el

 ancho 

y

 altura 

establecer el tamaño que se ajuste a mi documento. Aquí hay ejemplos de un marco sin estilos y uno con solo los básicos. 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 utilice el

 desbordamiento 

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

 desplazamiento 

atributo en su iframe también. Usar el

 desplazamiento 

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


,

 no 

o

 auto 

.


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

 no 

dice eliminar todas las barras de desplazamiento si es necesario o no.

 auto 

es el valor predeterminado e incluye las barras de desplazamiento cuando son necesarias y las elimina cuando no lo son. A continuación, se explica cómo desactivar el desplazamiento con el

 desplazamiento 
atributo: desplazamiento = "no" >
Este es un iframe.

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

 desbordamiento 

propiedad. Pero como puede ver en estos ejemplos, todavía no funciona de manera confiable en todos los navegadores. Así es como activaría el desplazamiento todo el tiempo con el

 overflow 
property: style = "overflow: scroll;" >
Este es un iframe.

no hay forma de desactivar completamente el desplazamiento con el

 desbordamiento 

propiedad. 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. Solo usa el

 borde 

propiedad de estilo (o está relacionada

 borde superior 

,

 borde-derecho 

,

 borde-izquierda 

y

 border-bottom 
propiedades) para dar estilo a los bordes: iframe {
border-top: # c00 1px punteado;
border-right: # c00 2px punteado;
border -izquierdo: # c00 2px punteado;
borde inferior: # c00 4px punteado;
}

Pero no debe detenerse con el desplazamiento y los bordes de sus estilos. Puede aplicar muchos otros estilos CSS a su iframe. Este ejemplo utiliza estilos CSS3 para dar sombra al iframe, esquinas redondeadas y girarlo 20 grados.

 iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px ;
radio-borde: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box -sombra: 4px 4px 14px # 000;
-moz-transform: rotate (20deg);
-webkit-transform: rotate (20deg);
-o-transform: rotate (20deg) ;
-ms-transform: rotate (20deg);
filter: progid: DXImageTransform.Microsoft.BasicImage (rotacion = .2);
}

Estilo del contenido del iframe

Diseñar el contenido de un iframe es como diseñar cualquier otra página web. Pero, debe tener acceso para editar la página . Si no puede editar la página (por ejemplo, está en otro sitio).

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

Rate article
labsfabs.com
Add a comment