◄ Min  Size Fonts: + | - | ± Color: Max ►

Amazing Creations of Input Type Checkbox

Sebenarnya banyak bahan buat postingan, tapi mencari yang unik dan aneh satu kendalanya. Koben mau berbagi trick tutorial seputar variabel input. Seperti yg kita ketahui sekarang, properti input dirangkai dengan property label dapat membuat karya yg luar binasa. Berikut beberapa link posted dengan kreasi menggunakan property input type checkbox Masih banyak c, cari ajah dech yach cendili :"> Berawal dari melihat animated check inputs cssdeck.com/labs/full/animated-check-inputs Satu tipe kreasi cek bok unik banget! Langsung saja bro coba di klik-klik...DEMOTerlihat sederhana namun kodenya lumayan bejibun :d
#check1[type="checkbox"] {
display: none;
}
#loadcheck1 {
display: block;
margin: 5px auto;
}
.loadcheck {
width: 165px;
height: 40px;
font-size: 35px;
}
.loadcheck span {
float: left;
cursor: pointer;
}
.load {
display: block;
width: 7px;
height: 7px;
margin: 20px 5px;
border-radius: 10px;
transition: .5s;
}
.load:nth-child(2) {
background: #e91639;
}
.load:nth-child(3) {
background: rgba(233, 22, 57, .7);
}
.load:nth-child(4) {
background: rgba(233, 22, 57, .5);
}
.load:nth-child(5) {
background: rgba(233, 22, 57, .3);
}
.load:nth-child(6) {
background: rgba(233, 22, 57, .1);
}
span[class*="cancel"] {
font-size: 40px;
color: #e91639;
transition: .5s;
transition-delay: .1s;
}
span[class*="check"] {
color: rgba(0, 0, 0, .1);
transition: .5s;
transition-delay: .1s;
}
#check1:checked + .loadcheck .entypo-check {
color: #13a03b;
}
#check1:checked + .loadcheck .entypo-cancel {
color: rgba(0, 0, 0, .1);
}
#check1:checked + .loadcheck .load:nth-child(2) {
background: rgba(19, 160, 59, .1);
}
#check1:checked + .loadcheck .load:nth-child(3) {
background: rgba(19, 160, 59, .3);
}
#check1:checked + .loadcheck .load:nth-child(4) {
background: rgba(19, 160, 59, .5);
}
#check1:checked + .loadcheck .load:nth-child(5) {
background: rgba(19, 160, 59, .7);
}
#check1:checked + .loadcheck .load:nth-child(6) {
background: #13a03b;
}
Markup HTML<input type="checkbox" id="check1" checked="" />
<label for="check1" class="loadcheck" id="loadcheck1">
<span class="entypo-cancel">&#10008;</span>
<span class="load"></span>
<span class="load"></span>
<span class="load"></span>
<span class="load"></span>
<span class="load"></span>
<span class="entypo-check">&#10004;</span>
</label>
Edit kode sesuai dengan kebutuhan, terutama margin, height & width. Sekarang mari kita tambahkan sedikit variasi agar full stylish ;) Sekali lagi coba di klik²
DEMO
#check[type="checkbox"] {
display: none;
}
#loadcheck {
position: absolute;
left: 0;
right: 0;
margin: 25px auto;
cursor: pointer;
}
.loadcheck {
width: 165px;
height: 40px;
font-size: 35px;
}
.loadcheck span {
float: left;
}
.load {
display: block;
width: 7px;
height: 7px;
margin: 20px 5px;
border-radius: 10px;
transition: .5s;
cursor: pointer;
}
.load:nth-child(2) {
background: #db1536;
}
.load:nth-child(3) {
background: rgba(219, 21, 54, .7);
}
.load:nth-child(4) {
background: rgba(219, 21, 54, .5);
}
.load:nth-child(5) {
background: rgba(219, 21, 54, .3);
}
.load:nth-child(6) {
background: rgba(219, 21, 54, .1);
}
span[class*="cancel"] {
font-size: 40px;
color: #db1536;
transition: .5s;
transition-delay: .1s;
}
span[class*="check"] {
color: rgba(0, 0, 0, .1);
transition: .5s;
transition-delay: .1s;
}
#check:checked + .loadcheck .entypo-check {
color: #58d37b;
}
#check:checked + .loadcheck .entypo-cancel {
color: rgba(0, 0, 0, .1);
}
#check:checked + .loadcheck .load:nth-child(2) {
background: rgba(88, 211, 123, .1);
}
#check:checked + .loadcheck .load:nth-child(3) {
background: rgba(88, 211, 123, .3);
}
#check:checked + .loadcheck .load:nth-child(4) {
background: rgba(88, 211, 123, .5);
}
#check:checked + .loadcheck .load:nth-child(5) {
background: rgba(88, 211, 123, .7);
}
#check:checked + .loadcheck .load:nth-child(6) {
background: #58d37b;
}
.buka {
text-align: center;
letter-spacing: 1px;
color: #fff;
opacity: 0;
-webkit-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.buka a {
color: #00ccff;
text-decoration: none;
}
#check:checked ~ .buka {
opacity: 1;
letter-spacing: 2px;
}
Planning HTML<input type="checkbox" id="check" />
<label for="check" class="loadcheck" id="loadcheck">
<span class="entypo-cancel">&#10008;</span>
<span class="load"></span>
<span class="load"></span>
<span class="load"></span>
<span class="load"></span>
<span class="load"></span>
<span class="entypo-check">&#10004;</span>
</label>
<div class="buka">Follow me on <a href="http://twitter.com/bebenkoben">twitter</a></div>
Lakukan pengeditan sesuai dengan keperluan masing² Semoga bermanfaat dan menjadi blogger professional :)
Bonus:
www.bchanx.com/logos-in-pure-css-demo
ghinda.net/css-toggle-switch/bootstrap.html
alexpeattie.com/projects/windowed
Happy coding \m/
Loading...
XAmazing Creations of Input Type Checkbox
Kreasi input type checkbox CSS3 bisa menjadi apa saja!
Subscribe my posts Register For Free!

2 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE