CARA MEMBUAT EFEK ZOOM PADA GAMBAR
KODE PASTE KODE DIBAWAH INI YANG TELAH DIBUAT PARA BLOGGER SEJATI DI INDONESIA.
<center>
<style>
#iphone{
width:550px;
height:293px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQpExhxO0BVNHd_NKN3W2yPT7BLEjyuxFe1UH3n4mxB1pL7nYa0VPbF6qncfX7zg5aC8cgyaMxsqv5QJXIrpwZQLthJJAKxKT24EJUnTe9eGx8YIt4IoHJV8cU-f-0ACuJNTNqRgLh_s4N/s1600/Background_website.jpg') no-repeat center center;
position:relative;
}
#webpage{
width:365px;
height:207px;
position:absolute;
top:63%;
left:62%;
margin:-141px 0 0 -249px;
}
#retina{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHA5OFHp9ll9gL9CSR2VSuxAtJ4iIGAemUek21jwgI6MM0Dbe_qI2nnlE-4ksYFKUTe62r4cHZ4am-lnlrsqukRHU1rC2QqhkJRAhwu7xhpZwXGZiDICDObPPgrOgOFV1THJR9_RrBXfRN/s1600/DAVID+VS+GOLIATH.jpg') no-repeat center center white;
border:2px solid white;
position:absolute;
height:180px;
width:180px;
display:none;
-moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-webkit-box-shadow:0 0 5px #777;
box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-moz-border-radius:90px;
-webkit-border-radius:90px;
border-radius:90px;
}
</style>
<div id="iphone">
<div id="webpage">
<img alt="Web Page" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHA5OFHp9ll9gL9CSR2VSuxAtJ4iIGAemUek21jwgI6MM0Dbe_qI2nnlE-4ksYFKUTe62r4cHZ4am-lnlrsqukRHU1rC2QqhkJRAhwu7xhpZwXGZiDICDObPPgrOgOFV1THJR9_RrBXfRN/s1600/DAVID+VS+GOLIATH.jpg" height="207" width="365" />
<div id="retina">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/script.js" type="text/javascript"></script></center>
Keterangan -
1. Teks Biru adalah Gambar 1 (Gambar Lensa Flip)
2. Teks Merah adalah Gambar 2 (Gambar Utama)
3. Teks hijau adalah Url gambar Background
4. Silahkan Ganti dengan URL gambar anda dengan URL gambar yang sama
5. Selamat Mencoba Membuat Efek Lensa Flip 3D Pada Gambar, semoga bermanfaat
6. Terima Kasih
<style>
#iphone{
width:550px;
height:293px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQpExhxO0BVNHd_NKN3W2yPT7BLEjyuxFe1UH3n4mxB1pL7nYa0VPbF6qncfX7zg5aC8cgyaMxsqv5QJXIrpwZQLthJJAKxKT24EJUnTe9eGx8YIt4IoHJV8cU-f-0ACuJNTNqRgLh_s4N/s1600/Background_website.jpg') no-repeat center center;
position:relative;
}
#webpage{
width:365px;
height:207px;
position:absolute;
top:63%;
left:62%;
margin:-141px 0 0 -249px;
}
#retina{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHA5OFHp9ll9gL9CSR2VSuxAtJ4iIGAemUek21jwgI6MM0Dbe_qI2nnlE-4ksYFKUTe62r4cHZ4am-lnlrsqukRHU1rC2QqhkJRAhwu7xhpZwXGZiDICDObPPgrOgOFV1THJR9_RrBXfRN/s1600/DAVID+VS+GOLIATH.jpg') no-repeat center center white;
border:2px solid white;
position:absolute;
height:180px;
width:180px;
display:none;
-moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-webkit-box-shadow:0 0 5px #777;
box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-moz-border-radius:90px;
-webkit-border-radius:90px;
border-radius:90px;
}
</style>
<div id="iphone">
<div id="webpage">
<img alt="Web Page" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHA5OFHp9ll9gL9CSR2VSuxAtJ4iIGAemUek21jwgI6MM0Dbe_qI2nnlE-4ksYFKUTe62r4cHZ4am-lnlrsqukRHU1rC2QqhkJRAhwu7xhpZwXGZiDICDObPPgrOgOFV1THJR9_RrBXfRN/s1600/DAVID+VS+GOLIATH.jpg" height="207" width="365" />
<div id="retina">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/script.js" type="text/javascript"></script></center>
Keterangan -
1. Teks Biru adalah Gambar 1 (Gambar Lensa Flip)
2. Teks Merah adalah Gambar 2 (Gambar Utama)
3. Teks hijau adalah Url gambar Background
4. Silahkan Ganti dengan URL gambar anda dengan URL gambar yang sama
5. Selamat Mencoba Membuat Efek Lensa Flip 3D Pada Gambar, semoga bermanfaat
6. Terima Kasih
Tidak ada komentar:
Posting Komentar
Terima kasih telah berkunjung ke blog sederhana ini,silahkan berkomentar dengan sopan