×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
1
Language: CSS
Posted by: Philip Rehberger
Added: Sep 14, 2016 12:12 AM
Modified: Sep 14, 2016 1:59 AM
Views: 8
  1. ul.box {
  2.     position: relative;
  3.     z-index: 1; /* prevent shadows falling behind containers with backgrounds */
  4.     overflow: hidden;
  5.     list-style: none;
  6.     margin: 0;
  7.     padding: 0;
  8. }
  9. ul.box li {
  10.     position: relative;
  11.     float: left;
  12.     width: 250px;
  13.     height: 150px;
  14.     padding: 0;
  15.     border: 1px solid #efefef;
  16.     margin: 0 30px 30px 0;
  17.     background: #fff;
  18.     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  19.     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  20.     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  21. }
  22. ul.box li:before,
  23. ul.box li:after {
  24.     content: '';
  25.     z-index: -1;
  26.     position: absolute;
  27.     left: 10px;
  28.     bottom: 10px;
  29.     width: 70%;
  30.     max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
  31.     max-height: 100px;
  32.     height: 55%;
  33.     -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  34.     -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  35.     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  36.     -webkit-transform: skew(-15deg) rotate(-6deg);
  37.     -moz-transform: skew(-15deg) rotate(-6deg);
  38.     -ms-transform: skew(-15deg) rotate(-6deg);
  39.     -o-transform: skew(-15deg) rotate(-6deg);
  40.     transform: skew(-15deg) rotate(-6deg);
  41. }
  42. ul.box li:after {
  43.     left: auto;
  44.     right: 10px;
  45.     -webkit-transform: skew(15deg) rotate(6deg);
  46.     -moz-transform: skew(15deg) rotate(6deg);
  47.     -ms-transform: skew(15deg) rotate(6deg);
  48.     -o-transform: skew(15deg) rotate(6deg);
  49.     transform: skew(15deg) rotate(6deg);
  50. }