dresden_phoenix — 2011-08-22T15:27:37-04:00 — #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.
theraptor — 2011-08-22T15:58:30-04:00 — #2
Are you talking about the slim blue navigation bar? If so, poking around the source I found this:
-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.
EDIT: I created a quick JSFiddle for it here: http://jsfiddle.net/qGDes/1/.
dresden_phoenix — 2011-08-22T17:38:23-04:00 — #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...