Skip to content

Instantly share code, notes, and snippets.

@taybenlor
Created August 10, 2011 06:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save taybenlor/1136274 to your computer and use it in GitHub Desktop.
Save taybenlor/1136274 to your computer and use it in GitHub Desktop.
Too Many Pixies Mushroom CSS
/*
* _____
* |_ _|____ __ _____ _ _ ___
* | |/ _ \ V V / -_) '_(_-<
* |_|\___/\_/\_/\___|_| /__/
*
*
*/
/* mushroom middle */
.tower.default{
position: relative;
width: 100%;
height: 40px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
top: -20px;
box-shadow:
0 5px rgb(255, 255, 224),
0 25px 4px rgba(0,0,0,0.2),
inset 0px 0px 2px black;
-webkit-transition: height 0.2s ease, top 0.2s ease;
background-color: red;
background-image:
-webkit-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
-webkit-radial-gradient(white 30%, transparent 31%),
-webkit-radial-gradient(white 30%, transparent 31%);
background-size:20px 20px;
background-position: 0 0, 0 0, 30px 30px;
}
.tower.default.attacking{
height: 30px;
top: -10px;
}
/* Mushroom pillar */
.tower.default:before{
content: '';
display: block;
position: absolute;
width: 24px;
height: 10px;
margin-top: 5px;
margin-left: -12px;
top: 100%;
left: 50%;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-left-radius: 5px 15px;
-webkit-border-top-right-radius: 5px 15px;
box-shadow: inset 0px 0px 2px black;
background-color: rgb(255, 255, 224);
background-image: -webkit-linear-gradient(0, transparent 50%, rgba(0,0,0,.1) 50%);
background-size: 5px;
}
/* Mushroom top*/
.tower.default:after{
content: '';
display: block;
position: absolute;
width: 100%;
height: 35px;
top: 0;
left: 0;
-webkit-border-radius: 5px;
box-shadow: inset 0px 0px 2px black;
background-color: red;
background-image:
-webkit-radial-gradient(rgb(255, 255, 224) 30%, transparent 31%),
-webkit-radial-gradient(rgb(255, 255, 224) 30%, transparent 31%);
background-size:20px 20px;
background-position: 0 0, 30px 30px;
}
.tile:hover .tower.default:after{
box-shadow:
0 0 8px white,
inset 0 0 8px white,
inset 0px 0px 2px black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment