CSS Spoiler - Fathur Blogz
Headlines News :
Home » , » CSS Spoiler

CSS Spoiler

Written By Unknown on Kamis, 28 Juni 2012 | 02.21


HTML

<input type="checkbox" class="trigger"/> Buka/Tutup Spoiler
<div class="spoiler">
Konten di sini...
</div>

CSS

input.trigger {
display:inline-block;
margin:0px;
padding:0px;
}


.spoiler {
background-color:white;
padding:15px 30px;
margin:10px 0px 0px;
display:none;
}


input.trigger:checked + .spoiler,
input.trigger:checked + br + .spoiler {
display:block;
}


Dengan CSS3 Transisi

input.trigger {
display:inline-block;
margin:0px;
padding:0px;
}


.spoiler {
overflow:hidden;
background-color:white;
margin:10px 0px 0px;
padding:0px 30px;
height:0px;
visibility:hidden;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}


input.trigger:checked + .spoiler,
input.trigger:checked + br + .spoiler {
padding:15px 30px;
visibility:visible;
height:300px;
overflow:auto;
}

Share this article :

0 komentar:

Speak up your mind

Tell us what you're thinking... !

Translate

Adversite

 
Support : Copyright © 2013. Fathur Blogz All Rights Reserved.
Template Designed by FaHen and Heina Website. Publish on Template Blogger