Cómo estilizar IFrames con CSS

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en telegram
Compartir en whatsapp
Compartir en email
Compartir en print
Cómo estilizar IFrames con CSS

Cómo estilizar IFrames con CSS

VALORACIÓN DEL ARTÍCULO:
5/5


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

  • Puede cambiar el estilo del
    IFRAME

    mismo.

  • Puede cambiar el estilo de la página dentro de
    IFRAME

    (bajo ciertas condiciones).

Uso de CSS para modelar el elemento IFRAME

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

IFRAME
  • en sí mismo. Aunque la mayoría de los navegadores incluyen iframes sin muchos estilos adicionales, sigue siendo una buena idea añadir algunos estilos para mantenerlos consistentes. Algunos estilos de CSS que siempre incluyo en mis iframes:
    margin: 0;
  • border: none;
  • anchura: valor;
  • altura: valor;

Con el

ancho

y

altura

ajustado al tamaño que cabe en mi documento. Aquí hay ejemplos de un marco sin estilos y uno con el estilo básico. Como puede ver, estos estilos en su mayoría sólo 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 comando

desbordamiento

para quitar las barras de desplazamiento, pero eso no es fiable. Por lo tanto, si desea eliminar o cambiar las barras de desplazamiento, debe utilizar el comando

desplazamiento

en su iframe también. Para usar el

desplazamiento

añádalo como cualquier otro atributo y luego elija uno de los tres valores:

sí No

o

automático

.

le dice al navegador que siempre incluya barras de desplazamiento aunque no sean necesarias.

No

dice que se quiten todas las barras de desplazamiento tanto si es necesario como si no.

automático

es el valor predeterminado e incluye las barras de desplazamiento cuando son necesarias y las elimina cuando no lo son.

scrolling
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>iattribute:scrolling="no"br/>This is an iframe.

Para desactivar el scrolling en HTML5 se debe utilizar el comando

desbordamiento

de la propiedad. Pero como puede ver en estos ejemplos, aún no funciona de forma fiable en todos los navegadores. Así es como activarías el desplazamiento todo el tiempo con el botón

desbordamiento
Esto es un iframe;

No hay manera de desactivar completamente el desplazamiento con la tecla

desbordamiento

de la 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 ahí. Pero también puede añadir estilos para que destaquen. Es fácil ajustar los bordes para que el iframe aparezca más fácilmente. Sólo tienes que usar el

Frontera

style (o está relacionado

border-top

borde-derecha Frontera izquierda

y

border-bottom
) para modelar los bordes: iframe {
>.en la cima de la frontera: #c00 1px punteado;
de la frontera derecha: #c00 2px punteado;
frontera izquierda: #c00 2px punteado;
en el fondo de la frontera: #c00 4px punteado;
}

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

iframe {
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>imargen-tapón: 20px;
margen-inferior: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
radio de la frontera: 12px;
-moz-box-shadow: 4px 4px 14px #000;
-webkit-box-shadow: 4px 4px 14px #000;
sombra de la caja: 4px 4px 4px 14px #000;
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-otransform:rotate(20deg);
-ms-transform:rotate(20deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=.2);
}

Cómo cambiar el estilo del contenido del marco

Estilizar el contenido de un iframe es como estilizar cualquier otra página web. Pero, usted 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 estilo externa o estilos directamente en el documento, tal como lo haría con cualquier otra página web de su sitio.

Deja un comentario

TAMBIÉN TE INTERESA

avatares-para-los-clientes-de-un-supermercado

Las tiendas y las calles se podrían llenar de avatares inteligentes…

Empieza a sonar con fuerza el metaverso en numerosas industrias. El futuro de internet consistirá a base de plataformas o salas para interactuar, pero en lugar de nosotros serán los avatares que hayamos diseñado los que se desenvuelvan por este nuevo espacio virtual que dará un paso más con respecto a las redes sociales.  

anillo-Circular

Menos la hora, el anillo Circular ofrece todo lo que un buen smartwatch

El anillo Circular se suma a la tendencia imparable de los wearables en el mundo de la tecnología y la electrónica de consumo. Todo lo que ofrece, exceptuando la hora, puede asemejarse a las funciones de un buen smartwatch como el de Apple o cualquier otra pulsara de conocidas marcas del segmento.   Índice de

OnePlus-10-Pro

Un nuevo pura sangre de Android llegará en primavera: OnePlus 10 Pro

Apenas estamos saboreando al OnePlus 9 Pro y la marca anuncia su nuevo flagship: el OnePlus 10 Pro. Será el smartphone referente de una marca que poco a poco se está haciendo un hueco importante en el mercado europeo tras triunfar en China. Será en su país de origen donde se lance el dispositivo y

movil-plegable-honor-magic-v

Nuevo móvil plegable en el mercado: Honor Magic V

Si eres fan del móvil plegable, has de saber que el de Samsung no es el único que puede ocupar tu mente. El Honor Magic V acaba de salir del horno y promete hacerle mucha competencia a su rival surcoreano.   El Honor Magic V se presenta como el primer móvil plegable de la firma

hacker

Destapadas las cifras de fraude en el pasado Black Friday: ojo a España

Pasadas ya unas cuantas semanas del Black Friday, podemos sacar conclusiones sobre el fraude o los intentos de fraude que se han producido a nivel global y en España. Los datos que han salido a la luz sitúan a España como una gran diana por los hackers, ya que nuestro país supera ampliamente la media

OPPO-Air-Glass

Las OPPO Air Glass esperan ver la luz en el primer trimestre del año

Las OPPO Air Glass son las primeras gafas de realidad asistida de la marcha china que fueron presentadas durante la última parte del año 2021, en su llamado INNO Day. Su llegada definitiva al mercado se estima para esta primera parte del año 2022, aunque por el momento su comercialización solo se producirá en territorio