I was looking at the Apple website and found their rounded corners really attractive and clean. I thought it was CSS3 but then when I visited apple.com in IE, the rounded corners are there. I looked at the markup but can't really make sense of it. I looked for a tutorial to help but I have not found one. Does anyone know of a non-CSS3 rounded corners technique much like what Apple uses?

3 answers

0
points

It's just an image: http://images.apple.com/global/nav/images/globalnavbg.png

Nothing really clever at all!

Answered over 6 years ago by Rich Bradshaw
  • I get that part for the menu, but what I was looking for the rounded corners for their content divs, much like what they have at the store for the navigation items and the items for sale Ygam Retuta over 6 years ago
0
points

Try viewing with images disabled, there are no rounded corners then, so it's all done with images.

apart from div#worldwide, which is CSS3 border radius

Answered over 6 years ago by Tony Crockford
0
points

Apple achieves this by making an image (which was shared above), and applying it as the background image for the entire div. Afterwards, depending on the state of the link, they would adjust the background-position accordingly. For instance:

    div.navigation {
     background-image: url('../images/navi.png');
     background-position: 0 0;
     height: 30px;
     width: 960px;
    }

    .navigation a {
     display: inline-block;
     height: 30px;
     width: 125px;
    }

    .navigation a:hover {
     background-image: url('../images/navi.png');
     background-position: 0px 30px;
    }

   .navigation a:active {
     background-image: url('../images/navi.png');
     background-position: 0px 60px;
    }

This isn't exactly how they wrote it, but it's pretty much the nature of it.

Answered over 6 years ago by Vinny Burgh