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:

All of them should be placed one after another (currently overlapping)
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;
}

All three are smiling. There is no neutral or sad one in your code. — Nitesh
– Nitesh, Commented Jan 17, 2014 at 7:12

Mr. Alien · Accepted Answer · 2014-01-17 07:19:51Z

5

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;
}

answered Jan 17, 2014 at 7:19

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2129623 Over a year ago

Mr.Alien: I want to place all three in single line beside each other. Which element will do this?

Mr. Alien Over a year ago

@Programming_crazy Make the div inline-block like this div.smiley, div.neutral, div.sad { display: inline-block; } jsfiddle.net/pQnL6/1

Faisal Over a year ago

This was a great solution. Thanks for your help. :)

Harry · Accepted Answer · 2015-04-24 14:47:19Z

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.

Collectives™ on Stack Overflow

Creating smiley and adding expression

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest