Close ColourMod

Example:

class name:
background color:
foreground color:
Other sites you should visit

Free Premium WordPress ThemesCSS Rounded Corners

What?

Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript.

Why?

I needed a way to create anti-aliased round corners without the extra server calls that are incurred when using external JavaScript files or images. When your websites are serving millions of files a day you start to pay attention to how many files a particular page needs in order to load.

There are solutions for rounded corners using pure CSS. There are solutions that create anti-aliased corners. There are solutions that don't require JavaScript. But to my knowledge, there has yet to be a pure CSS solution for rounded corners that does not require images or JavaScript. After looking, I decided to just create one myself. I'm not much of a programmer, but it was actually a lot of fun figuring out the math involved and learning arrays. In the end I ended up with 3 functions in under 20 lines of code total, so I'm quite happy with myself.

I liked Nifty Corners but as anyone who has used it knows, it has its limitations. Originally it didn't attempt to create anti-aliased corners, but it is now in its third version. It makes a better attempt at killing the jaggies this time around, but only fakes it -and as a result- looks only marginally better. I would like to say though, that the actual code behind it is exceptional and the creators skills far surpass mine. My solution is a different kind of solution entirely, so it's like comparing apples and oranges.

Seeing as how the first complaint of Nifty Corners is always the jagged resulting corners, it didn't take long for several improved versions to come along. The one I like (because of its small size), is this solution by editsite. It has its limitations, and requires your visitors to have javascript enabled, but it's relatively compact.

There's also the popular ThrashBox. I like Ryan, he's a nice guy and the Thrashbox is a very creative solution. But... It requires 2 to 4 images, and in many cases you will need VERY large images to ensure your page layout doesn't break the boxes. View the bottom of Ryans page for an example of this problem.

What's New?

Now in its second version, Spiffy Corners finally has selectable radii. I kept the options fairly trimmed down with only 3, 5 and 9 pixels as any larger and the markup gets unbarable to look at. I've also added in a color picker to make faster work of chosing a color if you don't know the exact colors you're after.

What Next?

I plan on writing a tutorial on how I created it for all those interested in learning a bit O' php, so check back soon.

Credits & Links

Creator: Greg Johnson

Inspiration: Alessandro's Nifty Corners,
Ryan's Thrashbox,
Editsite's Rounded Corners

Sponsored Links

License:

May be used for personal and business use, but may never be sold or used in a product that is not free without my consent.

If you found this useful, return the favor by linking to us:

<a href= "http://www.spiffycorners.com">Rounded CSS Corners</a>

Questions or Comments?

moc.liamg@nosnhoJ.gerG

Also check out spiffyBOX:

Spiffy Box - get spiffy with a single image