Posts tagged "css_tip"

Rounded Corners Using CSS

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #ddd}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

My pal Ben Simon sent me this URL a while ago that describes a technique for creating rounded corners using just CSS and no images. Check out Nifty Corners for the full scoop. Hopefully you are
looking at an example right now, unless it doesn’t work in your
browser for some reason (I haven’t done extensive testing). If it
doesn’t work, leave a comment here so people will know the compatibility
limitations.

Update: I have no idea why this wouldn’t work in IE. An isolated version of the code works fine as do the examples. I suspect it’s just buggy IE rendering, but if anyone can figure out why it’s not working, and can suggest a fix, I will publicly shower him or her with praise.

CSS XML Buttons

It’s not rocket science, but here’s an easy way to make XML buttons(or any kind of button you want) using CSS. In other words, this
button (XML) is not an image, but is done all with CSS. I like using
CSS buttons when I can because it gives me a lot of control over
the look, and I can change the label easily without opening an image
editing application. See? Christian Cantrell

Anyway, here’s the CSS class:

.xml-icon {
padding: 0px 3px 1px 3px;
margin: 0;
text-align: center;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #fff;
background-color: #ff6600;
border: 1px solid;
border-color: #ffc8a4 #3f1a01 #3f1a01 #ffc8a4;
cursor: pointer;
}