SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast morrty's Avatar
    Join Date
    Oct 2008
    Location
    Ontario, Canada
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gradient lined Menu Bars

    Wish I had saved a link to a site with these but what I am looking for is a tutorial or someone that can tell me the tool used to make those diagonal lines in a background/nav bar.

    They are always slanted and then adding a gradient to them makes it look very nice.

    I will try to find a site that uses them.

  2. #2
    SitePoint Enthusiast morrty's Avatar
    Join Date
    Oct 2008
    Location
    Ontario, Canada
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I found a site that uses it:

    nextnewnetworks.com

    The top blue bar.

    Any tuts on this?

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    U dont need a tut on this.....its just an image which is put as a background image of a <td>
    check it out
    http://nextnewnetworks.com/images/bg.gif
    Last edited by Dan Schulz; Oct 14, 2008 at 13:02. Reason: removed fake signature

  4. #4
    SitePoint Enthusiast morrty's Avatar
    Join Date
    Oct 2008
    Location
    Ontario, Canada
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    right... but I don't want to copy this site. I want to know how to make that effect with my own sites colour scheme.

  5. #5
    SitePoint Enthusiast morrty's Avatar
    Join Date
    Oct 2008
    Location
    Ontario, Canada
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm... I think I figured it out.

    For anyone wondering how to do this type of thing follow this site.

    http://cornoncob.com/tutorials/ihtut...elPatterns.php

    It has a very nice tut on making patterns so all I did was take an 8x25 pixel transparent background and made diagonal lines. Saved it as a pattern then made an 8x125 pixel image and filled it with the pattern I just created.

    Not sure if this is the correct way of doing it but seems to work pretty good.

    After I did the pattern I just made another layer with a gradient color and it worked out good.

    Here is what I ended up with:

    The actual image:



    And then repeat across:


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
  •