Skip to content

Instantly share code, notes, and snippets.

@artlung

artlung/smiley.html

Created September 7, 2010 19:51
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save artlung/568975 to your computer and use it in GitHub Desktop.
Save artlung/568975 to your computer and use it in GitHub Desktop.
Download ZIP
Make a smiley face using only css+html
Raw
smiley.html
<style type="text/css">
div#wrapper {
width: 80%;
padding: 50px;
}
.smiley {
height: 100px;
width: 100px;
position: relative;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
}
.smiley .eye {
height: 12px;
width: 12px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
position: absolute;
}
.left-eye {
top: 20px;
left: 30px;
}
.right-eye {
top: 20px;
right: 30px;
}
.mouth {
-webkit-border-bottom-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-bottomright: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
height: 25px;
background-color: #000;
position: absolute;
width: 50px;
left: 25px;
top: 60px;
}
/*you can programmatically set the colors or even background images of these here */
div#wrapper, .smiley div {
background-color: #c00;
}
.smiley {
background-color: #ccc;
}
</style>
<body>
<div id="wrapper">
<div class="smiley">
<div class="left-eye eye">&nbsp;</div>
<div class="right-eye eye">&nbsp;</div>
<div class="mouth">&nbsp;</div>
</div>
</div>
</body>
@madkne
Copy link

madkne commented Jun 28, 2017

bcvbcgcg

  • bfcgbdg

@DevAbbacus
Copy link

jjj:)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment