Comprender como funcionan IFrames no deseño do sitio web
Cando incorpora un elemento no teu HTML , tes dúas oportunidades para engadir estilos CSS a el:
- Podes estilizar a propia IFRAME.
- Podes estilear a páxina dentro do IFRAME (baixo certas condicións).
Usando CSS para activar o IFRAME Element
A primeira cousa que debes considerar cando deseña os teus iframes é a propia IFRAME. Aínda que a maioría dos navegadores inclúen iframes sen moitos estilos extra, aínda é unha boa idea engadir algúns estilos para mantelos consistentes.
Aquí tes algúns estilos CSS que sempre inclúo nos meus iframes:
- marxe: 0;
- padding: 0;
- fronteira: ningún;
- ancho: valor ;
- altura: valor ;
Coa ancho e altura fixado no tamaño que se encaixa no meu documento. Aquí tes exemplos dun cadro sen estilos e outro con só os estilos básicos. Como podes ver, estes estilos simplemente eliminan o bordo ao redor do iframe, pero tamén aseguran que todos os navegadores mostren ese iframe coas mesmas marxes, acolchado e dimensións.
HTML5 recomenda que use a propiedade de desbordamento para eliminar as barras de desprazamento, pero iso non é fiable. Entón, se quere eliminar ou cambiar as barras de desprazamento, tamén debe usar o atributo de desprazamento no seu iframe. Para usar o atributo de desprazamento, engádeo como calquera outro atributo e elixe un dos tres valores: si, non ou automático. si di ao navegador que inclúa sempre barras de desprazamento aínda que non sexan necesarias. Non di que elimine todas as barras de desprazamento se é necesario ou non.
auto é o predeterminado e inclúe as barras de desprazamento cando son necesarias e elimínaas cando non o son.
Aquí está como desactivar o desprazamento co atributo de desprazamento:
scrolling = "non"
Este é un iframe.
Para desactivar o desprazamento en HTML5 deberías usar a propiedade de desbordamento. Pero como podes ver nestes exemplos , aínda non funciona de forma fiable en todos os navegadores.
Vexa como se activaría o desprazamento todo o tempo coa propiedade de desbordamiento:
style = "overflow: scroll;" >
Este é un iframe.
Non hai forma de desactivar completamente o desprazamento coa propiedade de rebose.
Moitos deseñadores queren que os seus iframes se mesturan co fondo da páxina en que se atopan para que os lectores non saiban que os iframes aínda están alí. Pero tamén podes engadir estilos para facelos destacar. Axustar os bordos para que o iframe apareza con máis facilidade é sinxelo. Só ten que empregar a propiedade do estilo de borde (ou está relacionada coas propiedades do borde superior, o bordo dereito, o bordo esquerdo e o bordo inferior) para definir as fronteiras:
iframe {
border-top: # c00 1px punteado;
border-right: # c00 2px punteado;
fronteira esquerda: # c00 2px punteado;
bottom-bottom: # c00 4px punteado;
}
Pero non debe parar co desprazamento e as fronteiras dos seus estilos. Pode aplicar moitos outros estilos CSS ao seu iframe. Este exemplo usa estilos CSS3 para dar ao iframe unha sombra e esquinas redondeadas e rota-lo 20 graos.
iframe {
marxe superior: 20 px;
marxe inferior: 30 px;
-moz-border-radius: 12 px;
-webkit-border-radius: 12px;
radio fronteirizo: 12 px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
caixa-sombra: 4px 4px 14px # 000;
-moz-transformar: rotar (20deg);
-webkit-transform: rotar (20deg);
-o-transformar: rotar (20deg);
-ms-transformar: rotar (20deg);
filtro: progid: DXImageTransform.Microsoft.BasicImage (rotación = .2);
}
Deseñando o contido de Iframe
Deseñar o contido dun iframe é como o estilo de calquera outra páxina web. Pero debes ter acceso para editar a páxina . Se non pode editar a páxina (por exemplo, está noutro sitio).
Se pode editar a páxina, entón pode engadir unha folla ou estilos de estilo externos directamente no documento coma se desexesen outra páxina web no seu sitio.