Simple CSS emoticons

Feb 24, 2013 in CSS

It's been more than 30 years now when text emotions were proposed by Scott Fahlman back in 1982. There are tons of different styles and variations of this simple and expressive plain text sequencies. So what can be added more?

Well, what if we try to make them a little bit more naturally looking by ... rotating them! Yep, with CSS3 this is now possible and very simple.

First we need to define a helper class, I will call it emotion. An implementation is as simple as:

.emotion {
    display: inline-block;
    padding: 0 4px;
    font: 16px/16px normal Verdana, sans-serif;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

And the usage:

Hello, nice to see you <i class="emotion">:)</i>
Hello, nice to see you <i class="emotion">:(</i>
Hello, nice to see you <i class="emotion">:x</i>

Here is the example of how such an emotion can look: