Conèixer com funciona IFrames en el disseny del lloc web
Quan incorporeu un element al vostre codi HTML , teniu dues possibilitats d'afegir-hi estils CSS :
- Podeu personalitzar el propi IFRAME.
- Podeu personalitzar la pàgina dins de l'IFRAME (sota certes condicions).
Ús de CSS per a l'estil de l'element IFRAME
El primer que hauríeu de tenir en compte en dissenyar els vostres iframes és el propi IFRAME. Tot i que la majoria dels navegadors inclouen iframes sense molts estils addicionals, encara és una bona idea afegir alguns estils per mantenir-los de forma coherent.
Aquests són alguns estils CSS que sempre incloem en els meus iframes:
- marge: 0;
- farcit: 0;
- frontera: cap;
- ample: valor ;
- alçada: valor ;
Amb l'amplada i l'alçada fixada a la mida que s'adapti al document. A continuació, es mostren exemples d'un marc sense estils i un d'ells amb els principis bàsics. Com podeu veure, aquests estils solen eliminar la vora del iframe, però també asseguren que tots els navegadors mostrin aquest iframe amb els mateixos marges, farcit i dimensions.
HTML5 recomana que utilitzeu la propietat de desbordament per eliminar les barres de desplaçament, però això no és fiable. Així que si voleu eliminar o canviar les barres de desplaçament, també haureu d'utilitzar l'atribut de desplaçament al vostre iframe. Per utilitzar l'atribut de desplaçament, afegiu-lo com qualsevol altre atribut i, a continuació, trieu un dels tres valors: sí, no o automàtic. sí, diu al navegador que inclogui sempre barres de desplaçament, fins i tot si no són necessàries. no diu eliminar totes les barres de desplaçament necessàries o no.
auto és el valor predeterminat i inclou les barres de desplaçament quan són necessàries i les elimina quan no ho són.
A continuació s'explica com desactivar el desplaçament amb l'atribut de desplaçament:
desplaçament = "no" >
Aquest és un iframe.
Per desactivar el desplaçament a HTML5 se suposa que voleu utilitzar la propietat de desbordament. Però, com podeu veure en aquests exemples , encara no funciona de manera fiable en tots els navegadors.
A continuació us indiquem com podeu activar el desplaçament tot el temps amb la propietat de desbordament:
style = "overflow: scroll;" >
Aquest és un iframe.
No hi ha manera d'apagar el desplaçament completament amb la propietat de desbordament.
Molts dissenyadors volen que els seus iframes es barregin amb el rerefons de la pàgina on estiguin perquè els lectors no saben que els iframes són fins i tot allà. Però també podeu afegir estils per fer-los ressaltar. Ajustar les vores perquè l'iframe es mostri més fàcilment sigui fàcil. Només cal que utilitzeu la propietat d'estil de la vora (o les seves propietats border-top, border-right, border-left i border-bottom) relacionades amb l'estil per definir les vores:
iframe {
frontera superior: # c00 1px puntejada;
frontera-dreta: # c00 2px puntejada;
frontera esquerra: # c00 2px puntejada;
frontera inferior: # c00 4px puntejada;
}
Però no hauríeu d'aturar-vos amb el desplaçament i les vores dels vostres estils. Podeu aplicar molts altres estils CSS al vostre iframe. Aquest exemple utilitza estils CSS3 per donar a l'iframe una ombra, cantonades arrodonides i girar-la 20 graus.
iframe {
marge superior: 20 px;
marge inferior: 30 px;
-moz-frontera-ràdio: 12 px;
-webkit-border-radius: 12 px;
radi límit: 12 px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
caixa-ombra: 4px 4px 14px # 000;
-moz-transformar: girar (20deg);
-webkit-transform: rotar (20deg);
-o-transformar: girar (20deg);
-ms-transformar: girar (20deg);
filtre: progid: DXImageTransform.Microsoft.BasicImage (rotació = .2);
}
Dissenyant el contingut d'Iframe
Estilitzar els continguts d'un iframe és com dibuixar qualsevol altra pàgina web. Però, heu de tenir accés per editar la pàgina . Si no podeu editar la pàgina (per exemple, és a un altre lloc).
Si podeu editar la pàgina, podeu afegir un full d' estils o estils externs al document tal com ho faria si voleu escriure qualsevol altra pàgina web del vostre lloc.