Kamis, 07 Juli 2011

Show Hide Pure use CSS for Cbox

Entah sudah berapa postingan mengenai trick show/hide yang kebanyakan digunakan dalam urusan Cbox. Yup's benar sekali, yaitu menyembunyikan keberadaan sesuatu agar tidak tampak yang padahal ada keberadaannya (roaming language) Silahkan sobat cari dengan keyword show hide pada kotak search yg tersedia :) pasti buanyak deh trick²nya ;)
Masih berbicara mengenai tips muncul & sembunyi, kali ini Beben Koben si bloglang anu ganteng kalem tea akan mencoba berbagi hanya dengan menggunakan pure 100% CSS. Tertarik enggak nih :-" Demo...

Klik buat mengambil link!

Letakin seluruh ramuan CSS sebelum/diatas kode </b:skin> Ini bumbu²nya :P

Kode CSS

#sidebar {
top: 50px;
z-index: 3000;
position: fixed;
right: -385px;
-webkit-transition:all 0.4s ease-out;
-moz-transition:all 0.4s ease-out;
-o-transition:all 0.4s ease-out;
transition:all 0.4s ease-out;
}
#sidebar .benDiv {
margin:0px;
padding: 15px;
color: #fff;
font-weight: bold;
padding-right: 95px;
background-color: #5566FF;
border-radius: 15px;
-moz-border-radius: 15px;
text-shadow: 1px 2px #000;
box-shadow: 0 0 20px #000;
-moz-box-shadow: 0 0 20px #000;
-webkit-box-shadow: 0 0 20px #000;
}
#sidebar .beDiv {
float: right;
height: auto;
width: 285px;
padding-left: 15px;
}
#sidebar:hover {
right: -80px;
}

Kode HTML

<div id="sidebar">
<a href="#" title="open here">
<div class="benDiv">
O<br />P<br />E<br />N
<div class="beDiv">

YOUR CONTENT (CBOX) HERE'S

</div>
</div>
</a>

</div>
Jika sobat kepengen memakai image/gambar, tinggal hapus lalu ganti deh yg bertuliskan O<br />P<br />E<br />N Kode HTML bisa dimasukan via Add a Gadget ► HTML/Javascript tapi bisa juga didalam tag <body> ... </body> template ;)
Semoga bermanfaat :)
Happy blogging \m/

Tidak ada komentar:

Posting Komentar