Thursday, December 14th, 2006
Googles Rounded Corner Generator
<p>Zach has picked up on google’s own corner generator.Google probably doesn’t want this to be a corner service, but for now you can create your own google-esque corners with URLs such as:
http://groups-beta.google.com/groups/roundedcorners?c=999999&bc=white&w=4&h=4&a=tr
The parameter list:
- c – the color, as either a name or a CSS-style hex color spec (RGB or RRGGBB) sans #. The color names are taken from the CSS2 spec and are as follows: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow (thanks, anonymous commenter)
- bc – the background color, same acceptable input as c. One twist: if you leave out the bc parameter entirely, the background is transparent.
- h – height in pixels. If you leave it out, uses a default of 8.
- w – width in pixels. If you leave it out, uses a default of 8.
- a – which corner to generate; tl is top left, tr is top right, bl is bottom left, br is bottom right
Related Content:
4.1 rating from 112 votes
oops!
apparently, they’re PNG’s, too.
my bad — of course they are. i’ll stop talking now.
that’s quite interesting, but makes alot of sense as far as expediting development.
That’s so cool!
While this could be helpful in deploying web applications quickly, I strongly urge developers that are considering utilizing this option look into the wealth of options that are available prior to implementing this solution. What happens the day that Google decides to remove this functionality?
It would be interesting to see the code behind this.
How to set all corners rounded?
What’s with the fascination in rounded corners?
You can generate corners up to 15000x15000px in size. I do not think that is what google planned to do with their cpu power.
Dave b,
Rounded corners are the new black.
ah, i checked the headers out, it always sends a 200 not even a 304 so images dont get cached… and hence extra traffic and rendering
@DRX Love the Whale.
C’on, it’s so easy to build this thing up! We are using ImageMagick for “graphic web services” (non-XML) like resizing other webs’ images, generating TrueType text images for titles (of course, with their CSS-hidden accesibility-minded version), captchas generation, graphic buttons (with text) and things like that… with cache control, and we’re doing it on Windows (not Linux!)
I recommend you to look again at what you can do with ImageMagick. It’s a perl!
(by the way, what I meant with “not linux!” was that it CAN be done in Windows :) ; we use ImageMagick on windows because of better rendering of TrueType fonts…
For those asking how to go about implementing something like this, here’s the way I do similar, simple things:
.jsp outputs SVG
SVGTranscoderFilter (based on Batik) transcodes SVG to PNG, JPEG, etc.
Alternatively for more complex things:
.jsp or other source outputs XML document
XSLTFilter translates XML to SVG
SVGTranscoderFilter transcodes to PNG, JPEG, etc.
@DRX
Why not complete your picture with a Google background:
BODY {background-image: url(http://groups-beta.google.com/groups/roundedcorners?c=00ccff&bc=00ccff&w=1&h=1&a=tr)}
:)
I know rounded corners are SO web 2.0 and all, but I don’t see the insane fascination with them. It’s a fad. Once the fad is past you’ll have to re-do your site because it’s so dated.
Thanks, Thanks, Thanks
Dion — Thanks for the post. Great stuff!
drx — Absolutely love the whale!
To all of those who have posted something along the lines of “what’s with the fascination with rounded corners?”
Well, you either like them or you don’t. A fad? That’s what one of my old bosses said about grey dialog box backgrounds and chiseled dividers back in 1993.
Need a striped background or header for your Web2.0 app? Try out this: http://www.stripegenerator.com
it’s probably php. with the gd library, it’s a cinch to do rounded corners…i think ill make myself one
…that whale is hilarious. nice work, drx!!! haha
See at the top box at the site. Rounded box without image.
I want to get google’s rounded corners sources code.
Help me.