Verstin wéi d'IFrames am Webdesign schaffen
Wann Dir e Element an Ärem HTML implizéiert hutt , hutt Dir zwee Méiglechkeeten fir CSS Styles ze addéieren:
- Dir kënnt d'IFRAME selwer benotzen.
- Dir kënnt d'Säit am IFRAME (ënner bestëmmte Conditioune) änneren.
Benotzt CSS fir den IFRAME Element ze stiléieren
Déi éischt Saach, déi Dir berücksichtegt, wann Dir Äert Asaz ass, ass d'IFRAME selwer. Déi meescht Browseren gehéieren iwerraschend ouni vill extra Stile, et ass ëmmer eng gutt Iddi fir Stiler ze addelen fir hinnen konsequent ze halen.
Hei sinn e puer CSS-Styles, déi ech ëmmer op meng Iframes schloen:
- Spillraum: 0;
- Ufëllen: 0;
- Grenz: Keen;
- Breet: Wäert ;
- Héicht: Wäert ;
Mat der Breet an der Héicht festgeluecht op d'Gréisst, déi an mengem Dokument passt. Hei sinn Beispiller fir ee Frame mat keng Stiler an ee mat just de Basics. Wéi Dir gesitt, sinn dës Stiler meeschtens just d'Grenz ëm d'Iframe erofgerappt, awer si garantéieren och datt all Browser d'Iframe mat der selweschter Rand, Padding an Dimensioune weisen.
HTML5 recommandéiert datt Dir d'Iwwersträite benotzt fir d'Scrollbalken ze bidden, awer dat ass net zouverlässeg. Also wann Dir d'Scrollbalken erofhuelen oder änneren wëllt, musst Dir d'Rollroll Attribut op Ärem Iframe benotzen. Fir d'Opmaache vum Scrolling ze benotzen, addéiere se et wéi all aner Attribut a wielt dann eng vun dräi Wäerter: Jo, Nee, oder Auto. Jo seet den Browser fir ëmmer Scrollbalken ze halen, och wa se net gebraucht ginn. Kee seet, datt sämtlech Scrollbarren, wann néideg oder net.
Auto ass den Default an ennert d'Scrollbarren, wann se gebraucht ginn an huet se ofgeschaaft wann se net sinn.
Hei ass wéi Dir de Scrolling mat dem scrolling Attribut gëtt:
scrolling = "nee" >
Dëst ass en Iframe.
Fir Ännere vu HTML5 ze scrollen, sollt Dir d'Iwwersträite behalen. Mee wéi Dir se fannt an dësen Beispiller ass et net an all Browseren zeverlässeg.
Hei ass wéi Dir d'ganzt Zäit mat der Iwwerflussméiglechkeet scrollen:
style = "overflow: scroll;" >
Dat ass en Iframe.
Et gëtt kee Wee fir de Scrollen komplett mat der Iwwerfläch Immobilie ze maachen.
Vill Designer wënschen hir Ingredientse mat dem Hannergrond vun der Säit, déi se hunn, vermëschen, sou datt Lieser net wëssen, datt d'Iframes souguer do sinn. Mee Dir kënnt och Stiler weise fir se erauszehalen. Astellunge fir d'Grenzen, sou datt d'ITMram méi liicht ass ze gesinn ass einfach. Benotz just d'Grenzstylebaus (oder et ass ëm d'Grenzgéigend, Grenz-Recht, Grenz-lénks, a Grenzbaacheneigenschaften) benotzt fir d'Grenzen ze modelléieren:
iframe {
Grenz Top: # c00 1px Punkt;
border-right: # c00 2px Punkt;
Grenz-lénks: # c00 2px gepasst;
border border: # c00 4px Punkt;
}}
Mee Dir sollt net ophalen mat Scrollen an Grenzen fir Är Stile. Dir kënnt vill aner CSS Stiwwelen op Är Iframe benotzen. Dëst Beispill benotzt CSS3 Stiler, fir den Iframe e Schatt, ronnen Ecken ze ginn a rotéiert et 20 Grad.
iframe {
Randspëtzt: 20px;
Margin-Bottom: 30px;
-moz-Grenz-Radius: 12px;
-webkit-border-radius: 12px;
Grenzkrees: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
Këscht Schatten: 4px 4px 14px # 000;
-moz-transform: rotéieren (20deg);
-webkit-transform: rotéieren (20deg);
-o-transform: rotéieren (20deg);
-ms-transform: rotéieren (20deg);
Filter: Progid: DXImageTransform.Microsoft.BasicImage (Rotatioun = .2);
}}
Styling de Iframe Inhalt
D'Inhalter vun engem Iframe ass wéi just eng aner Websäit ze kreéieren. Mee, Dir musst Zougang zur Säit änneren . Wann Dir d'Säit net verännert (z. B. ass et op engem aneren Site).
Wann Dir d'Säit ännere kënnt, da kënnt Dir och e externen Stylstick oder Stil ofhaalen am Dokument just wéi Dir Är aner Websäit op Ärer Säit stäipen.