mu.nu - Fighting attention deficit disorder wherever it - ooh, shiny!
May 31, 2004
Mozilla Madness - Radius Corners
Next lesson:
Making a little icon thingy that displays in the adddress bar and/or the Mozilla tabs beside your blog name!
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. 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.
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
Next lesson: Making a little icon thingy that displays in the adddress bar and/or the Mozilla tabs beside your blog name!
Posted by: Madfish Willie at 05:07 AM | Comments (123) | Add Comment | Trackbacks (Suck)
1
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.
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 AM
2
I'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 PM
3
I 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.
As far as IE users, they just have to miss out for now.
Posted by: Madfish Willie @ at May 31, 2004 06:43 PM
4
Cool.
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.
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 02, 2004 07:26 AM
5
I am speechless. This can be ralph lauren outlet a excellent blog site and incredibly participating too. Outstanding work! That is not seriously ralph lauren polo shirts much coming from an beginner writer like me, but it is all I could think after enjoying your posts. Wonderful grammar and vocabulary. Not like other weblogs. You genuinely know what you’re talking about as well. So very much that you simply produced me wish to discover far more. Your blog page has develop into a stepping stone for me, my buddy. Polo Ralph Lauren Outlet Give thanks to you for your articulate quest. I seriously enjoyed the 27 posts that We’ve learn so far. Ralph Lauren
Posted by: ralph lauren outlet @ at June 30, 2011 07:03 AM
Processing 0.0, elapsed 0.0095 seconds.
22 queries taking 0.0065 seconds, 27 records returned.
Page size 10 kb.
Powered by Minx 0.8 beta.