Today you are in for a treat, as I am going to share my never-before published “secret recipe” for a CSS3 drop shadow that is easy to use and sure to wow clients!
This is actually a technique I adapted from After Effects that I learned from the amazing Video Copilot series, which is free.
The secret to this technique is it is actually two drop shadows.
One, that is a little bit off center.
box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.5);
And the other that is right behind it, and so faint you almost can’t see it.
box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.3);
These are actually very easy to combine in CSS3.
box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3), 0px 0px 2px 1px rgba(0,0,0,0.3);
Notice the comma there, that allows you to add as many shadows as you like!
Using that CSS you can create very interesting box shadows that are hardware-accelerated.