Overpowered CSS3 Drop Shadow

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!

2014-04-07 09_30_45-Shapemaker_ Enjoy Shapes

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);

2014-04-07 09_23_49-Shapemaker_ Enjoy Shapes

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.

Centering A Div Vertically and Horizontally with CSS3

2014-04-07 08_51_21-Shapemaker_ Enjoy Shapes

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!

A Blog About Cool Stuff