Help
Some of us usually put a button with rounded corners on our web pages. We take the whole button as an image and insert it into the page. But if we have many such buttons, then the size of the page is increased a lot. So, here I have a trick by which you can cut small parts of the button and let CSS generate the whole button.
I’ve cut the four small rounded corners into four different images and taken them as a background in four divs and applied certain styles to those divs.
So, the HTML goes like this.
<body>
<div class = "container">
<div class = "cornerbl"><div class = "cornerbr"><div class = "cornertl"><div class = "cornertr">
</div></div></div></div>
</div>
</body>
And the CSS goes like this:
<style type = "text/css">
.container {
width:100px;
height:30px;
background-color: #0c0c0c;
}
.cornerbl {
width:100%; height:100%;
background: url(cornerbl.gif) 0 100% no-repeat;
}
.cornerbr {
width:100%; height:100%;
background: url(cornerbl.gif) 100% 100% no-repeat;
}
.cornertl {
width:100%; height:100%;
background: url(cornerbl.gif) 0 0 no-repeat;
}
.cornertr {
width:100%; height:100%;
background: url(cornerbl.gif) 100% 0 no-repeat;
}
</style>
Source: http://www.designpal....unded-corners/
Page 1 of 1
TUTORIAL: Trick to put Optimized round cornerd buttons
Rate Topic:
- ← TUTORIAL: Custom URL with PHP (Permalinks)
- Web Design Tutorials
- TUTORIAL: Changing hair color in Photoshop →
Share this topic:
Page 1 of 1