CSS3 Emoticons

by Tgwizman

HTML

Hiya! <emote class=clockwise>:D</emote> Testing my inline text smileys! <emote class=clockwise>=P</emote> You like? <emote class=clockwise>;3</emote>

<br>Here are some non-turned emotes. <emote>O_o</emote> <emote>._.</emote> <emote>@w@</emote>

<br>You can even change the color!
<emote class="clockwise" style="color:white;background-color:blue">:'(</emote>
<emote class="clockwise" style="color:white;background-color:red">>:I</emote>
<emote class="clockwise" style="background-color:#CCC">(:]</emote>

CSS

emote {
    margin: 0px 5px;
    padding: 1px;
    display: inline-block;
    font-family: 'Trebuchet MS';
    font-size: 10pt;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #000;
    background-color: #FF0;
    overflow: hidden;
    border-radius: 100px;
    -o-border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}

emote.clockwise {
    width: 15px;
    height: 15px;
    transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}