One Div Text Based Emoticon Set
Here is a set of emoticons that are created with only one div. The content of almost all smileys are pure text and are devoid of any images. Transform property used to rotate and position text contents as required.
<div class="smiley">
<div class="smiley">
<div class="smile"></div>
<div class="sad"></div>
<div class="cry"></div>
<div class="wink"></div>
<div class="sarcastic"></div>
<div class="indifferent"></div>
<div class="moustache"></div>
<div class="oh"></div>
<div class="mouth_shut"></div>
<div class="cheek"></div>
<div class="nap"></div>
<!-- Indian Style Welcome -->
<div class="welcome"></div>
<div class="undecided"></div>
<div class="partying"></div>
<div class="angel"></div>
<div class="evil"></div>
<div class="vampire"></div>
<div class="laugh"></div>
<div class="tongue_cheek"></div>
<div class="angry"></div>
<div class="kissed"></div>
<div class="heart"></div>
<div class="smug"></div>
<div class="sigh"></div>
<br/>
<div class="greedy"></div>
<div class="tongue_tied"></div>
</div>
body {
body {
background-color: #282831;
color: #999;
left: 10%;
position: absolute;
width: 600px;
font-family: Arial;
font-size: 1.25em;
}
.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);
}
.sarcastic:before {
content: ":-\00a0";
transform: rotate(90deg);
}
.sarcastic:after{
content: "s";
margin-top: 10px;
transform: rotate(90deg) ;
}
.indifferent:after {
content: ":-\00a0";
transform: rotate(90deg);
}
.indifferent:before{
content: "|";
margin-top: 10px;
transform: rotate(90deg);
}
.moustache:after {
content:":-{)";
transform: rotate(90deg);
}
.undecided:before {
content: ":-\00a0";
transform: rotate(90deg);
}
.undecided:after {
content: "/";
margin-top: 10px;
margin-left: -2px;
transform: rotate(90deg);
}
.oh:after {
content: ":-o";
transform: rotate(90deg);
}
.mouth_shut:after {
content: ":-x";
transform: rotate(90deg);
}
.laugh:before {
content: ":-\00a0";
transform: rotate(90deg);
}
.laugh:after {
content: "D";
margin-top: 10px;
margin-left: -2px;
transform: rotate(90deg) scaleX(0.75);
}
.cheek:before {
content: ":-\00a0";
transform: rotate(90deg);
}
.cheek:after {
content: "P";
margin-top: 10px;
margin-left: -1px;
transform: rotate(90deg) scaleX(0.75);
}
.partying:before {
content: "<";
margin-top: -25px;
margin-left: -1px;
transform: rotate(90deg) scaleY(1.5) scaleX(1.25);
z-index: 2;
}
.partying:after {
content: ":-o";
transform: rotate(90deg);
}
.angel:before {
content: "\00a0";
height: 10px;
width: 18px;
border-radius: 100%;
border: 3px solid #999;
margin-left: 11px;
margin-top: -6px;
transform: rotateX(40deg);
z-index: 2;
}
.angel:after {
content: ":-)";
transform: rotate(90deg);
}
.greedy:before {
content: "\00a0\00a0-)";
transform: rotate(90deg);
}
.greedy:after {
content: "$ $";
margin-top: -5px;
margin-left: -2px;
transform: rotate(0deg) scale(0.75);
}
.nap:before {
content: "~ ~";
margin-top: -5px;
margin-left: -2px;
transform: scaleX(0.80);
}
.nap:after {
content: "\00a0\00a0-)";
transform: rotate(90deg);
}
.evil:before {
content: "^ ^";
margin-top: -15px;
margin-left: -2px;
transform: rotate(0deg) scale(1.4);
}
.evil:after {
content: ":-)";
transform: rotate(90deg);
}
.kissed:before {
content: ":- )";
transform: rotate(90deg);
}
.kissed:after {
content: "*";
margin-left: 6px;
transform: rotate(90deg);
}
.smug:before {
content: ":-\00a0";
transform: rotate(90deg);
}
.smug:after {
content: "<";
margin-left: -2px;
margin-top: 12px;
transform: rotate(90deg) scaleX(0.75) scaleY(1.25);
}
.sigh:before {
content: ":-\00a0";
transform: rotate(90deg);
}
.sigh:after {
content: ">";
margin-left: -2px;
margin-top: 10px;
transform: rotate(90deg) scaleX(0.75) scaleY(1.25);
}
.tongue_cheek:before {
content: ":-\00a0";
transform: rotate(90deg);
}
.tongue_cheek:after {
content: "J";
margin-left: -3px;
margin-top: 9px;
transform: rotate(90deg);
}
.tongue_tied:before {
content: ":-\00a0";
transform: rotate(90deg);
}
.tongue_tied:after {
content: "&";
margin-left: -2px;
margin-top: 12px;
transform: rotate(90deg) scaleX(0.75) scaleY(0.75);
}
.angry:before {
content: "> <";
margin-top: -5px;
margin-left: -1px;
transform: scale(0.75);
}
.angry:after {
content: "\00a0\00a0-(";
transform: rotate(90deg);
}
.vampire:before {
content: ":-\00a0";
transform: rotate(90deg);
}
.vampire:after {
content: "E";
margin-left: -2px;
margin-top: 10px;
transform: rotate(90deg) scaleX(0.70);
}
.welcome:after {
content: "_/\\_";
margin-left: -2px;
margin-top: -2px;
}
/** Inspired by Andreas Storm's creation **/
.heart:before {
content: '';
transform: rotate(45deg);
width: 22.5px;
height: 15px;
background: #999;
margin-top: 15px;
margin-left: 7px;
border-radius: 10px 0px 0px 10px;
}
.heart:after {
content: '';
transform: rotate(-225deg);
width: 22.5px;
height: 15px;
background: #999;
margin-top: 15px;
margin-left: 13px;
border-radius: 10px 0px 0px 10px;
}