CSS & Round Corners: Making Accessible Menu Tabs
By Trenton Moss2004-06-27
Adding the left corner
|
|
We need to make a small image with the same colour:
- here's one I made earlier. Let's call this image "left-tab.gif" and place it into the background of this link:
a
{
color: #000;
background: #fb0 url("left-tab.gif") left top no-repeat;
text-decoration: none
}
This new command says that the background image should be "left-tab.gif", the image should be on the left, at the top, and it shouldn't be repeated - kind of obvious really. The result?
We're getting there, but we need to move that text over a bit. It's pretty simple to do with a bit of padding:
a
{
color: #000;
background: #fb0 url("left-tab.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
Tutorial Pages:
» CSS & Round Corners - The problem
» The solution
» Adding the left corner
» And the right corner
» The final touch
|
