Skip to content

Instantly share code, notes, and snippets.

@larodiel

larodiel/Smile with CSS3

Created July 2, 2013 21:05
Show Gist options
  • Save larodiel/5913118 to your computer and use it in GitHub Desktop.
Save larodiel/5913118 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Smile with CSS3
<!doctype html>
<html>
<head>
<title>Larodiel lab - Smile</title>
<style type="text/css">
#corpo-smille {
border:5px solid #2b2b2b;
background:#ece413;
width:160px; height:160px;
box-shadow: 0px 8px 15px #9C9C9C;
-moz-box-shadow: 0px 8px 15px #9C9C9C;
-webkit-box-shadow: 0px 8px 15px #9C9C9C;
border-radius:160px;
-moz-border-radius:160px;
-webkit-border-radius:160px;
margin:0 auto;
}
#olhos {
width:85px;
margin: 40px auto 0 auto;
overflow:hidden;
position:relative;
z-index: 20;
}
#olhos:before,
#olhos:after {
display: block;
width:30px; height:30px;
background:#2b2b2b;
border-radius: 30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
content:" ";
float: left;
}
#olhos:after {
float: right;
}
#boca {
position:relative;
top: -50px;
z-index: 10;
}
#boca:before,
#boca:after {
content: " ";
display: block;
width:120px; height:120px;
position:absolute;
border-radius:120px;
-moz-border-radius:120px;
-webkit-border-radius:120px;
left:20px;
}
#boca:before{
z-index: 20;
background:#ece413;
top: -8px;
}
#boca:after{
background:#2a2931;
z-index: 10;
}
</style>
</head>
<body>
<div id="corpo-smille">
<div id="olhos"></div>
<div id="boca"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment