Kako oblikovati okvirje s CSS

The best protection against click fraud.

Ko v svoj element vdelate element HTML, imate dve priložnosti, da mu dodate sloge CSS:

  • Lahko slog
    IFRAME
    sama.
  • Stran lahko oblikujete znotraj
    IFRAME
    (pod določenimi pogoji).

Uporaba CSS za oblikovanje elementa IFRAME

Dva moška, ​​ki kodirata v računalnikih
vgajic / Getty Images

Prva stvar, ki jo morate upoštevati pri oblikovanju okvirjev, je.

IFRAME
  • sama. Medtem ko večina brskalnikov vključuje vstavljene okvire brez veliko dodatnih slogov, je vseeno dobro dodati nekaj stilov, da ostanejo dosledni. Tukaj je nekaj stilov CSS, ki jih vedno vključimo iframe:
    marža: 0;
  • oblazinjenje: 0;
  • meja: nobena;
  • premer: vrednost;
  • višina: vrednost;

Z.

premer

in.

višina

nastavite na velikost, ki ustreza mojemu dokumentu. Tu so primeri okvirja brez slogov in tistega, ki ima samo osnove. Kot lahko vidite, ti slogi večinoma samo odstranijo obrobo okoli okvira iframe, hkrati pa zagotavljajo, da vsi brskalniki prikazujejo okvir iframe z enakimi robovi, oblazinjenjem in dimenzijami.HTML5 priporoča, da uporabite.

prelivanje

za odstranjevanje drsnih trakov znotraj

instagram viewer
drsno polje, vendar to ni zanesljivo. Torej, če želite odstraniti ali spremeniti drsne trakove, uporabite.

pomikanje

atribut tudi na vašem iframeju. Za uporabo.

pomikanje

atribut, ga dodajte kot kateri koli drug atribut in nato izberite eno od treh vrednosti:

ja

,

št

, ali.

samodejno

.

ja

brskalniku pove, da vedno vključuje drsne trakove, tudi če niso potrebni.

št

pravi, da odstranite vse drsnike, če je to potrebno ali ne.

samodejno

je privzeta in vključuje drsne trakove, kadar so potrebni, in jih odstrani, kadar niso. Tukaj je opisano, kako izklopite drsenje z.

pomikanje
atribut: pomikanje = "ne">
To je okvir.

Za izklop drsenja v HTML5 naj bi uporabili.

prelivanje

lastnine. A kot lahko vidite v teh primerih, še ne deluje zanesljivo v vseh brskalnikih. Evo, kako bi ves čas vklopili drsenje z.

prelivanje
lastnost: style = "overflow: scroll;">
To je okvir.

Tukaj je ni šans da popolnoma izklopite drsenje s tipko.

prelivanje

lastnine. Številni oblikovalci želijo, da se njihovi vstavljeni okviri zlijejo z ozadjem strani, na kateri so, tako da bralci ne vedo, ali so vstavljeni vstavki sploh. Lahko pa dodate tudi sloge, da bodo izstopali. Enostavno je prilagoditi obrobe, da se okvir iframe prikaže lažje. Samo uporabite.

meja

lastnost sloga (ali je povezana.

border-top

,

meja-desno

,

meja-levo

, in.

meja-dno
lastnosti) za oblikovanje robov: iframe {
border-top: # c00 1px pikčasto;
meja-desno: # c00 2px pikčasto;
obroba-levo: # c00 2px pikčasto;
border-bottom: # c00 4px pikčasto;
}

Ampak ne smete se ustaviti z drsenjem in obrobami za vaše sloge. Za svoj iframe lahko uporabite veliko drugih stilov CSS. Ta primer s slogi CSS3 daje okvirju iframe senco, zaobljene vogale in ga zasuka za 20 stopinj.

iframe {
margin-top: 20px;
margin-bottom: 30 slikovnih pik;
-moz-polmer-meje: 12 slikovnih pik;
-spletni-polmer-meje: 12 slikovnih pik;
polmer obrobe: 12 slikovnih pik;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-preobrazba: zasukaj (20deg);
-webkit-transform: zasukaj (20deg);
-o-preoblikovanje: vrtenje (20deg);
-ms-transformiraj: zasukaj (20deg);
filter: progid: DXImageTransform. Microsoft. BasicImage (rotacija = .2);
}

Oblikovanje vsebine okvirja

Oblikovanje vsebine iframeja je tako kot oblikovanje katere koli druge spletne strani. Ampak ti mora imeti dostop za urejanje strani. Če strani ne morete urediti (na primer na drugi strani).

Če lahko uredite stran, lahko dodate zunanji slog ali sloge kar v dokument, tako kot bi oblikovali katero koli drugo spletno stran na svojem spletnem mestu.

instagram story viewer