Skip to content

Instantly share code, notes, and snippets.

@superfine

superfine/index.html

Created November 16, 2012 13:14
Show Gist options
  • Save superfine/4087264 to your computer and use it in GitHub Desktop.
Save superfine/4087264 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Taylor Packet. CSSssSsSss Creeper - Minecraft Creeper, something I thought would be neat to create.
Raw
index.html
<body><div class="container">
<div class="mouth">
<ul>
<li>Right</li>
<li>Left</li>
<li></li><li></li><li></li><li></li><li></li>
</ul>
</div></div>
</body>
Raw
style.css
body{background-color: #c0f0aa;}
.container {
margin:-18px auto;
width:675px;
height:450px;
background-size: 150px 150px;
background-color: #abd698;
background-image: -webkit-linear-gradient(transparent 50%, rgba(108, 161, 89, .5) 50%, rgba(108, 161, 89, .5)),
-webkit-linear-gradient(0deg, transparent 50%, rgba(108, 161, 89, .5) 50%, rgba(108, 161, 89, .5));
background-image: -moz-linear-gradient(transparent 50%, rgba(108, 161, 89, .5) 50%, rgba(108, 161, 89, .5)),
-moz-linear-gradient(0deg, transparent 50%, rgba(108, 161, 89, .5) 50%, rgba(108, 161, 89, .5));
background-image: -ms-linear-gradient(transparent 50%, rgba(108, 161, 89, .5) 50%, rgba(108, 161, 89, .5)),
-ms-linear-gradient(0deg, transparent 50%, rgba(108, 161, 89, .5) 50%, rgba(108, 161, 89, .5));
background-image: -o-linear-gradient(transparent 50%, rgba(108, 161, 89, .5) 50%, rgba(108, 161, 89, .5)),
-o-linear-gradient(0deg, transparent 50%, rgba(108, 161, 89, .5) 50%, rgba(108, 161, 89, .5));
background-image: linear-gradient(transparent 50%, rgba(108, 161, 89, .5) 50%, rgba(108, 161, 89, .5)),
linear-gradient(0deg, transparent 50%, rgba(108, 161, 89, .5) 50%, rgba(108, 161, 89, .5));
-pie-background: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(108, 161, 89, .5)) 0 0 / 150px 150px,
linear-gradient(0deg, transparent 50%, rgba(108, 161, 89, .5) 50%, rgba(108, 161, 89, .5)) 0 0 / 150px 150px white;
}
.mouth {
background: #014100;
width: 126px;
height: 125px;
position: relative;
left: 273px;
top:170px;
-moz-box-shadow:inset 0px 15px 20px rgba(0,0,0,1);
-webkit-box-shadow:inset 0px 15px 20px rgba(0,0,0,1);
box-shadow:inset 0px 15px 20px rgba(0,0,0,1);
background-image: -o-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(1,65,0) 60%);
background-image: -moz-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(1,65,0) 60%);
background-image: -webkit-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(1,65,0) 60%);
background-image: -ms-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(1,65,0) 60%);
background-image: linear-gradient(90deg , rgb(0,0,0) 0%, rgb(1,65,0) 60%);
}
.mouth:after{
background: #8bbb78;
content: "";
width: 62px;
height: 35px;
position: absolute;
top: 93px;
left: 32px;
}
ul li {
text-indent: -9999px;
position: absolute;
list-style-type:none;
}
ul li:nth-child(1) {
width: 61px; height: 61px;
top: -60px; left: -29px;
background:#014100;
-moz-box-shadow:inset 0px 17px 18px rgba(0,0,0,0.9);
-webkit-box-shadow:inset 0px 17px 18px rgba(0,0,0,0.9);
box-shadow:inset 0px 17px 18px rgba(0,0,0,0.9);
z-index:99;
}
ul li:nth-child(2) {
width: 61px; height: 61px;
top: -60px; left: 93px;
background:#014100;
-moz-box-shadow:inset 0px 17px 18px rgba(0,0,0,0.9);
-webkit-box-shadow:inset 0px 17px 18px rgba(0,0,0,0.9);
box-shadow:inset 0px 17px 18px rgba(0,0,0,0.9);
z-index:99;
}
ul li:nth-child(3) {
width: 33px; height: 30px;
top: 1px; left: 93px;
background:#8bbb78;
-moz-box-shadow: -4px 4px 17px rgba(0,0,0,1);
-webkit-box-shadow: -4px 4px 17px rgba(0,0,0,1);
box-shadow: -2px 8px 13px rgba(0,0,0,1);
}
ul li:nth-child(4) {
width: 33px; height: 30px;
top: 1px; left: -2px;
background:#8bbb78;
-moz-box-shadow: -4px 4px 17px rgba(0,0,0,1);
-webkit-box-shadow: -4px 4px 17px rgba(0,0,0,1);
box-shadow: 2px 8px 16px rgba(0,0,0,1);
}
ul li:nth-child(5) {
width: 12px; height: 53px;
top: 2px; left: -13px;
background:#8bbb78;
}
ul li:nth-child(6) {
width: 12px; height: 53px;
top: 2px; left: 126px;
background:#8bbb78;
}
ul li:nth-child(7) {
width: 480px; height: 380px;
top: -550px; left: -190px;
background:transparent;
box-shadow: inset 3px 4px 2px 0px rgba(255, 255, 255, 0.0), inset -1px -1px 0px 0px rgba(255, 255, 255, 0.0), 0px 160px 130px -30px rgba(225, 225, 225, 0.7);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment