Warping Drop Shadows with CSS3

Hey! It's me!

Warping Drop Shadows with CSS3

Posted on June 19th 2010

I was baffled by this article which claimed warping drop shadows weren’t possible in CSS3. I felt like I had to disprove that claim. Hence this post.

I present to you…

Warping Drop Shadows with CSS3

Warping Drop Shadows with CSS3

To be honest, it wasn’t much of a challenge. Anyone with basic knowledge of CSS3, its new box-shadow and transform properties, shouldn’t have trouble arriving at the same conclusion.

#warped
  position: relative
  z-index: 0
  padding: 0
  margin: 50px auto
  font-weight: normal
  line-height: 1.2
  text-align: center
  background: #fff
  width: 500px
  &:before, &:after
    position: absolute
    z-index: -1
  &:before
    content: ""
    text-align: left
    background: transparent
    bottom: 9px
    right: 10px
    width: 50%
    height: 40%
    +rotate(4deg)
    +box-shadow(rgba(0,0,0,0.7), 0px, 0px, 50px)
  &:after
    content: ""
    text-align: right
    background: transparent
    left: 10px
    bottom: 9px
    width: 50%
    height: 40%
    +rotate(-4deg)
    +box-shadow(rgba(0,0,0,0.7), 0px, 0px, 50px)

  .content
    background: #fff
    padding: 30px 0

… I used StaticMatic, here’s the source

As you may know, I love to use StaticMatic to whip up quick prototypes. I used the same for this prototype, if you’d like to take a look at the source, it’s on github.

Update: I optimized the code for less markup.

Discussion