Fostrap - Material Design is a visual programming language made by Google. Language programming examples using visual display an interesting but simple. Material Design not offer the concept of change in masive, but this is a significant step for the region to Visually Representative language. This technology will trigger design-based artificial manifested into a tangible form.

Before the trend material design "swoop", many designers are trying to make the display (e.g. key/button) using 3D style so that the resulting output resembles how the original form in the real world. But it is no longer popular, thing that becomes the top priority now is the access speed to become one part of material design due to generally give priority to staining a solid objects without imposing the use of images is not necessary.

The term often we call with the flat design that does not give priority to the use of the background is too complicated but simple in order to make the user can more easily and not confused to use those objects.

Material Design Box Shadows

Browser Support All of the major newest browsers support box-shadow property.

• Internet Explorer 9.0 and higher 
• Firefox 3.5 and higher 
• Chrome 1 and higher 
• Safari 3 and higher 
• Opera 10.5 and higher

Effect 1

The HTML

<div class="gmd">
  <!-- your countent -->
</div>

The CSS

.gmd {
  background: #fff;
  border-radius: 2px;
  display: block;
  float: left;
  height: 150px;
  margin: 1rem;
  position: relative;
  width: 150px;
}

 Effect 2

The HTML

<div class="gmd gmd-2">
  <!-- your countent -->
</div>

The CSS

.gmd {
  background: #fff;
  border-radius: 2px;
  display: block;
  float: left;
  height: 150px;
  margin: 1rem;
  position: relative;
  width: 150px;
}
.gmd-2 {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  -ms-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  -o-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
} 

Effect 4

The HTML

<div class="gmd gmd-3">
  <!-- your countent -->
</div>

The CSS

.gmd {
  background: #fff;
  border-radius: 2px;
  display: block;
  float: left;
  height: 150px;
  margin: 1rem;
  position: relative;
  width: 150px;
}
.gmd-3 {
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -ms-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -o-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

 Effect 5

The HTML

<div class="gmd gmd-5">
  <!-- your countent -->
</div>

The CSS

.gmd {
  background: #fff;
  border-radius: 2px;
  display: block;
  float: left;
  height: 150px;
  margin: 1rem;
  position: relative;
  width: 150px;
}
.gmd-5 {
  -webkit-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
  -moz-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
  -ms-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
  -o-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}