Some Trick CSS from Selection Web

Dalam menyembunyikan sesuatu di area template mungkin teknik yang terkenal yakni memakai trick show/hide dan spoiler. Walau banyak juga sebenarnya ragam trik sembunyi² itu. Paling enak menggunakan plugin jQuery ;)) Koben saja tidak tahu ada berapa biji fitur hilang/muncul tertanam pada blog ini Example

Sekarang waktunya menggunakan variabel CSS dalam membuat hide-show technique in the content. Pasti sebagian sobat pernah ada yg melihat bagaimana hasil akhir penggunaan CSS dalam menghilangkan suatu objek :) Sebelum masuk ke acara bumbu, postingan kali ini akan mengajak sobat lebih dalam mengenal beberapa macam teknik CSS V.2 dan bbrp kreasi tutorial pilihan CSS3! Apalagi kalo bukan bagi² link resource for u :p DEMO...

Click Me!

Munere aliquid vis ea. Te congue ullamcorper per.

.clickable label {
    cursor: pointer;
    border-bottom: 1px solid #000;
    font-family: Arial, sans-serif;
}
.clickable .appear { 
    display: none;
    background-color: #000;
    color: #fff;
    padding: 10px;
}
.clickable input {
    display: none;
}
.clickable input:checked ~ .appear {
    display: block;
}

Markup HTML<div class="clickable">
<label for="UNIK-ID">Click Here!</label>
<br />
<input type="checkbox" id="UNIK-ID"/>
<div class="appear">KONTEN YANG DISEMBUNYIKAN IN THE PRET!!!</div>
</div>

Att:
UNIK-ID >>> Harus berbeda bila kalian mau memakai lebih dari satu konten yg akan disembunyiin!

Click Here!

Quas labitur volumus te duo, at per sonet detraxit evertitur.

Selesai deh, lihat hasil kerja :)
Read it:
http://www.seizedesign.com/tutorials/important-css-tutorials-for-the-designers/
http://www.tutoriallounge.com/2012/04/valuable-css3-tutorials-for-the-creative-designers/
http://inserthtml.com/codex/css-guide-welcome/
http://www.brunildo.org/test/
Happy CSS \m/