|
rdouglass -> RE: Rounded..... (7/10/2006 14:35:24)
|
I use a version of rounded corners that looks like this:
Markup:
<!--go button div-->
<div class="goBox">
<div class="goDiv1"></div>
<div class="goDiv2"><a href="#">GO!</a></div>
<!--corners for go cell-->
<div class="goBoxFirstCorner"></div>
<div class="goBoxSecondCorner"></div>
<div class="goBoxThirdCorner"></div>
<div class="goBoxFourthCorner"></div>
<!--end corners for go cell-->
</div>
<!--end go button div-->
CSS:
.goBox {
position:absolute;
top:158px;
left:240px;
height:30px;
width:45px;
padding:0px;
font-size:12px;
color:white;
font-weight:bold;
}
.goBoxFirstCorner {
position:absolute;
top:0px;
left:0px;
width:10px;
height:10px;
background: url(images/tl_tran.gif) 0 0 no-repeat;
}
.goBoxSecondCorner {
position:absolute;
top:20px;
left:0px;
width:10px;
height:10px;
background: url(images/bl_tran.gif) 0 0 no-repeat;
}
.goBoxThirdCorner {
position:absolute;
top:20px;
right:0px;
width:10px;
height:10px;
background: url(images/br_tran.gif) 0 0 no-repeat;
}
.goBoxFourthCorner {
position:absolute;
top:0px;
right:0px;
width:10px;
height:10px;
background: url(images/tr_tran.gif) 0 0 no-repeat;
}
.goDiv1 {
position:absolute;
left:0px;
height:10px;
background:#3399CC;
top:10px;
width: 33px;
padding-left: 12px;
margin-top:0px;
}
.goDiv2 {
position:absolute;
left:10px;
height:24px;
background:#3399CC;
top:0px;
width: 22px;
padding-left:4px;
padding-top:6px;
}
and this code is running on this sample page:
http://www.rogerdouglass.com/rhino/
to see the whole effect. It does use 4 gifs but can fit virtually any size box. The goDiv1 and goDiv2 are 'fillers' but IMO this is quite versitile.
Hope it helps.
|
|
|
|
