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
<div class="gmd">The CSS
<!-- your countent -->
</div>
.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-1">The CSS
<!-- your countent -->
</div>
.gmd {
background: #fff;
border-radius: 2px;
display: block;
float: left;
height: 150px;
margin: 1rem;
position: relative;
width: 150px;
}
.gmd-1 {
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
Effect 3
<div class="gmd gmd-2">The CSS
<!-- your countent -->
</div>
.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
<div class="gmd gmd-3">The CSS
<!-- your countent -->
</div>
.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-4">The CSS
<!-- your countent -->
</div>
.gmd {
background: #fff;
border-radius: 2px;
display: block;
float: left;
height: 150px;
margin: 1rem;
position: relative;
width: 150px;
}
.gmd-4 {
-webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-moz-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-ms-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-o-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
Effect 6
<div class="gmd gmd-5">The CSS
<!-- your countent -->
</div>
.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);
}