CSS - "How'd they do that?"

Discussion in 'Web Design and Development' started by bbarnhart, Jan 1, 2009.

  1. bbarnhart macrumors 6502a

    bbarnhart

    Joined:
    Jan 16, 2002
    Location:
    Stilwell, Kansas
    #1
    On http://www.apple.com/mac in the 'Get a Mac' column, the left and right borders are images. It's not clear to me how they got two background images to work or how they pushed one of the images to the right to form the right border. Any ideas?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Using FireBug I found 3 spots where they declare, using the background property, a tall single pixel wide graphic. These work together to get the two borders. They are located in file mac.css on lines 32, 33, and 34 if you want to take a closer look. Hope that helps.
     
  3. mxptt macrumors member

    Joined:
    Aug 9, 2008
    #3
    they can either do that using the border background property or the lazy way which would be three divs all floated left making the outer two only 1 pixel wide with the repeated image to create the border effect ...
     
  4. bbarnhart thread starter macrumors 6502a

    bbarnhart

    Joined:
    Jan 16, 2002
    Location:
    Stilwell, Kansas
    #4
    I figured out how they accomplished it. Basically, a 150 x 1 transparent image with a single pixel on the left and right. This image is then repeated in the x plane as a background image. I couldn't see the solution at first because when I looked at this graphic, I could not see that the image was only two pixels.
     

Share This Page