Wow.. (irregular) box-shadow?

HTML & CSS
1

In an UNRELATED answer post by POB, he provides a lin to this useful CSS eval tool. [URL=“https://addons.mozilla.org/en-us/firefox/addon/dust-me-selectors/#”]https://addons.mozilla.org/en-us/firefox/addon/dust-me-selectors/

I have always liked the clean elegant( aesthetically and codewise ) design of the Mozilla pages. It’s a good source of inspiration; they really make the most of CSS3 properties. The one thing I could not figure out is how they managed the irregular box shadow effect in the main navigation w/o using any images or extra tags. It’s a subtle but nice effect.

2

Are you talking about the slim blue navigation bar? If so, poking around the source I found this:

#header {
     -moz-box-shadow: 0 3px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset;
}

This is what creates that subtle drop shadow effect.

The source is very interesting though, I’ll be exploring for awhile. :slight_smile:

EDIT: I created a quick JSFiddle for it here: http://jsfiddle.net/qGDes/1/.

3

well, am talking about the nav RIGHT BELOW “ADD ONS”
while adding a drop shadow is easy in CSS3, it’s hard to conbine… tone that the drop shadow for the anchor and and for the submenu do not actually cross…