May 8, 2013

CSS Smiley Slider

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...

19 comments

  1. kunjugan pagi zob...thank infonya!
    http://anrhy.blogspot.com

    ReplyDelete
  2. kalo ini diterapinnya dmn?

    ReplyDelete
    Replies
    1. hehe, ini hanya eksperimen saja gan, tapi bisa saja ditempatkan di sidebar, footer, dll...

      Delete
  3. Saya masih blm paham, ini maksudnya gimana yah?
    maklum masih belajar

    ReplyDelete
    Replies
    1. 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... ^_^

      Delete
  4. Terima kasih tutornya. Biar bikin smile:) salam

    ReplyDelete
    Replies
    1. sama-sama gan, terima kasih juga kunjungannya... :)

      Delete
  5. Keyen Alya, terus bereksperiment!

    ReplyDelete
    Replies
    1. hehe, kirain mau bilang teyus bereksperimen :D
      :-bd makasih ya mba...

      Delete
  6. pengen di kasi loading kaya blog ini.

    ReplyDelete
    Replies
    1. ^_^ kan ada di postingan sebelumnya sis...
      ada alamat email nya gak? saya kirimin kode nya... :-bd

      Delete
  7. waw, keren mbak !! jadi pengen nyoba, terimakasih sudah berbagi !!

    ReplyDelete
  8. Blogwalking Sob , pleased cheer

    ReplyDelete
  9. lucu juga mbak, bisa seperti itu tp utk di blog sepertinya bingung mau dijadiin apa,hehe

    ReplyDelete