Shadow Demo

index.slim

.container
  .shadow.i1
    .title Shadow 01
  .shadow.i2
    .title Shadow 02
  .shadow.i3
    .title Shadow 03
  .shadow.i4
    .title Shadow 04
  .shadow.i5
    .title Shadow 05
  .shadow.big.i6
    .title Shadow 06
  .shadow.big.i7
    .title Shadow 07

shadow-demo.markdown

Shadow Demo

Just a simple CSS shadow demo. Based off of this wonderful PSD: https://creativemarket.com/Rhett/18-Shadows-for-web-images-and-sliders

A Pen by Stephen Zuniga on CodePen.

License.

style.scss

$back: #dedede;
$white: #fff;

body {
  background: $back;
  padding-bottom: 50px;
}
.container {
  font-family: Helvetica, Arial, sans-serif;
  margin: auto;
  max-width: 1000px;
}
.shadow {
  background: $white;
  color: $white;
  margin-top: 50px;
  padding: 5px;
  position: relative;

  &:before,
  &:after {
    content: "";
    height: 20px;
    position: absolute;
    z-index: -1;
  }
  .title {
    background-image: radial-gradient(lighten(#3c788d, 25%), #3c788d);
    background-position: 0 100%;
    background-size: 100% 200%;
    padding: 30px 5px 5px;
    text-align: right;
  }
}
.big .title {
  padding-top: 300px;
}
.i1 {
  &:before,
  &:after {
    bottom: 15px;
    box-shadow: 0 20px 15px rgba(0, 0, 0, 0.5);
    width: 50%;
  }
  &:before {
    left: 2%;
    transform: rotate(-3deg);
  }
  &:after {
    right: 2%;
    transform: rotate(3deg);
  }
}
.i2 {
  &:after {
    border-radius: 50%;
    bottom: 15px;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.5);
    left: 5%;
    width: 90%;
  }
}
.i3 {
  &:after {
    border-radius: 50%;
    bottom: 0;
    box-shadow: 0 25px 15px rgba(0, 0, 0, 0.5);
    height: 10px;
    left: 5%;
    width: 90%;
  }
}
.i4 {
  &:after {
    bottom: 0;
    box-shadow: 0 40px 15px rgba(0, 0, 0, 0.5);
    height: 30px;
    left: 10%;
    width: 80%;
    transform: perspective(30em) rotateX(60deg);
  }
}
.i5 {
  &:before {
    bottom: 25px;
    box-shadow: 0 20px 5px 10px rgba(0, 0, 0, 0.6);
    height: 20px;
    left: 40%;
    width: 30%;
    transform: skewX(-80deg) rotate(-4deg);
  }
  &:after {
    bottom: 25px;
    box-shadow: 0 20px 5px 10px rgba(0, 0, 0, 0.6);
    height: 20px;
    right: 40%;
    width: 30%;
    transform: skewX(80deg) rotate(4deg);
  }
}
.i6 {
  &:before {
    border-radius: 50%;
    box-shadow: -15px 0 15px rgba(0, 0, 0, 0.5);
    height: 90%;
    left: 10px;
    top: 5%;
    width: 20px;
  }
  &:after {
    border-radius: 50%;
    box-shadow: 15px 0 15px rgba(0, 0, 0, 0.5);
    height: 90%;
    right: 10px;
    top: 5%;
    width: 20px;
  }
}
.i7 {
  &:before {
    bottom: 30px;
    box-shadow: -25px 25px 15px 5px rgba(0, 0, 0, 0.5);
    height: 80%;
    left: 30px;
    width: 50%;
    transform: skewX(-8deg) rotate(-4deg);
  }
  &:after {
    bottom: 30px;
    box-shadow: 25px 25px 15px 5px rgba(0, 0, 0, 0.5);
    height: 80%;
    right: 30px;
    width: 50%;
    transform: skewX(8deg) rotate(4deg);
  }
}