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

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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