CSS Smileys

Smileys - completely done in CSS. :-)

HTML

<p><span class="m-smiley">:-)</span></p>
<p><span class="m-smiley m-smiley--green">:-)</span></p>
<p><span class="m-smiley m-smiley--red">:-(</span></p>

CSS

body {
    font-size:100px;
}
.m-smiley {
    display:inline-block;
    padding:0.16em 0.32em 0.32em;
	
    -webkit-border-radius:100%;
	   -moz-border-radius:100%;
		-ms-border-radius:100%;
		 -o-border-radius:100%;
			border-radius:100%;
	
    -webkit-transform:rotate(90deg);
	   -moz-transform:rotate(90deg);
		-ms-transform:rotate(90deg);
		 -o-transform:rotate(90deg);
			transform:rotate(90deg);
	
    background-color:#ead700;
    line-height:1.1em;
    font-family:serif;
    color:#000;
}
.m-smiley--red {
	background-color:#ea4d00;
}
.m-smiley--green {
	background-color:#84ea00;
}