Jinsi ya Mtindo IFrames Na CSS

Kuelewa jinsi IFrames hufanya kazi katika kubuni mtandao

Unapoingia kipengele kwenye HTML yako, una fursa mbili za kuongeza mitindo ya CSS :

Kutumia CSS kwa Sinema Element IFRAME

Jambo la kwanza unapaswa kuzingatia wakati wa kupiga picha yako ni IFRAME yenyewe. Wakati browsers nyingi zinajumuisha iframes bila mitindo mingine ya ziada, bado ni wazo nzuri ya kuongeza mitindo fulani ili kuwaweka thabiti.

Hapa kuna baadhi ya mitindo ya CSS Mimi daima nijumuisha kwenye iframes yangu:

Na upana na urefu umewekwa kwa ukubwa unaofaa katika hati yangu. Hapa ni mifano ya sura isiyo na mitindo na moja na maandishi ya msingi. Kama unavyoweza kuona, mitindo hii hasa huondoa mpaka karibu na iframe, lakini pia kuhakikisha kwamba browsers zote zinaonyesha kwamba iframe na margins sawa, padding, na vipimo.

HTML5 inapendekeza kwamba utumie mali iliyozidi kuondokana na kuondoa mipako ya kitabu, lakini hiyo haiwezi kuaminika. Kwa hiyo ikiwa unataka kuondoa au kubadilisha mipangilio ya vichwa, unapaswa kutumia sifa ya kutazama kwenye iframe yako pia. Ili kutumia sifa ya kupiga, kuongezea kama sifa nyingine yoyote na kisha chagua moja ya maadili matatu: ndiyo, hapana, au auto. ndiyo inamwambia kivinjari daima ni pamoja na baa za scroll hata kama hazihitajiki. hapana anasema kuondoa vikwazo vyote vya uchapishaji ikiwa inahitajika au la.

auto ni default na ni pamoja na baa scroll wakati zinahitajika na kuondosha yao wakati wao si.

Hapa ni jinsi ya kuzima kupiga kura kwa sifa ya kupima:

scrolling = "hapana" >
Hii ni iframe.

Ili kuzima kufungua kwa HTML5 unatakiwa kutumia mali inayoongezeka. Lakini kama unavyoweza kuona katika mifano hii haifanyi kazi kwa uaminifu katika vivinjari vyote bado.

Hapa ndivyo unavyogeuka kupiga wakati wote na mali iliyozidi:

style = "overflow: scroll;" >
Hii ni iframe.

Hakuna njia ya kuzima kuvuka kikamilifu na mali iliyofurika.

Waumbaji wengi wanataka madirisha yao kuchanganya na historia ya ukurasa wao ili wasomaji hawajui kwamba iframes ni hata pale. Lakini unaweza pia kuongeza mitindo ili kuwafanya wasimama. Kurekebisha mipaka ili iframe inaonyesha zaidi kwa urahisi ni rahisi. Tumia tu mali ya mtindo wa mpangilio (au inahusiana na mpaka-juu, mpaka wa kulia, upande wa kushoto-wa kushoto, na mali ya chini-mpaka) kwa mtindo mipaka:

iframe {
upanda-juu: # c00 1px imefungwa;
mpaka-wa kulia: # c00 2px imefungwa;
mpaka-wa kushoto: # c00 2px imefungwa;
mpaka-mpaka: # c00 4px imefungwa;
}

Lakini usipaswi kuacha na kupiga mipaka na mipaka kwa mitindo yako. Unaweza kutumia aina nyingi za CSS kwa iframe yako. Mfano huu hutumia mitindo ya CSS3 ili kutoa iframe kivuli, pembe za mviringo, na kuzunguka digrii 20.

iframe {
juu ya juu: 20px;
chini ya chini: 30px;

-a-mpaka-radius: 12px;
-basi-mpaka-radius: 12px;
mpaka-mpaka: 12px;

-moz-sanduku-kivuli: 4px 4px 14px # 000;
-kitabu-sanduku-kivuli: 4px 4px 14px # 000;
sanduku-kivuli: 4px 4px 14px # 000;

-moz-kubadilisha: mzunguko (20deg);
-babkit-kubadilisha: mzunguko (20deg);
-o-kubadilisha: mzunguko (20deg);
-ms-kubadilisha: mzunguko (20deg);
chuja: progid: DXImageTransform.Microsoft.BasicImage (mzunguko = .2);
}

Kupiga picha ya Maudhui ya Iframe

Kupiga maridadi yaliyomo ya iframe ni kama kupiga picha ukurasa wowote wa wavuti. Lakini, lazima uwe na upatikanaji wa hariri ukurasa . Ikiwa huwezi kuhariri ukurasa (kwa mfano, iko kwenye tovuti nyingine).

Ikiwa unaweza kuhariri ukurasa, basi unaweza kuongeza karatasi ya mtindo wa nje au mitindo kwenye hati kama vile ungependa kutafsiri ukurasa wowote wa wavuti kwenye tovuti yako.