dev.kingthief

Rounded PHP is an API for creating perfect anti-aliased rounded corner images on-the-fly. Using the internal GD library in PHP 5+ and a simple set of query variables, a developer will have little need to store many different rounded corner images to use around a Web site.

I’m a strong believer in using images for rounded corners. Most of the css and javascript solutions I have seen involve a mess of unnecessary mark-up. Enough mark-up to be reminiscent of table layouts. The argument has always been, the fewer images the better. But in this case, extra mark-up has no viable benefit, in my opinion. Take, for instance, mobile platforms. Not only is it a completely new task to ensure your rounded corners even show up, but you have to hope they look the same. That’s the beauty of using images. Sure you can argue all day that lowering the number of requests made by a page will speed up load time. That’s an obvious fact. But 10k images won’t exactly make you sit and wait. And anyways, if Google can do it, why can’t you?

Not only does Rounded PHP provide you the ability to make smooth corners with borders, but you can also toggle the opacity of each color, change output formats, and choose different shapes. Shapes include the basic corner image in orientations top-left, top-right, bottom-left, and bottom-right, rounded rectangles of your chosen height and width, and the sides of a rounded rectangle (just the edge). Head over to the demo page to fully understand its power.

Download:
http://sourceforge.net/projects/roundedphp

View the Demo:
http://dev.kingthief.com/demos/roundedphp

Documentation

Installation and use should be fairly straightforward to any seasoned web developer. Follow the steps below and try a few of the examples provided to get Rounded PHP up and running on your site.

Steps:

1. Download the package from the link above and unzip/untar it.
2. Directly inside the RoundedPHP/ directory, you will find the rounded.php file. This is the only file you will need. The src/ directory contains the classes in individual files, but these are only used if you plan on extending the functionality on your own. Copy the rounded.php file to an accessible place in your http directory. For instance, I typically place it in public_html/assets/misc/rounded.php
3. While you develop your site, this file is requested in the “src” attributes of image tags and in css rules for background images, etc. The file returns an image, pure and simple, so pretend like you’re requesting a typical jpg or png file.

Implementation:

There are default values assigned to all attributes. Therefore, if you were to simply request the file with zero parameters, you would get this:

Here is an outline of the accepted parameters and their default values:

Param	Shorthand	Values	Default
format	f	png, jpg (jpeg), gif	png
antialias	aa	0, 1	1
shape	s	corner (c), rectangle (r), side (s)	c
orientation	o	tl (lt), tr (rt), bl (lb), br (rb)	tl
side	si	top (t), bottom (b), left (l) , right (r)	t
radius	r	1, 2, 3, … , n	10
borderwidth	bw	0, 1, 2, … , n	0
height	h	2, 3, 4, … , n	100
width	w	2, 3, 4, … , n	100
foregroundcolor	fgc	3 or 6 char hex code	cccccc
backgroundcolor	bgc	3 or 6 char hex code	ffffff
bordercolor	bc	3 or 6 char hex code	000000
transparentcolor	tc	3 or 6 char hex code	null
foregroundopacity	fgo	0, 1, 2, … , 100	100
backgroundopacity	bgo	0, 1, 2, … , 100	100
borderopacity	bo	0, 1, 2, … , 100	100

Notes:
The foreground is the color inside the arc (color of the corner). the background is the color outside the arc.

The side shape merely represents a sliver of a rounded rectangle, one side including the corners. Their dimensions are constrained based on orientation, radius, and height/width values. If you are working with a top or bottom side, a width must be supplied. The same principle is applied to left and right sides, where the height parameter is required.

It is recommended that you use the shorthand version of the parameters to keep the query string length to a minimum. However, you can use it in any way you wish. No units will need to be supplied to the values. Width, height, radius, border width, etc, are all measured in pixels. Opacity is measured in percent (0 being transparent). Anti-alias is boolean true or false, defined by 0 and 1.

Things to understand:
You can not have transparencies in jpeg format. for gif files, opacities are all set to 100%. If you would like a transparent color in a gif file, set the transparent color parameter accordingly.