Brzina - pouzdanost - kvalitet

I FRAME - okvir sa prikazom druge web strane



English

 

Nazad

IFRAME predstavlja RAM (FRAME) koji daje prikaz određene web strane. Primeri u nastavku daju praktičnu primenu IFRAME odnosno kroz definisanje dve klase "mobil-frame-portrait" i "mobil-frame-landscape", njihovo stilizovanje (širine, visine, bordure itd) a potom pozivanje tih klasa za dva IFRAME-a, omogućavate da se neka web strana (src="http://www.ime-domena.rs") prikaže i renderuje samo kroz IFRAME (simulacija mobilne verzije). Stilizovanjem ova dva IFRAME kroz klase predstavlja u stvari kombinaciju bordure crne boje i debljine 20 px, s tim što je jedna bordura na primer 80 px, dok je druga 60 px i bordure imaju radijus zaobljenja 40px - čime se daje sličnost mobilnim ili tablet uređajima. Naravno, preko stilova za širinu i visinu definišete dimenzije uređaja - u pixelima ili milimetrima.

Head


<style type="text/css">
.mobil-frame-portrait {             /* OVO JE DIV TAG SA RAZLIČITIM DIMENZIJAMA BORDURA I ZAOBLJENJIMA */
	width: 80mm;                    /* širina div taga od ivice do ivice */
	height: 121.5mm;                /* visina div taga od ivice do ivice */    
	border: solid 20px #000;        /* osnovna bordura oko divtaga - širna mobil uređaja */
	box-shadow: 0 0 0 3pt #999;     /* Preko stila box-shadows senka ima formu linije odnosno efekat bordure od bordure */
	border-radius: 40px;            /* zaobljenje div taga */   
	-webkit-border-radius: 40px;    /* zaobljenje div taga */
	-moz-border-radius: 40px;       /* zaobljenje div taga */
	-o-border-radius: 40px;         /* zaobljenje div taga */ 
	-ms-border-radius: 40px;        /* zaobljenje div taga */
	border-bottom: solid 80px #000; /* donja bordura */
	border-top: solid 60px #000;    /* gornja bordura */ 
	margin-right: 15px;               
}

.mobil-frame-landscape {            /* OVO JE DIV TAG SA RAZLIČITIM DIMENZIJAMA BORDURA I ZAOBLJENJIMA */
	width: 121.5mm;                 /* širina div taga od ivice do ivice */
	height: 80mm;                   /* visina div taga od ivice do ivice */
	border: solid 20px #000;        /* osnovna bordura oko divtaga - širna mobil uređaja */ 
	box-shadow: 0 0 0 3pt #999;     /* Preko stila box-shadows senka ima formu linije odnosno efekat bordure od bordure */
	border-radius: 40px;            /* zaobljenje div taga */   
	-webkit-border-radius: 40px;    /* zaobljenje div taga */
	-moz-border-radius: 40px;       /* zaobljenje div taga */
	-o-border-radius: 40px;         /* zaobljenje div taga */ 
	-ms-border-radius: 40px;        /* zaobljenje div taga */
	border-bottom: solid 20px #000; /* donja bordura */
	border-top: solid 20px #000;    /* gornja bordura */
	border-left: solid 60px #000;   /* leva bordura */  
	border-right: solid 80px #000;  /* desna bordura */ 
}
</style>

Body


<iframe class="mobil-frame-portrait" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>
<iframe class="mobil-frame-landscape" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>

Prikaz u Browser-u