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.
Discover, share and save useful code snippets.
Join our community over over 2,000 members! Currently a 48% acceptance rate. Apply for membership →