Komprenante kiel IFrames funkcias en retejo-dezajno
Kiam vi enmetas elementon en via HTML , vi havas du eblecojn aldoni CSS-stilojn al ĝi:
- Vi povas stili la IFRAME mem.
- Vi povas stili la paĝon ene de la IFRAME (sub certaj kondiĉoj).
Uzante CSS al Stilo la IFRAME Elemento
La unua afero, kiun vi devas pripensi, kiam starigado de viaj iframoj estas la IFRAME mem. Dum la plimulto de la retumiloj inkluzivas iframojn sen multe da ekstraj stiloj, ĝi estas ankoraŭ bona ideo aldoni iujn stilojn por konservi ilin konsekvencaj.
Jen kelkaj CSS-stiloj, kiujn mi ĉiam inkluzivas en miaj iframoj:
- rando: 0;
- Plenigado: 0;
- limo: neniu;
- larĝa: valoro ;
- alteco: valoro ;
Kun la larĝa kaj alteco fiksita al la grandeco, kiu persvadas en mia dokumento. Jen ekzemploj de kadro kun neniuj stiloj kaj unu kun nur la bazaj bildoj. Kiel vi povas vidi, ĉi tiuj stiloj plejparte nur forigas la limon ĉirkaŭ la iframe, sed ili ankaŭ certigas, ke ĉiuj foliumiloj montras, ke se kun la samaj randoj, kompletigoj kaj dimensioj.
HTML5 rekomendas, ke vi uzas la superfluan posedaĵon por forigi la rulumajn riglilojn, sed tio ne estas fidinda. Do se vi volas forigi aŭ ŝanĝi la rulumajn stangojn, vi devus uzi la ruluman atributon en via iframe ankaŭ. Por uzi la rulavan atributon, aldonu ĝin kiel ajnan alian atributon kaj elektu unu el tri valoroj: jes, ne, aŭ aŭtomobilo. jes diras, ke la retumilo ĉiam inkluzivas rulumajn barojn eĉ se ili ne bezonas. Ne diras forigi ĉiujn rulumajn stangojn, ĉu bezonataj aŭ ne.
aŭtomata estas la defaŭlta kaj inkluzivas la rulumajn stangojn kiam ili bezonas kaj forigas ilin kiam ili ne estas.
Jen kiel malŝalti scrolling per la rulumaj atributoj:
scrolling = "no" >
Jen iframe.
Por malŝalti movadon en HTML5 vi supozas uzi la superfluan posedaĵon. Sed kiel vi povas vidi en ĉi tiuj ekzemploj, ĝi ankoraŭ ne funkcias fidinde en ĉiuj retumiloj.
Jen kiel vi turniĝos rulumi la tutan tempon per la superfluaj posedaĵoj:
style = "overflow: scroll;" >
Jen iframe.
Ne estas maniero malŝalti la movadon tute kun la superfluaj posedaĵoj.
Multaj projektistoj volas, ke iliaj aroj miksiĝos kun la fono de la paĝo, kiun ili havas, por ke legantoj ne scias, ke la iframoj estas eĉ tie. Sed vi ankaŭ povas aldoni stilojn por starigi ilin. Ĝustigante la limojn tiel ke la iframe montras pli facile estas facila. Nur uzu la landliman posedaĵon (aŭ rilatajn landlimajn limojn, landlima-dekstra, landlima-maldekstra kaj landlimaj propraĵoj) por stiligi la limojn:
iframe {
limo-supro: # c00 1px dotita;
limo-dekstra: # c00 2px dotita;
limo-maldekstra: # c00 2px dotita;
limo-fundo: # c00 4px dotita;
}
Sed vi ne devus ĉesi movi kaj limigi viajn stilojn. Vi povas apliki multajn aliajn CSS-stilojn al via iframe. Ĉi tiu ekzemplo uzas CSS3-stilojn por doni la iframe ombro, rondigitaj anguloj, kaj turnis ĝin je 20 gradoj.
iframe {
rando-supro: 20px;
rando-fundo: 30px;
-moz-limo-radiuso: 12px;
border-radiuso: 12px;
limo-radiuso: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
skatolo-ombro: 4px 4px 14px # 000;
-moz-transformo: turnu (20deg);
-bendaĵo-transformo: turnu (20deg);
-o-transformi: turni (20deg);
-ms-transformi: turni (20deg);
filtrilo: progid: DXImageTransform.Microsoft.BasicImage (rotacio = .2);
}
Stiligante la Iframe Enhavo
Stiligi la enhavon de iframe estas kiel stilo de iu ajn alia retejo. Sed, vi devas havi aliron redakti la paĝon . Se vi ne povas redakti la paĝon (ekzemple, ĝi estas sur alia retejo).
Se vi povas redakti la paĝon, tiam vi povas aldoni eksterajn stilojn aŭ stilojn ĝuste en la dokumento , kiel vi stilus ajnan alian retpaĝon en via retejo.