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.

Historically, centering a div tag in CSS and HTML has been difficult due to idiosyncrasies in the way certain browsers (IE, I’m looking at you) have handled CSS.

However, as we approach the half way point of this decade, Mozilla and Chrome have become the defacto standard, and it is a lot easier.

To center a div in CSS3, you must

• Define a width and a height
• Set position to absolute
• Set top, bottom, left and right to 0
• Set margin to auto

.centeredXY {
  width: 500px;
  height: 400px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Have fun!