Forums

ManOfBliss

Hello,

My current drop shadow is looking like this: http://www.becomealivinggod.com/catalog/newindex3b.html

I want it to look like this: http://www.apple.com/mac/

My current CSS code is this: -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; -moz-box-shadow:7px 3px 10px -7px #888, -7px -3px 10px -7px #888; -webkit-box-shadow:7px 3px 10px -7px #888, -7px -3px 10px -7px #888; box-shadow:7px 3px 10px -7px #888, -7px -3px 10px -7px #888;

And I can't figure out how to make them match.

Please help! Thank you. Timothy

Watson90

Hows this?

http://codepen.io/Watson90/full/CGDKb

Paulie_D

Inspect Element in Chrome shows

   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;

http://codepen.io/joe/pen/uiqhD

Watson90

Add this to your bodyBox class;

box-shadow: 0px 1px 3px #888;
-moz-box-shadow: 0px 1px 3px #888;
-webkit-box-shadow: 0px 1px 3px #888;

Paulie_D

@Watson90

You mean:

-moz-box-shadow: 0px 1px 3px #888;
-webkit-box-shadow: 0px 1px 3px #888;
box-shadow: 0px 1px 3px #888;

Always gotta put the unprefixed last. :)

...and does #888 = rgba(0, 0, 0, 0.3) ?

Watson90

Dammit! I always get confused about that. Must remember: Unprefixed last Unprefixed last Unprefixed last

Paulie_D

Take a Demerit and sit in the corner!

;)

ManOfBliss

OMG works like a charm. Looks outstanding. Thank you!

treehouse : what would you like to learn today?

Forums

[Solved] Drop Shadowing Correctly