Cara Membuat Efek CSS Kartu Berputar : Hidden Informasi (Informasi Tersembunyi)

Satria Perwira    12/04/2012    Trixs Blogging   

Cara Membuat Efek CSS Kartu Berputar : Hidden Informasi (Informasi Tersembunyi)

Rafi Orilya,-Kali ini saya akan berbagi CSS dari temen mengenai Efek CSS Kartu Berputar dan memiliki informasi tersembunyu di balik kartu itu... memang saat awal saya bingung buat title post kali ini tapi yaa seperti itulah, pokoknya. Hehehe...

DEMO => KLIK DISINI

Berikut langkah-langkahnya :

1. Masuk Blogger
2. Masuk pada Template => Edit HTML => Centang “Expand Template Widget”
3. Cari kode ]]></b:skin>, gunakan F5 agat lebih cepat
4. Copy code CSS dibawah ini :

<style type="text/css"> #container {position: relative; height:362px; width: 282px; margin: 0 auto; -webkit-perspective: 800px; -moz-perspective: 800px; } #container div {position:absolute; left:0; top:0; width:242px; height: 322px; padding:20px; background:#463; -ms-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-transition: 1.5s ease-in-out; -moz-transition: 1.5s ease-in-out; -ms-transition: 1.5s ease-in-out; -o-transition: 1.5s ease-in-out; transition: 1.5s ease-in-out; } #container div.lower {font-family: verdana, arial, sans-serif; background:#642; background: -moz-linear-gradient(-45deg, #642, #864 50%, #642 100%); background: -webkit-gradient(linear, 0 0, 100% 100%, from(#642), color-stop(50%, #a86), color-stop(100%, #642)); -moz-transform-style: preserve-3d; -moz-backface-visibility: hidden; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); } #container div.lower h1 {font-size:20px; padding:0; margin:0; color:#fff; line-height:40px;} #container div.lower p {font-size:11px; padding:0; margin:0; color:#eee; line-height:20px;} #container div.lower a {color:#ff0;} #container div.upper { -moz-transform-style: preserve-3d; -moz-backface-visibility: hidden; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; background: -moz-linear-gradient(-45deg, #463, #8a7 50%, #463 100%); background: -webkit-gradient(linear, 0 0, 100% 100%, from(#463), color-stop(50%, #8a7), color-stop(100%, #463)); } #container div.upper img {border:1px solid #fff;} #container:hover div.lower { -moz-transform: rotateY(0); -webkit-transform: rotateY(0); } #container:hover div.upper { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } </style>

5. Pastekan diatas kode ]]></b:skin>, tadi
6. Save template
7. Masuk ke Tata Letak => Tambah Gadget => HTML/Javasript
8. Copy paste kode script dibawah kedalamnya :

<div id="info">
<div id="container">
<div class="lower">
<h1>CSS Kartu Berputar Dengan Mudah : ROG</h1>
<p>Efek CSS ini semoga bermanfaat bagi sobat pengunjung Rafi Orilya Groups yang telah setia mengunjungi blog kami hehe... tetep berkunjung yaah Rafi Orilya : http://rafi-orilya.blogspot.com</p></div>
<div class="upper">
<img src="URLgambarKamu.jpg" alt="rafi-orilya.blogspot.com" />
</div>
</div>
</div> <!-- end  -->

9. Save

Keteranngan :
- Pada Tulisan “ Efek CSS ini semoga.................” dapat diganti dengan tulisan sobat
- Pada <img src=”URLgambarkamu.jpg” alt=”rafi-orilya.blogspot.com”> Ubah URL dengan URL gambar sobat

Terima kasih semoga bermandaat, dan jangan lupa tempelin komentarnya yaah..
hehehe.. .:D
byee...

Artikel Dilindungi
Sertakan alamat blog ini jika mengcopy paste
Hak Cipta Dilindungi

Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyah Asikin