SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,725
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)

    wow.. (irregular) box-shadow?

    In an UNRELATED answer post by POB, he provides a lin to this useful CSS eval tool. 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. #2
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Are you talking about the slim blue navigation bar? If so, poking around the source I found this:
    Code CSS:
    #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.

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

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,725
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •