Skip to content

Instantly share code, notes, and snippets.

@adamazing

adamazing/CSS-Grenades.markdown

Created February 3, 2014 20:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save adamazing/8792233 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save adamazing/8792233 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Adam Henley.
Raw
index.html
<div id="wrap">
<div class="grenade" id="flare">
<div class="body">
<div class="top"><div class="grip"></div><div class="grip"></div></div>
<div class="bottom"><div class="grip"></div><div class="grip"></div></div>
</div>
</div>
<div class="grenade" id="smoke">
<div class="trigger">
<div class="ring"></div>
</div>
<div class="body"><div class="markings"></div></div>
</div>
<div class="grenade" id="grenade1">
<div class="trigger">
<div class="ring"></div>
</div>
<div class="body">
<div class="markings">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="body2"><div class="markings"></div></div>
</div>
<div class="grenade" id="grenade2">
<div class="trigger"></div>
<div class="ring"></div>
<div class="body"></div>
</div>
<div class="grenade" id="grenade3"></div>
<div class="grenade" id="grenade4">
<div class="trigger">
<div class="grip">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="ring"></div>
<div class="body">
<div class="markings">
</div>
</div>
</div>
<div class="grenade" id="grenade5">
<div class="trigger"></div>
<div class="ring"></div>
<div class="body"><div class="markings"></div></div>
</div>
</div>
Raw
style.less
@fgcolor: white;
@bgcolor: black;
.bg { background-color: @bgcolor; }
.thick_border{ border-color: @fgcolor; border-style: solid; border-width:2px; }
.thin_border{ border-color: @fgcolor; border-style: solid; border-width:1px; }
.circle(@radius) {
height: @radius;
width: @radius;
border-radius:50%;
}
.rotate(@deg){
transform: rotate(@deg);
-ms-transform: rotate(@deg); /* IE 9 */
-webkit-transform: rotate(@deg); /* Safari and Chrome */
}
.rotateX(@deg){
transform: rotateX(@deg);
-ms-transform: rotateX(@deg); /* IE 9 */
-webkit-transform: rotateX(@deg); /* Safari and Chrome */
}
.box-shadow (@x: 0; @y: 0; @blur: 1px; @spread; @color: #000) {
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
body{ .bg }
.markings, .markings *{
.thin_border;
border-color: fade(@fgcolor,30%);
}
#wrap{
position:relative;
width:700px;
margin: 0 auto;
top:100px;
}
.grenade {
position:relative;
float:left;
margin-right:40px;
top:50%;
}
#flare{ top:40px; }
#smoke { }
#grenade1 {}
#grenade2 { top:6px;}
#grenade3 {}
#grenade4 {top:10px;}
#grenade5 {top: 14px;}
/** Flare **/
#flare .body{ .thick_border;.bg;width: 110px;height: 16px;.rotate(32deg);}
#flare .body .top { border-right: 1px solid @fgcolor; float:left; width:20px;height:100%;}
#flare .body .bottom{ border-left: 1px solid @fgcolor; float:right; width:20px;height:100%;}
#flare .grip { position:relative; .thin_border; width:17px; height:4px;margin-top:1px; }
#flare .top .grip { left:-2px; float:left; }
#flare .bottom .grip { float:right; right: -2px; margin-top:1px; }
/** Smoke grenade ? **/
#smoke .trigger{
.thick_border;
border-left-width:3px;
.bg;
width: 12px;
height:10px;
position:relative;
left: 8px;
top:1px;
}
#smoke .trigger:before{
content: " ";
border-color: @fgcolor;
border-style:solid;
border-left-width:2px;
border-top-width:2px ;
border-bottom-width:2px;
border-right: none;
width:1px;
height:1px;
position:absolute;
top:-2px;
left:-5px;
}
#smoke .trigger .ring {
.circle(16px);
.thin_border;
height:20px;
.rotate(-30deg);
}
@smoke_body_height:73px;
@smoke_body_width: 28px;
#smoke .body{
.thick_border;
.bg;
height: @smoke_body_height;
width: @smoke_body_width;
}
#smoke .body .markings {
width: @smoke_body_width;
height: 62px;
position:relative;
top:5px;
left:-1px;
}
/** END Smoke grenade **/
/** BEGIN Grenade #1 **/
#grenade1 .trigger{
.thick_border;
.bg;
height:14px;
width:20px;
left:5px;
position:relative;
z-index:5;
}
#grenade1 .trigger:before{
content: " ";
border-color: @fgcolor;
border-style:solid;
border-left-width:2px;
border-top-width:2px ;
border-bottom-width:2px;
border-right: none;
.bg;
width:3px;
height:3px;
position:absolute;
top:-2px;
left:-5px;
}
.grenade1_ring_rotate {
.rotateX(30deg);
.rotate(70deg);
}
#grenade1 .trigger .ring{
.circle(19px);
.thin_border;
left:12px;
.grenade1_ring_rotate;
position:absolute;
}
#grenade1 .trigger .ring:after{
content: " ";
position:absolute;
.circle(15px);
.thin_border;
top:1px;
left:1px;
.grenade1_ring_rotate;
.box-shadow(0px, 0px, 0, 1px, @bgcolor);
}
#grenade1 .body {
.thick_border;
.bg;
height:42px;
width:30px;
position:relative;
border-top-left-radius: 5px ;
border-top-right-radius: 5px;
border-bottom-width:1px;
z-index:3;
}
#grenade1 .body:after{
content: " ";
position:absolute;
.thick_border;
border-top-width:1px;
border-bottom-width:1px;
.bg;
top:42px;
left:0;
width: 26px;
height:4px;
}
#grenade1 .body .markings > div:nth-of-type(1){
position:absolute;
height:1px;
left:-1px;
top:2px;
width:30px;
}
#grenade1 .body .markings > div:nth-of-type(2){
position:absolute;
height:23px;
left:-1px;
top:8px;
width:20px;
}
#grenade1 .body .markings > div:nth-of-type(3){
position:absolute;
height:23px;
right:-1px;
top:8px;
width:20px;
}
#grenade1 .body .markings > div:nth-of-type(4){
position:absolute;
height:1px;
right:-1px;
top:38px;
width:30px;
}
#grenade1 .body .markings > div:nth-of-type(5){
position:absolute;
height:8px;
right:5px;
top:16px;
left:0;
width:30px;
}
#grenade1 .body2{
width: 15px;
height: 0;
border-top: solid 18px @fgcolor;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
position: relative;
top:4px;
}
#grenade1 .body2:after{
content: "";
width: 14px;
height: 0;
border-top: solid 17px @bgcolor;
border-left: solid 8px transparent;
border-right: solid 8px transparent;
position: absolute;
left: -8px;
top: -18px;
}
/** END Grenade #1 **/
/** BEGIN Grenade #2 **/
#grenade2 .trigger{
.thick_border;
.bg;
border-bottom-width: 1px;
width:20px;
height:20px;
left:21px;
top:4px;
position:relative;
}
#grenade2 .trigger:before{
content: " ";
border-color: @fgcolor;
border-style:solid;
border-left-width:2px;
border-top-width:2px ;
border-bottom-width:2px;
border-right: none;
.bg;
width:5px;
height:5px;
position:absolute;
top:-2px;
left:-7px;
}
#grenade2 .trigger:after{
content: " ";
.thin_border;
height:5px;
width:22px;
top: 14px;
left: -2px;
position:absolute;
}
#grenade2 .ring{
.thin_border;
.circle(18px);
position:relative;
top:-18px;
left:28px;
}
#grenade2 .body{
position:relative;
top:-18px;
z-index:-1;
.thick_border;
.circle(60px);
}
/** END GRENADE#2 **/
/** BEGIN Grenade #3 **/
/** END Grenade #3 **/
/** BEGIN Grenade #4 **/
#grenade4 .trigger{
.thick_border;
.bg;
height:30px;
width:30px;
position:relative;
left:10px;
border-bottom-width:1px;
border-top-left-radius: 80% 60%;
border-top-right-radius: 30% 50%;
}
#grenade4 .trigger:after{
content: " ";
.thick_border;
.bg;
border-top-color:rgba(200,200,200,0.4);
border-bottom-color: rgba(235,235,235,0.9);
position: absolute;
height:0;
width:20px;
top:30px;
}
#grenade4 .trigger .grip {
.markings;
height:20px;
width:75%;
position:relative;
top:6px;
border-top-left-radius:60% 30%;
border-top-right-radius: 50%;
}
#grenade4 .trigger .grip > div{
.markings;
height: 10px;
width:3px;
position:relative;
float:left;
top:6px;
left:-2px;
}
#grenade4 .trigger .grip >div:nth-of-type(2n){ border-top: none; }
#grenade4 .body{
.thick_border;
.bg;
.circle(45px);
}
#grenade4 .body > .markings {
position:relative;
top:20px;
}
#grenade4 .ring{
.circle(20px);
.thin_border;
position:absolute;
top:10px;
left:30px;
.rotateX(10deg);
.rotate(10deg);
}
#grenade4 .ring:after{
content: " ";
.circle(16px);
.thin_border;
position:absolute;
top:1px;
left:1px;
}
/** END Grenade #4 **/
/** BEGIN Grenade #5 **/
#grenade5 .trigger{
.thick_border;
.bg;
border-bottom-width: 1px;
width:25px;
height:12px;
left:13px;
top:6px;
position:relative;
z-index:7;
}
#grenade5 .trigger:before{
content: " ";
border-color: @fgcolor;
border-style:solid;
border-left-width:2px;
border-top-width:2px ;
border-bottom-width:2px;
border-right: none;
.bg;
width:5px;
height:5px;
position:absolute;
top:-2px;
left:-7px;
}
#grenade5 .trigger:after{
content: " ";
.thin_border;
.bg;
height:5px;
width:20px;
top: 12px;
left: 1px;
position:absolute;
z-index:6;
}
#grenade5 .ring{
.circle(49px);
background-color: transparent;
.thin_border;
position:absolute;
z-index:50;
top:9px;
left:16px;
}
#grenade5 .ring:after{
content:" ";
.circle(41px);
background-color: transparent;
.thin_border;
position:absolute;
z-index:51;
top:0.188em;
left:0.188em;
.box-shadow(0px, 0px, 0, 3px, @bgcolor);
}
#grenade5 .body{
.thick_border;
.circle(50px);
position:relative;
top:8px;
z-index:2;
}
#grenade5 .body .markings{
width:50px;
height:5px;
border-left: none;
border-right:none;
position:relative;
top:23px;
}
/** END Grenade #5 **/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment