SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to emulate Wikipedia top menu (borders fade to transparent at the top)

    Would it be possible to achieve this effect without images, purely with CSS?

    Notice how the top horizontal menu items have blue borders that fade to transparent at the top?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yeah, just have a regular <li> and make that fading part of an image. Just apply the image to the <li>

    If you're fading it to white, you'll hae to make sure the page background is also white otherwise it'll just look silly.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    Would it be possible to achieve this effect without images, purely with CSS?
    Yes, with CSS3 you can do that, but it's not supported in older browsers.

    http://css-tricks.com/css3-gradients/
    http://tools.westciv.com/gradients/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, with CSS3 you can do that, but it's not supported in older browsers.

    http://css-tricks.com/css3-gradients/
    http://tools.westciv.com/gradients/
    Oh, whoops. I didn't see the "purely CSS" part he mentioned... D:
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •