CSS3 Multiple Box Shadows

Some of the coolest website effects I have seen come from CSS shadows. Namely the box shadow which in itself is cool, but when combined with other box shadows suddenly becomes very cool.

Let's break this down into baby steps.

Baby Step 1

Let's position a bright red shadow above and to the right of the white box with the blue border.

Lok at what a box shadow is made up of, by using a beautiful red shadow on an element.

.example_box_shadow.step_1 {
	/*              x-pos    y-pos    blur    spread    color       */
	box-shadow: 	46px     -22px    0       0         darkred;
}
Gorgeous right!
build Dev tools time build Open dev tools (F12 or Option,Command,I) dock right, then insepct the rectangle above to play with it.

bug_report Did you try using a negative blur and break the whole thing yet?

Baby Step 2

Lets see if we can get that shadow looking a litte more authentic. All we need to do is drop the opacity of the shadow color. Not using the opacity rule, but using the alpha channel on the shadow color. This time we will use black (0, 0 , 0) with a 80% alpha.

box-shadow: 
    0 -1px 6px 0 rgba(0, 0, 0, 0.8);
build Dev tools time build Try changing opacity to (0.3) and adjust the spread value to say 1px;

Baby Step 3

Now our shadow doesn't look god-aweful we can experiment with adidng another one on there. What the hell, lets do 3 colorful box shadows on it (with some spread this time), and you can try and make sense of it in dev tools.

box-shadow: 
    2px 13px 3px 1px rgba(220, 24, 24, 1), 
    0 -1px 6px 23px rgba(33, 50, 183, 1), 
    43px 13px 7px 14px rgba(222, 201, 82, 1);
I like turtles colors
And you thought a red shadow looked bad!
build Dev tools time build Open dev tools, insepct that rectangle and this time make it look good!

announcement Did you notice the use of commas to separate the rules. Failure to do this correctly will break the internet.

build Dev tools time build I have a white rectangle right below with commented out rules on it for you to practice on.

My comments engine is coming...one day. For now, drop me an email if you have stuff to get off your chest