Creating smiley and adding expression

Question

Here I created three smileys using CSS.

Fiddle - Demo

Should express Happy(this is there): <div id="smiley1">☻ </div>
Should express sad :<div id="smiley2">☻ </div> ?? 
Should express neutral<div id="smiley3">☻</div> ??

Issues:

1. All of them should be placed one after another (currently overlapping)
2. How to make it to express sad and neutral?

CSS:

#smiley1 {
    -webkit-border-radius:50px;
    background-color:rgba(0, 0, 0, 0);
    color: red;
    width:350px;
    position: absolute;
    text-align: center;
    font-size: 20pt;
    z-index: 9999;
}

#smiley2 {
    -webkit-border-radius:50px;
    background-color:rgba(0, 0, 0, 0);
    color: blue;
    width:350px;
    position: absolute;
    text-align: center;
    font-size: 20pt;
    z-index: 9999;
}
#smiley3 {
    -webkit-border-radius:50px;
    background-color:rgba(0, 0, 0, 0);
    color: green;
    width:350px;
    position: absolute;
    text-align: center;
    font-size: 20pt;
    z-index: 9999;
}

Answer 1

As has already been pointed out, you cannot change the moods of the fonts with CSS and instead have to use other methods to create the smileys.

The method provided in Mr. Alien's answer is the best if you want to create really expressive smileys. But if that is not mandatory and you are fine with smileys as expressive as those in the question then you could use the below snippet.

In this method, we use:

• A div converted into a circle (using border-radius) as the face. You can change the background-color to the change the face color.
• Keyboard characters added to pseudo-elements, transformed and positioned using CSS to produce the required moods. The font used is Arial which is very safe to use across platforms. The characters used are pretty much the ones that are regularly used for each smiley in chat (like :-) for smile, :-( for sad and :-| for indifferent/neutral etc)

.smiley > div {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 45px;
  margin: 22.5px;
  text-align: center;
  line-height: 45px;
  border: 2px solid #999;
  border-radius: 100%;
}

:before,
:after {
  left: 0px;
  top: -2px;
  height: 100%;
  width: 100%;
  position: absolute;
  font-weight: bolder;
  transform-origin: bottm left;
  border: 2px solid transparent;
}

.smile:after {
  content: ":-)";
  transform: rotate(90deg);
}

.sad:after {
  content: ":-(";
  transform: rotate(90deg);
}

.cry:after {
  content: "'";
  margin-left: 8px;
  margin-top: 5px;
}

.cry:before {
  content: ": (";
  transform: rotate(90deg);
}

.wink:after {
  content: ";-)";
  transform: rotate(90deg);
}

.indifferent:after {
  content: ":-\00a0";
  transform: rotate(90deg);
}

.indifferent:before{
  content: "|";
  margin-top: 10px;
  transform: rotate(90deg);
}

/* Just for presentation */

body {
  background-color: #282831;
  color: #999;
  left: 10%;
  position: absolute;
  width: 600px;
  font-family: Arial;
  font-size: 1.25em;
}

<div class="smiley">
  <div class="smile"></div>
  <div class="sad"></div>
  <div class="indifferent"></div>
  <div class="cry"></div>
  <div class="wink"></div>
</div>

There is a larger collection of such smileys in my pen here.

Answer 2

Those are the fonts, so you cannot change their moods using CSS, instead do it something like this, I made them from scratch..

Demo

Here, I've used :before and :after pseudo to create the eyes of the smileys, and the nested span tag is used for the expression... I've not refactored my CSS, but you can chop it to a great extent by merging the common properties in a class and calling multiple classes on a single element.

.smiley {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.smiley:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.smiley:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.smiley span {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border-bottom: 2px solid red;
    position: absolute;
    bottom: 10px;
    left: 25px;
}










.neutral {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.neutral:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.neutral:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.neutral span {
    height: 50px;
    width: 50px;
    border-bottom: 2px solid red;
    position: absolute;
    bottom: 20px;
    left: 25px;
}










.sad {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.sad:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.sad:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.sad span {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border-top: 2px solid red;
    position: absolute;
    bottom: -15px;
    left: 25px;
}