Diffused Drop Shadow

Posted 4 months ago     545      css sass

Here's an example of the mixin (using .sass syntax but this can be easily converted)

// Mixin =drops position: relative &:before transition: box-shadow .2s linear bottom: 10% box-shadow: 0px 2px 40px rgba(#000, .3) content: '' height: 40% left: 15% position: absolute width: 70% z-index: -1 &:hover:before bottom: 0 box-shadow: 0px 2px 40px rgba(#000, .5)

And now, just include the mixin on an element you want to have the shadow. For fun, you can add in variables to control the color of the shadow but I'm keeping this basic for now.

.button +drops background: #fff color: #000 padding: 10px 40px text-decoration: none text-transform: uppercase

Basically using pseudo elements you can add a decent shadow that doesn't break the width of the element requiring a shadow.


There are no comments yet.

You need to be logged in to post comments.

Welcome to Snippet Repo!

Discover, share and save useful code snippets.

Join our community over over 2,000 members! Currently a 48% acceptance rate. Apply for membership →