Need help to explain this CSS part

Hi,

I am a beginner learning css now. I am seeking help for anyone ( knows css or css expert) to explain this part to me.

http://www.alistapart.com/articles/slidingdoors

The part on "Finishing Touches". It says to make image transparent and change the image link with each other. My head is spinning now.

 

I don't understand where your confusion is, perhaps you could point to the paragraph that is the problem. The only changing to image links is using the images with transparency added and use that as a "background" for the tabs.

 

I do not understand why it has to be transparent. Does he mean that i need to change the original image to transparent, all the 4 images? I thought the image background is already transparent.

And the link that is changed. All ( the 4 links), That is left, Norm and On, is change to right and right is change to left. i could not make any sense why it has to interchange the image links.

The article:


This part talks about the transparent of the image:
<< Finishing Touches

Keen eyes may have noticed white tab corners showing up in the previous example. These opaque corners are currently preventing the image in the back from showing through the left corner of the image in front. In theory, we could attempt to match the corners of the tab images with a portion of the background behind them. But our tabs can grow in height, which pushes the background behind them lower, shifting the background color we tried to match. Instead, we change the images, making the corners of our tabs transparent. If the curves are anti-aliased, we matte the edges to an average of the background color behind them.>>


This is the part where the right change to left and left change to right ( referring to the image):

<< However, we can’t leave it at that either, because our left-side image now gets pushed away from the left tab edge by the 9 pixels of padding we just added. Now that the inner edges of the left and right visible doorways butt up against each other, we no longer need to keep the left image in the front. So we can switch the order of the two background images, applying them to opposite elements. We also need to swap the images used for the current tab:

#header li {
float:left;
background:url("left.gif")
no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a, #header strong, #header span {
display:block;
background:url("right.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
}
#header #current {
background-image:url("left_on.gif");
}
#header #current a {
background-image:url("right_on.gif");
padding-bottom:5px;
}
>>