Grow your CSS skills. Land your dream job.

Navigation .. borders? sorta.. css help

  • # June 18, 2010 at 3:04 pm

    Hi guys…

    I need help…

    I have this designed in Photoshop, and im coding it.

    Now I have made the buttons with the background
    the rollover with the darked green gradient

    Now the button separators are 10% soft light

    If i make border-left:1px solide #…. <some dark green

    but it doesnt look good…
    so could i cut 2px of the separator and put it as a border?

    # June 18, 2010 at 3:25 pm

    That’s what I would do. I would use a border on the left and right of each button, then use a background image for the background of each button. This would mean that the separators would not be gradiated (<–what’s gradiated mean?), but it would be hard to notice.

    Assuming your code looks something like this:

    The CSS would look like this (in addition to all your current declarations):

    Code:
    ul li a {border-left: 1px solid #283711; border-right: 1px solid #48641d;}

    You could even change the colors on the hover state if you’re inclined.

    # June 18, 2010 at 4:44 pm

    sorry i meant gradient (color fades from light green to dark green)
    [img]http://www.outbackphoto.com/workflow/wf_74/gradient.jpg[/img]

    ^ simple gradient example..

    well, this is right now

    Code:
    #nav a{
    height:38px;
    display:block;
    padding-right:15px;
    padding-left:15px;
    color:white;
    font-family:verdana;
    font-size: 11px;
    font-weight:bold;
    text-decoration:none;
    }
    #nav a:hover {
    background-image:url(‘images/nav_hover.png’);
    }

    and i did do the border left and border right before, but its does not look as good.
    I start with
    [light color on top]
    [fades]
    [dark color on bottom]

    if i use a lighter green.. its too light for the bottom… but good on top
    if i use a dark green its too dark for the top, but good on bottom.

    so i was wondering if i can crop the 2px separator in photoshop, and somehow use it

    # June 21, 2010 at 10:36 am

    You could crop those 2 pixels and set them as the background picture for the ul, then leave a 1px space on the left and right side of each button. Make sense?

    # June 22, 2010 at 1:03 pm

    can u give me a css code example.. i dont think i understood that one fully.. :(

    # June 22, 2010 at 1:48 pm

    Using cmoist’s post….

    Assuming your code looks something like this:

    The CSS would look like this (in addition to all your current declarations):

    Code:
    ul#menu {
    background-image:url(image.gif);/*Make this your small gradiant picture*/
    background-repeat:repeat-x;
    }
    ul#menu li {
    width:70px;/*change to whatever*/
    height:30px;/*change to whatever*/
    background-image:url(image2.gif);/*Make this your button picture*/
    background-repeat:none;
    margin:0px 1px;/*1px margin left & right*/
    }

    See how that works? Each button has a margin, and in the gap you see the background of the ul.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".