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://nak5.com/downloads/roundedphp-2.0.zip
View the Demo:
http://nak5.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.
It’s also wise to implement the DD_belatedPNG fix to give IE6 a little kick in the rear:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
Steps:
- Download the package from the link above and unzip it.
- 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
- 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 | sh | 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 1 and 0.
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.
The demo has been listed by Google as “Blocked”.
Here is the message on the page:
[ Reported Attack Site!
This web site at nak5.com has been reported as an attack site and has been blocked based on your security preferences.
Attack sites try to install programs that steal private information, use your computer to attack others, or damage your system.
Some attack sites intentionally distribute harmful software, but many are compromised without the knowledge or permission of their owners. ]
I am in the process of fixing all the malware crap that hackers have left around my site. what a pain. Everything should be back to full working order soon.
Very cool!
How do I get the package like at http://nak5.com/demos/roundedphp
Would really like to use it at school.
Downloaded the zip, but it does not seem to provide a layout like at http://nak5.com/demos/roundedphp
Thank you.
Outstanding work!
the package does not provide a layout as seen on the demo page. the demo page is simply a user interface i built to illustrate the features and possibilities of the RoundedPHP package. RoundedPHP is used solely to create the rounded corner graphic you see in the demo page.
this is so great!!! thanks!!!
how to installation and use?
installation is easy, just request the file like you would an image. use query variables on the file to get the output you need. refer to the table above as to what variables are needed.
Hello,
it is very good. I will use this for a Joomla Template.
But I have a Probblem.
For Example: If I make a box for links or Modules (WordPress -> Sidebarwidgets) wich are fully resizeable, I have the topleft, top right, bottom left and the bottomright grafik, but I don’t have the grafics of the middle: topmiddle, rightmiddle, bottommiddle, leftmiddle wich must be repeated.
Do you understund what I mean?
Hi,
For those wanting borders. Here is what I did.
CSS
.innertop { background: url(/rounded.php?bgc=9ed58b&fgc=e2f1dc&si=t&bw=1&sh=s&w=780) no-repeat top left; }
.innerbottom { background: url(/rounded.php?bgc=9ed58b&fgc=e2f1dc&si=b&bw=1&sh=s&w=780) no-repeat bottom right; }
.innertop div, .innertop, .innerbottom div, .innerbottom {
width: 100%;height: 7px; font-size: 1px;
}
.innerbox { margin: 0; border-left:1px solid #000;border-right:1px solid #000;}
.outerbox { width: 780px; margin: 1em auto; background-color:#e2f1dc; }
HTML
My content
Thats it.
I just used 2 images as it created the whole top and bottom bar when I asked for the top and bottom. then used borders on the inner box to create the sides.
HTH someone.
Ciao
Andrew
Here is the HTML.
<div class=”outerbox”>
<div class=”innertop”></div>
<div class=”innerbox”>
My content
</div>
<div class=”innerbottom”></div>
</div>
Wonder if anybody has given an effort of adding shadow effect to this wonderful script
Thanks
It’s been on my list of to-dos for a while, but i haven’t gotten around to it. hopefully i’ll get some time in the near future.
Been trying at it the whole day, and just pulled my last hair out…and its not even nearly as generic and nice as your code base, so I really applaud all your efforts to do shadows….will keep myself posted….hurray for shadows…
This is a great script!
But now for my dumb question… How do you download the code and images to produce this?