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,621
    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.
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 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/

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    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:
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!


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
  •