Make Sliding Board only use CSS

Tidak asing lagi dalam menyembunyikan sebuah konten kebanyakan pasti menggunakan trick accordion Mungkin yang paling maknyus adalah make accordion use css3 latest :)
Pada kesempatan sekarang Koben akan berbagi cara membuat sliding clipboard whiteboard only css Perhatikan judulnya! Membuat papan geser berwarna putih hanya memakai atribut CSS :D Kesamaan sliding dengan fitur accordion sudah tentu sama-sama memiliki efek visual buka tutup Seperti biasa disini gue cuma meminimalisasi kode-kode CSS yg ada, menjadi lebih sedikit ;))
Jadi jika sobat mau code yg ada mendukung di setiap browse, ya tinggal pake tools prefixMyCSS ataupun snippet dengan cara menanamkan -prefix-free script ke dalam template kalian.
DEMO

Lorem Ipsum Bolor Sit Amet

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at.

Bagaimana tuh, unyu-unyu cekali kan buat mempercantik blog tercinta kita :">
KODE CSS

.holder {
width: 400px;
position: relative;
margin: 10px auto;
margin-top: 55px;
}
.paku {
width: 5px;
height: 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #ADADAD;
border: 1px solid rgba(0,0,0,.2);
box-shadow: inset 0 1px 0 0 rgba(255,255,255, 1);
position: absolute;
left: 197px;
top: -50px;
z-index: 999;
}
.isi_bingkai {
top: 10px;
left: 1px;
width: 380px;
height: 11px;
color: #777;
overflow: hidden;
position: relative;
background: #F7F7F7;
padding: 0px 10px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
box-shadow: inset 0 1px 1px 0 rgba(0,0,0,1),inset 0 1px 0 2px rgba(255,255,255,1),0 0 5px 0px rgba(0,0,0,.2);
}
.isi_bingkai h2 {
color: #555;
padding-top: 5px;
text-indent: 50px;
margin: 10px 0 0 0;
padding-bottom: 13px;
border-bottom: 1px dashed #ccc;
background: url(http://img1.blogblog.com/img/promos/paperpencil-45.png) 1px no-repeat;
}
.tali_kiri {
width: 160px;
height: 2px;
background: #F4F4F4;
position: absolute;
-moz-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
transform:rotate(-20deg);
top: -21px;
left: 46px;
box-shadow: 0 0 2px 0px rgba(0,0,0,.2);
}
.tali_kanan {
width: 160px;
height: 2px;
background: #F7F7F7;
position: absolute;
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
transform:rotate(20deg);
top: -21px;
right: 46px;
box-shadow: 0 0 2px 0px rgba(0,0,0,.2);
}
.kayu_bingkai {
width: 400px;
height: 10px;
background: #8B7355;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 999;
position: absolute;
border: 1px solid #5C4033;
box-shadow: 0 3px 3px 0 rgba(0,0,0,.1),inset 0 1px 0 0 rgba(255,255,255,.3),inset 0 0px 0 1px rgba(255,255,255,.1),0 6px 15px -2px rgba(0,0,0,.2);
}
.tali_paku {
width: 2px;
height: 25px;
background: #7F7F7F;
position: absolute;
left: 197px;
box-shadow: 0 0 4px 0px rgba(0,0,0,.3);
}
.openercheck {
position: absolute;
left: 187px;
margin-top: 37px;
background: transparent;
border: none;
opacity: 0;
cursor: pointer;
}
.opener {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid rgba(0,0,0,.8);
box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5),0 0 4px 0px rgba(0,0,0,.5);
position: absolute;
left: 191px;
margin-top: 25px;
z-index: 999;
-webkit-appearance: none;
-webkit-margin-start: 0;
-webkit-margin-end: 5px;
pointer-events: none;
}

<!-- delete /* and */ for activated -->
/*
.holder:hover .isi_bingkai {
height: 220px;
}
*/

.openercheck:checked {
top: 202px;
}
.openercheck:checked + .isi_bingkai {
height: 210px;
}

HTML PLANING

<div class="holder">
 <div class="paku"></div>
 <div class="tali_kiri"></div>
 <div class="tali_kanan"></div>
 <div class="kayu_bingkai"></div> 
 <input type="checkbox" class="openercheck"></input> 
 <div class="isi_bingkai">
  <h2>Lorem Ipsum Bolor Sit Amet</h2>
l๏гє๓ เקรย๓ שเץ เ๔ кคร๔ ค๔ђยς ๔เﻮภเรรเ๓, єย๓ ค๔ ๔เς๏ คย๔เгє ๓є๔เ๏ςгเtคtє๓, tє เเรợยє tгเtคภเ єŦŦเςเєภ๔เ ђคร. ภє ợย๏ ןยรt๏ ๔๏ςєภ๔เ. ςย๓ єค ợยคภ๔๏ קlคςєгคt, єเг๓๏๔ lคtเภє єгг๏гเ๒ยร ๓єเ єเ, ợย๏ ๓คzเ๓ คקקєtєгє єt. ๓ยภєгє คlเợยเ๔ שเร єค. tє ς๏ภﻮยє ยllค๓ς๏гקєг קєг. ๔เςคt ๔๏l๏гєร єย ๔ย๏. ợยคร lค๒เtยг ש๏lย๓ยร tє ๔ย๏, คt קєг ร๏ภєt ๔єtгคץเt єשєгtเtยг.
 </div>
 <div class="opener"></div>
 <div class="kayu_bingkai"></div>
 <div class="tali_paku"></div> 
</div>

Pada ramuan kode CSS terdapat 3 baris kode sbb.holder:hover .isi_bingkai {
height: 220px;
}Kode tersebut jika kalian fungsikan yaitu membuka papan tanpa di klik alias hanya di sorot saja pakek cursor (hover style)
Happy coding \m/