I noticed over at Rob's new Xset design that he had really neat rounded corners for all his boxes. I thought that was a neat effect to soften the hard edges of most common designs.
I've been poking around the last week or so trying to look at different methods for making these rounded corners. I discovered several different methods, but none that are really fast and easy. All methods involved images and adding 1 or more div classes to your CSS and Main Index Template. All but one method were static width solutions that would not resize with a liquid width column.
Until I ran across this gem while I was looking at some WordPress templates.
-moz-border-radius: 10px;This code, inserted after the other border declarations in that div will result in a bordered box with rounded or radiused corners. This will only display in Mozilla browsers. I guess you could say it is a bonus for using a standards compliant browser.
If you want to selectively insert radiused corners, you would use the following code to achieve a radius on each corner of the box.
-moz-border-radius-topleft: 10px;It appears to me (on my monitor anyway) that the bottom radii render a a bit more jagged than the top radii for some reason. Maybe it's my video driver or just something on my end.
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
Below is a thumbnailed screen shot from Madfish Willie's Cyber Saloon. I went kind of crazy and radiied everything with a corner. All the radii are 10px, the comments are 9px, and the comment numbers are 8px top and 9px bottom.
Next lesson:
Making a little icon thingy that displays in the adddress bar and/or the Mozilla tabs beside your blog name!
If you are using Mozilla, you can see a better sample of the effects by looking at my skins - Purple Lines & Purple Lines Mozilla.
If you are not using Mozilla, I highly recommend dwonloading and installing. Then, mess around with it a little bit. Make sure to go through all the menus and look at the neat stuff there. Whatever you do, get off that POS IE from Microsoft.
Posted by Madfish Willie at May 31, 2004 05:32 AMI'm using the ALA custom corners technique but it was a bitch to implement. If you dot mind IE users not getting the full effect then using Moz Styles is the way to go.
Posted by Rob at May 31, 2004 03:42 PMI saw one that used images for the top an bottom of the sidebar elements, but that was a fixed width solution. That was the easiest all-around solution for a fixed width element. Sadly, nothing that eloquent for liquid width elements.
As far as IE users, they just have to miss out for now.
Posted by Madfish Willie at May 31, 2004 06:43 PMCool.
I'm planing to do rounded corners in my new layout, and this makes it much much easier.
And people who persist in using IE deserve what they get. Or in this case, don't get.
Posted by Pixy Misa at June 2, 2004 07:26 AMElectricity is actually made up of extremely tiny particles called electrons, that you cannot see with the naked eye unless you have been drinking. Dave Barry (1947
Posted by credit card bad credit uk at November 22, 2004 06:51 PMBuy discount ugg shoes
cheap ugg shoes
cheap ugg
ugg rainier
buy ugg
ugg usa
discount ugg boots
ugg 5825
ugg shoes sale
ugg sundance
ugg shoes
cheap ugg boots
ugg 5815
ugg sale
ugg uk
ugg knightsbridge
womens ugg boots
ugg boots
ugg australia
ugg 5819free shipping
