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...
|
|
kunjugan pagi zob...thank infonya!
ReplyDeletehttp://anrhy.blogspot.com
sama-sama sob...
Deletekalo ini diterapinnya dmn?
ReplyDeletehehe, ini hanya eksperimen saja gan, tapi bisa saja ditempatkan di sidebar, footer, dll...
DeleteSaya masih blm paham, ini maksudnya gimana yah?
ReplyDeletemaklum masih belajar
cuma eksperimen saja sis, ditempatin di blog juga bisa tapi rasanya kurang pas saja masih ada widget2 lain yang lebih tepat untuk digunakan di blog... ^_^
DeleteTerima kasih tutornya. Biar bikin smile:) salam
ReplyDeletesama-sama gan, terima kasih juga kunjungannya... :)
DeleteKeyen Alya, terus bereksperiment!
ReplyDeletehehe, kirain mau bilang teyus bereksperimen :D
Delete:-bd makasih ya mba...
pengen di kasi loading kaya blog ini.
ReplyDelete^_^ kan ada di postingan sebelumnya sis...
Deleteada alamat email nya gak? saya kirimin kode nya... :-bd
waw, keren mbak !! jadi pengen nyoba, terimakasih sudah berbagi !!
ReplyDeletesilahkan dicoba gan... ^_^
DeleteBlogwalking Sob , pleased cheer
ReplyDeleteok terima kasih gan...
Deletesy mau gan?
ReplyDeletelucu juga mbak, bisa seperti itu tp utk di blog sepertinya bingung mau dijadiin apa,hehe
ReplyDeletehappy
ReplyDelete