Skip to content

Instantly share code, notes, and snippets.

@rblakejohnson
Created July 1, 2013 17:12
Show Gist options
  • Select an option

  • Save rblakejohnson/5902700 to your computer and use it in GitHub Desktop.

Select an option

Save rblakejohnson/5902700 to your computer and use it in GitHub Desktop.
Lifted shadows
.lifted-box {
position: relative;
z-index: 1;
}
.lifted {
display: block;
position: relative;
}
.lifted:before,
.lifted:after {
position: absolute;
content: '';
z-index: -1;
left: 12px;
bottom: 10px;
width: 70%;
max-width: 180px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
box-shadow: 0 10px 8px rgba(0, 0, 0, 0.35);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg);
}
.lifted:after {
right: 12px;
left: auto;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment