Razumijevanje IFramesovog rada u dizajnu web stranica
Kada ugradite element u HTML , imate dvije mogućnosti za dodavanje CSS stilova :
- Možete oblikovati sam IFRAME.
- Stranicu možete oblikovati unutar IFRAME (pod određenim uvjetima).
Upotreba CSS-a za stil IFRAME elementa
Prva stvar koju biste trebali razmotriti prilikom oblikovanja vaših iframova jest IFRAME. Iako većina preglednika uključuje iframeove bez puno dodatnih stilova, ipak je dobra ideja dodati neke stilove kako bi ih dosljedni.
Evo nekih CSS stilova koje uvijek uključujem u iframe:
- margina: 0;
- padding: 0;
- granica: none;
- širina: vrijednost ;
- visina: vrijednost ;
Uz širinu i visinu postavljenu na veličinu koja odgovara mom dokumentu. Evo primjera okvira bez stilova i jedne sa samo osnovnim stilom. Kao što možete vidjeti, ovi stilovi uglavnom uklanjaju obrub oko iframea, ali također osiguravaju da svi preglednici prikazuju iframe s iste margine, padding i dimenzije.
HTML5 preporučuje da koristite svojstvo prelijevanja da biste uklonili trake za pomicanje, ali to nije pouzdano. Dakle, ako želite ukloniti ili mijenjati trake za pomicanje, trebali biste upotrijebiti i atribut pomicanja na vašem iframeu. Da biste upotrebljavali atribut pomicanja, dodajte ga kao i svaki drugi atribut, a zatim odaberite jednu od tri vrijednosti: da, ne ili automatski. Da govori pregledniku da uvijek uključuje trake za pomicanje čak i ako nisu potrebne. ne kaže da uklanja sve trake za pomicanje ako je potrebno ili ne.
auto je zadana i uključuje trake za pomicanje kada su potrebne i uklanja ih kada nisu.
Evo kako isključiti pomicanje s atributom pomicanja:
scrolling = "ne"
Ovo je iframe.
Da biste isključili pomicanje u HTML5, trebali biste upotrebljavati svojstvo prelijevanja. No, kao što možete vidjeti u ovim primjerima, još uvijek ne funkcionira pouzdano u svim preglednicima.
Evo kako biste uključili sve vrijeme pomicanje s entitetom prelijevanja:
style = "overflow: scroll;"
Ovo je iframe.
Nema načina da potpuno isključite pomicanje s preljevom.
Mnogi dizajneri žele da se njihovi iframeovi uklopi u pozadinu stranice na kojoj se nalaze, tako da čitatelji ne znaju da su iframeovi čak i tamo. Ali možete dodati i stilove kako bi ih se istaknulo. Podešavanje granica kako bi se iframe lakše pokazao lako je. Upotrijebite svojstvo graničnog stila (ili povezane granične, granične desne, granične lijeve i granične predmete) kako biste oblikovali granice:
iframe {
granični vrh: # c00 1 piksela;
granica-desno: # c00 2px isprekidano;
granica lijevo: # c00 2px isprekidano;
granični dno: # c00 4px isprekidano;
}
Ali ne biste se trebali zaustaviti pomicanje i granice za svoje stilove. Možete primijeniti puno drugih CSS stilova u svoj iframe. Ovaj primjer upotrebljava CSS3 stilove kako bi iframe imao sjenu, zaobljeni kutovi i okrenuo ga za 20 stupnjeva.
iframe {
margin-top: 20 piksela;
margina-dno: 30 piksela;
-moz-granični polumjer: 12px;
-webkit-border-radius: 12px;
granični polumjer: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
okvirna sjena: 4 x 4 x 14 x 000;
-moz-transformacija: rotirati (20deg);
-webkit-transformacija: rotirati (20deg);
-O-transformacije: rotiraju (20deg);
Ms-transformacija: rotirati (20deg);
Filter: ProgID: DXImageTransform.Microsoft.BasicImage (rotacija = .2);
}
Stiliranje sadržaja iframea
Oblikovanje sadržaja iframea je baš kao oblik bilo koje druge web stranice. No, morate imati pristup uređivanju stranice . Ako ne možete uređivati stranicu (na primjer, na nekom drugom mjestu).
Ako možete urediti stranicu, možete dodati vanjski stilski stil ili stilove izravno u dokument kao što biste htjeli oblikovati bilo koju drugu web stranicu na svojoj web stranici.