Update Tutorial By Dynamicdrive

Dua jenis tutorial telah update dari web terkenal dynamicdrive Berbicara mengenai 3D Depressible Button dan Pure CSS3 Push Down Panel. Melihat hasil jadi dari 3D Depressible Button mungkin mirip dengan versi Make The Funky Button with CSS 3 cuma berbeda efek ketika tombol ditekan (:active) Disana ditambahkan attribute -box-shadow saat di pencet tombolnya ;)
Koben postingkan saja tutorial yang satunya dimana kinerja hasil akhir mirip dengan cara membuat spoiler. Sekarang full 100% memakai attribute CSS 3.

Demo Pure CSS3 Push Down Panel

.css3droppanel {
position: relative;
margin: 0;
margin-bottom: 1em;
}
.css3droppanel > div {
height: 10px;
padding: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
background: #f5f5f5;
position: relative;
opacity: 0;
-moz-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
-webkit-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
}
.css3droppanel:after {
content: '';
display: block;
bottom: 0;
position: absolute;
width: 100%;
height: 3px;
box-shadow: 0 1px 3px #555;
background: #fff;
}
.css3droppanel input[type="checkbox"] {
position: absolute;
right: 50px;
width: 60px;
height: 42px;
z-index: 10;
cursor: pointer;
opacity: 0;
}
.css3droppanel input[type="checkbox"]:checked ~ div {
height: 250px;
opacity: 1;
overflow: auto;
}
.css3droppanel label {
position: absolute;
right: 0;
width: 60px;
height: 42px;
bottom: -39px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
cursor: pointer;
z-index: 5;
background: #211E48;
box-shadow: 0 2px 3px #555;
}
.css3droppanel label:after {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
border: 12px solid transparent;
border-color: #fff transparent transparent transparent;
top: 16px;
left: 18px;
}

Klik panel tersebut untuk melihat & mengambil kode CSS-nya ;) Berikut mark up HTML

<div class="css3droppanel">
<input type="checkbox" id="UNIQUE-ID" />
<label for="UNIQUE-ID" title="Click to open Panel"></label>
<div>
-------------------------- YOUR-CONTENT-HERE --------------------------
</div>
</div>

Perhatikan tulisan UNIQUE-ID Itu harus berbeda jika sobat akan memakai lebih dari satu panel ini!!! Isikan terserah dengan apapun Ex: brat, bret, or brot. Jika sama, maka ketika di klik yg terbuka akan satu saja :D
Happy coding \m/

Resource by: Dynamic Drive CSS Library