Hello sob...
Postingan kali ini lagi-lagi mengenai CSS... Kali ini yang mau saya share adalah mengenai smiley slider.
Penasaran lihat tampilannya??? Coba lihat demo nya dibawah :
Bagaimana sob??? Menarik bukan, bahwa dengan kode-kode tertentu dapat membuat sebuah tampilan smiley yang tadinya statis dengan raut wajah tertentu dapat menampilkan raut-raut wajah lainnya, berupa raut sedih dan tersenyum...
#face {
width: 100px;
height: 100px;
position: relative;
border: 2px solid black;
border-radius: 50px;
margin: 20px auto;
}
#face:before, #face:after {
position: absolute;
content: "";
width: 10px;
height: 10px;
top: 30px;
border-radius: 10px;
background: black;
}
#face:before {
left: 30px;
}
#face:after {
left: 60px;
}
#mouth-box {
width: 60px;
height: 20px;
left: 20px;
top: 60px;
overflow: hidden;
background: white;
position: relative;
}
#mouth {
width: 60px;
height: 60px;
border-radius: 30px;
border: 2px solid black;
position: absolute;
top: 0;
left: 0;
}
#mouth.straight {
height: 0px !important;
top: 7px !important;
border-width: 1px;
bottom: auto !important;
}var newWidth,
mouth = $("#mouth");
$( "#slider" ).slider({
slide: function(event, ui) {
if (ui.value > 51 ) {
mouth.css({ bottom: 0, top: "auto" });
newWidth = 160 - ui.value;
mouth.css({
width : newWidth,
height : newWidth,
"border-radius" : newWidth / 2,
left : -25 + ((ui.value-50) / 2)
})
.removeClass("straight");
} else if ((ui.value > 48) && (ui.value < 52)) {
mouth.addClass("straight");
} else {
mouth.css({ top: 0, bottom: "auto" });
newWidth = ui.value + 60;
mouth.css({
width : newWidth,
height : newWidth,
"border-radius" : newWidth / 2,
left : -ui.value / 2
})
.removeClass("straight");
}
},
value: 50
});
<div id="slider"></div>
<div id="face">
<div id="mouth-box">
<div id="mouth" class="straight"></div>
</div>
</div>
Ok, sekian postingan kali ini yah,,
Terima kasih dan semoga bermanfaat...
0 comments:
Post a Comment