Înțelegerea modului în care IFrames funcționează în proiectarea site-ului web
Când încorporați un element în codul HTML , aveți două ocazii să adăugați stiluri CSS la acesta:
- Puteți modela IFRAME în sine.
- Puteți modela pagina în interiorul IFRAME (în anumite condiții).
Folosind CSS pentru a modela elementul IFRAME
Primul lucru pe care ar trebui să-l luați în considerare atunci când styling-ul iframe este IFRAME în sine. În timp ce majoritatea browserelor includ iframe fără multe stiluri suplimentare, este încă o idee bună să adăugați câteva stiluri pentru a le menține coerente.
Iată câteva stiluri CSS pe care le includ mereu pe iframe-urile mele:
- marja: 0;
- umplutura: 0;
- frontieră: nici una;
- lățime: valoare ;
- înălțime: valoare ;
Cu lățimea și înălțimea setate la dimensiunea care se potrivește în documentul meu. Iată exemple ale unui cadru fără stiluri și unul cu doar elementele de bază. După cum puteți vedea, aceste stiluri îndepărtează doar marginea din jurul iframe-ului, dar se asigură de asemenea că toate browserele afișează iframe cu aceleași margini, umplutură și dimensiuni.
HTML5 vă recomandă să utilizați proprietatea overflow pentru a elimina barele de defilare, dar acest lucru nu este fiabil. Deci, dacă doriți să eliminați sau să modificați barele de defilare, ar trebui să utilizați atributul derulant și pe iframe. Pentru a utiliza atributul defilare, adăugați-l ca orice alt atribut și apoi alegeți una dintre cele trei valori: da, nu sau auto. da, spune browserului să includă întotdeauna barele de defilare, chiar dacă acestea nu sunt necesare. nu spune să elimine toate barele de defilare dacă este necesar sau nu.
auto este implicit și include barele de defilare atunci când sunt necesare și le elimină atunci când nu sunt.
Iată cum puteți dezactiva defilarea cu atributul de defilare:
scrolling = "nu"
Aceasta este o iframe.
Pentru a dezactiva deplasarea în HTML5, ar trebui să utilizați proprietatea overflow. Dar, după cum puteți vedea în aceste exemple , nu funcționează în mod credibil în toate browserele încă.
Iată cum ați porni să derulați tot timpul cu proprietatea de overflow:
style = "overflow: scroll;"
Aceasta este o iframe.
Nu există nicio modalitate de a dezactiva complet derularea cu proprietatea de depășire.
Mulți designeri dorește ca iframe-urile lor să se amestece cu fundalul paginii pe care se află, astfel încât cititorii să nu știe că iframele sunt chiar acolo. Dar puteți adăuga, de asemenea, stiluri pentru a le face să iasă în evidență. Ajustarea frontierelor astfel încât iframe-ul să apară mai ușor este ușor. Doar utilizați proprietatea stilului de frontieră (sau proprietățile de la frontieră, frontieră-dreapta, frontieră-stânga și partea de jos a frontierei) pentru a modela marginile:
iframe {
frontală superioară: # c00 1px punctată;
frontieră-dreapta: # c00 2px punctată;
marginea stângă: # c00 2px punctată;
frontală de fundal: # c00 4px punctată;
}
Dar nu trebuie să vă opriți cu derularea și granițele pentru stilurile dvs. Puteți aplica o mulțime de alte stiluri CSS pe iframe-ul dvs. Acest exemplu folosește stilurile CSS3 pentru a da iframe-ului o umbră, colțuri rotunjite și a rotit-o cu 20 de grade.
iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
raza de graniță: 12 pixeli;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-transformare: roti (20deg);
-webkit-transform: rotate (20deg);
o- transformata: rotate (20deg);
-MS-transformare: roti (20deg);
Filtru: progid: DXImageTransform.Microsoft.BasicImage (rotatie = .2);
}
Stylingul conținutului iframe
Modelarea conținutului unui iframe este la fel ca și orice altă pagină web. Dar trebuie să aveți acces la editarea paginii . Dacă nu puteți edita pagina (de exemplu, este pe un alt site).
Dacă puteți edita pagina, puteți adăuga o foaie de stil externă sau stiluri chiar în document, exact așa cum ați stil orice altă pagină web de pe site-ul dvs.