Grow your CSS skills. Land your dream job.

Last updated on:

Smiley Slider

Requires jQuery and jQuery UI for the actual slider. The face is made from elements made into circles with border-radius. The mouth, indicating happiness level, is another circle just cropped down to size with a parent element with hidden overflow.

<div id="slider"></div>

<div id="face">
	<div id="mouth-box">
		<div id="mouth" class="straight"></div>
	</div>
</div>
#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
});

Reference URL

Comments

  1. MechanisM
    Permalink to comment#

    ehhh so want it but don’t want to load big jquery-ui lib..

  2. Kenny
    Permalink to comment#

    Akismet remake potentially?

    Either way it is really cool, I was wondering how that could be achieved..

  3. Jörn
    Permalink to comment#

    demo is not working in current chrome 21

  4. Jason
    Permalink to comment#

    Updated with new version of Jquery UI and css (works in latest Chrome and Firefox).

  5. D
    Permalink to comment#

    Demo doesn’t work on iPad

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".