A Pen by Adam Henley.

CSS-Grenades.markdown

CSS Grenades

Inspired by the grenade icons at: http://blogs.battlefield.com/2014/01/balancing-bf4-grenades/

A Pen by Adam Henley on CodePen.

License.

Grenades-v0.1.markdown

Grenades v0.1

Inspired by the grenade icons at: http://blogs.battlefield.com/2014/01/balancing-bf4-grenades/

A Pen by Adam Henley on CodePen.

License.

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>

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 **/