The examples below test out implementation of card frames styled in a manner similar to Google's Material Design HTML user-interface styling specification. The examples below demonstrate variations on material design style card frames with material design style hover/focus shadow effects. Functionally, the intent is to create widgets that can be deployed simply by adding a CSS class to an HTML div tag whose implementation creates the desired visual results and behaviors.
Each of the cards/frames below uses the following similar HTML markup. Not that the CSS for the cards does not specific a height, so the height is created by the length of the content. The width of the cards is flexible and responsive by using width: 100% instead of a more specific width, which enables the width of the card to fill its surrounding HTML column container. The styling of each successive card/frame below is modified simply by inserting a different CSS class that styles the card/frame differently.
<div class="mds-box-0001"> <h4>Material Design Demonstration Bounding Box Card</h4> <p>Box container with minimal shadow effect.<br /> <br /> <br /> <br /> <br /> <br /> <br /> </p> </div>
Material Design Demonstration Bounding Box Card
Box card/frame container with shadow visual effects.
.mds-box-0001
{
display: block;
padding: 1px 17px;
max-width: 100%;
width: 100%;
-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
-o-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
-webkit-transition: box-shadow .3s ease-in-out;
-moz-transition: box-shadow .3s ease-in-out;
-o-transition: box-shadow .3s ease-in-out;
transition: box-shadow .3s ease-in-out;
background-color: #fff;
-webkit-border-radius: 2px;
border-radius: 2px;
outline: none;
}
.mds-box-0001:hover,
.mds-box-0001:focus
{
-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
-o-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
}
Material Design Demonstration Bounding Box Card
Box container with additional shadow effect.
.mds-box-0002
{
display: block;
padding: 1px 17px;
max-width: 100%;
width: 100%;
-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
-o-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
-webkit-transition: box-shadow .3s ease-in-out;
-moz-transition: box-shadow .3s ease-in-out;
-o-transition: box-shadow .3s ease-in-out;
transition: box-shadow .3s ease-in-out;
background-color: #fff;
-webkit-border-radius: 2px;
border-radius: 2px;
outline: none;
}
.mds-box-0002:hover,
.mds-box-0002:focus
{
-webkit-box-shadow: 0 3px 5px -1px rgba(0,0,0,.14), 0 6px 10px 0 rgba(0,0,0,.098), 0 1px 18px 0 rgba(0,0,0,.084);
-moz-box-shadow: 0 3px 5px -1px rgba(0,0,0,.14), 0 6px 10px 0 rgba(0,0,0,.098), 0 1px 18px 0 rgba(0,0,0,.084);
-o-box-shadow: 0 3px 5px -1px rgba(0,0,0,.14), 0 6px 10px 0 rgba(0,0,0,.098), 0 1px 18px 0 rgba(0,0,0,.084);
box-shadow: 0 3px 5px -1px rgba(0,0,0,.14), 0 6px 10px 0 rgba(0,0,0,.098), 0 1px 18px 0 rgba(0,0,0,.084);
}
Material Design Demonstration Bounding Box Card
Box container with additional shadow effect.
/* card frame using z1 and z3 box shadow styles */
.mds-box-0003
{
display: block;
padding: 1px 17px;
max-width: 100%;
width: 100%;
/* z1 level box shadow */
-webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084);
-moz-box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084);
-o-box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084);
box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084);
-webkit-transition: box-shadow .3s ease-in-out;
-moz-transition: box-shadow .3s ease-in-out;
-o-transition: box-shadow .3s ease-in-out;
transition: box-shadow .3s ease-in-out;
background-color: #fff;
-webkit-border-radius: 2px;
border-radius: 2px;
outline: none;
}
.mds-box-0003:hover,
.mds-box-0003:focus
{
-webkit-box-shadow: 0 3px 5px -1px rgba(0,0,0,.14), 0 6px 10px 0 rgba(0,0,0,.098), 0 1px 18px 0 rgba(0,0,0,.084);
-moz-box-shadow: 0 3px 5px -1px rgba(0,0,0,.14), 0 6px 10px 0 rgba(0,0,0,.098), 0 1px 18px 0 rgba(0,0,0,.084);
-o-box-shadow: 0 3px 5px -1px rgba(0,0,0,.14), 0 6px 10px 0 rgba(0,0,0,.098), 0 1px 18px 0 rgba(0,0,0,.084);
box-shadow: 0 3px 5px -1px rgba(0,0,0,.14), 0 6px 10px 0 rgba(0,0,0,.098), 0 1px 18px 0 rgba(0,0,0,.084);
}
Material Design Demonstration Bounding Box Card
Box card/frame container using the .mds-box-0004 CSS class.
/* card frame using z2 and z4 box shadow styles */
.mds-box-0004
{
display: block;
padding: 1px 17px;
max-width: 100%;
width: 100%;
-webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
-moz-box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
-o-box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
-webkit-transition: box-shadow .3s ease-in-out;
-moz-transition: box-shadow .3s ease-in-out;
-o-transition: box-shadow .3s ease-in-out;
transition: box-shadow .3s ease-in-out;
background-color: #fff;
-webkit-border-radius: 2px;
border-radius: 2px;
outline: none;
}
.mds-box-0004:hover,
.mds-box-0004:focus
{
-webkit-box-shadow: 0 5px 5px -3px rgba(0,0,0,.14), 0 8px 10px 1px rgba(0,0,0,.098), 0 3px 14px 2px rgba(0,0,0,.084);
-moz-box-shadow: 0 5px 5px -3px rgba(0,0,0,.14), 0 8px 10px 1px rgba(0,0,0,.098), 0 3px 14px 2px rgba(0,0,0,.084);
-o-box-shadow: 0 5px 5px -3px rgba(0,0,0,.14), 0 8px 10px 1px rgba(0,0,0,.098), 0 3px 14px 2px rgba(0,0,0,.084);
box-shadow: 0 5px 5px -3px rgba(0,0,0,.14), 0 8px 10px 1px rgba(0,0,0,.098), 0 3px 14px 2px rgba(0,0,0,.084);
}
