CSS Smileys

dabblet.css

#wrapper{
	max-width:300px;
	margin:30px auto;
	padding:0px 20px;
}
.floatleft{
	float:left;
}
[class^="smiley-"]{
	width:70px;
	height:70px;
	border-radius:50%;
	margin-right:20px;
}
.smiley-green{
	background:#a9db7a;
	border:5px solid #92c563;
	position: relative;
}
.smiley-green .left-eye{
	width:18%;
	height:18%;
	background:#84b458;
	position:relative;
	top:29%;
	left:22%;
	border-radius:50%;
	float: left;
}
.smiley-green .right-eye{
	width:18%;
	height:18%;
	border-radius:50%;
	position:relative;
	background:#84b458;
	top: 29%;
	right: 22%;
	float: right;
}
.smiley-green .smile{
	position: absolute;
	top:67%;
	left:16.5%;
	width:70%;
	height:20%;
	overflow: hidden;
}
 .smiley-green .smile:after, .smiley-green .smile:before{
 	content:"";
 	position:absolute;
 	top:-50%;
 	left:0%;
 	border-radius:50%;
	background:#84b458;
	height:100%;
	width:97%;
 }
 .smiley-green .smile:after{
 	background: #84b458;
	height: 80%;
	top: -40%;
	left: 0%;
}


.smiley-yellow{
	background:#eed16a;
	border:5px solid #dbae51;
	position: relative;
}
.smiley-yellow .left-eye{
	width:18%;
	height:18%;
	background:#dba652;
	position:relative;
	top:29%;
	left:22%;
	border-radius:50%;
	float: left;
}
.smiley-yellow .right-eye{
	width:18%;
	height:18%;
	border-radius:50%;
	position:relative;
	background:#dba652;
	top: 29%;
	right: 22%;
	float: right;
}
.smiley-yellow .smile{
	position: absolute;
	top:67%;
	left:19%;
	width:65%;
	height:14%;
	background:#dba652;
	overflow: hidden;
	border-radius:8px;
}


.smiley-red{
	background:#ee9295;
	border:5px solid #e27378;
	position: relative;
}
.smiley-red .left-eye{
	width:18%;
	height:18%;
	background:#d96065;
	position:relative;
	top:29%;
	left:22%;
	border-radius:50%;
	float: left;
}
.smiley-red .right-eye{
	width:18%;
	height:18%;
	border-radius:50%;
	position:relative;
	background:#d96065;
	top: 29%;
	right: 22%;
	float: right;
}
.smiley-red .smile{
	position: absolute;
	top:57%;
	left:16.5%;
	width:70%;
	height:20%;
	overflow: hidden;
}
 .smiley-red .smile:after, .smiley-red .smile:before{
 	content:"";
 	position:absolute;
 	top:50%;
 	left:0%;
 	border-radius:50%;
	background:#d96065;
	height:100%;
	width:97%;
 }
 .smiley-red .smile:after{
 	background: #d96065;
	height: 80%;
	top: 60%;
	left: 0%;
}

dabblet.html

<section id="wrapper">
  <div class="smiley-green floatleft">
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <div class="smile"></div>
  </div>

  <div class="smiley-yellow floatleft">
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <div class="smile"></div>
  </div>

  <div class="smiley-red floatleft">
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <div class="smile"></div>
  </div>
</section>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}