google's own cornershop
« previous entry | next entry »
Dec. 12th, 2006 | 03:31 pm
Because of cornershop, I've become a rounded-corner fanatic. Whenever I see pretty rounded corners used in webpage design, I rightclick and view them, or check 'em out in detail in xmag. I want to know if they're javascript, GIFs, PNGs. I want to see how nice the antialiasing is. I want to see if someone made them by hand or if they look auto generated.
That should explain how I stumbled across Google's rounded corner generator. I was looking at the Google Groups beta interface, and I had to see how they made their pretty rounded corners. Lo and behold, the URLs look like this:
http://groups-beta.google.com/groups/roundedcorners?c=999999&bc=white&w=4&h=4&a=tr
The URL above produces this:
A little small and boring, sure, but a bit of URL surgery later, and I was getting stuff like this:
- 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
I love it. I didn't immediately find an upper limit on height & width.
It doesn't seem like the hostname matters much; I used www.google.com, groups.google.com, and finance.google.com and they all worked.
I was pleased to see these are almost pixel-for-pixel identical with corners produced by cornershop:
One difference: the Google graphics aren't symmetrical! If you rotate and flip them, the colors don't match up exactly. I'm guessing that's because the graphics may have independent height and width.
Reminds me of Amazon's image generation on a smaller scale.
from: anonymous
date: Dec. 13th, 2006 07:37 am (UTC)
Link
I can't imagine what google would say if people start linking to images like this: http://groups-beta.google.com/groups/rou
They once blocked my college from accessing the main google page, so who knows :)
awesome stuff :)
Reply | Thread
Re: Awesome
from: anonymous
date: Dec. 13th, 2006 05:36 pm (UTC)
Link
Reply | Parent | Thread
Other Colors
from: anonymous
date: Dec. 13th, 2006 03:05 pm (UTC)
Link
navy, aqua, silver, maroon, lime
Failed colors:
crimson, scarlet, vermillion, gold, golden, copper, steel, tan, beige, vanilla, salmon, azure, cream, pumpkin, brown, violet, eggplant, turquoise, tangerine, seagreen, rust, lavender, khaki, jade, magenta, hotpink, hot%20pink, fuchsia, and chartreuse
Accurate as of December 13, 2006. They may implement these colors in the future...
Reply | Thread
Re: Other Colors
from: anonymous
date: Nov. 6th, 2007 10:30 pm (UTC)
Link
Reply | Parent | Thread
so....
from: anonymous
date: Dec. 13th, 2006 03:19 pm (UTC)
Link
how about a quick demo writeup ?
Reply | Thread
Colors
from: anonymous
date: Dec. 13th, 2006 03:57 pm (UTC)
Link
Reply | Thread
Re: Colors
from:
xach
date: Dec. 13th, 2006 04:02 pm (UTC)
Link
Reply | Parent | Thread
Maximum Height And Width...
from: anonymous
date: Dec. 13th, 2006 04:51 pm (UTC)
Link
Although, why you'd want corners that big is beyond me.
Also, you get a 400 response if you ask for a height or width less than 0, and it echoes the request back at you if either height or width are 0 (which is a bit naughty, as it still sends back "Content-Type: image/png" )
Reply | Thread
transparency?
from: anonymous
date: Dec. 13th, 2006 09:23 pm (UTC)
Link
Reply | Thread
Re: transparency?
from:
xach
date: Dec. 13th, 2006 09:28 pm (UTC)
Link
Reply | Parent | Thread
Re: transparency?
from:
dtm
date: Dec. 30th, 2006 02:24 am (UTC)
Link
Alpha-level transparency (blended stuff) and transparency in non-indexed images still generally requires strange internet explorer-specific tag soup.
Reply | Parent | Thread
Re: transparency?
from:
xach
date: Dec. 13th, 2006 09:34 pm (UTC)
Link
Reply | Parent | Thread
roundedcornr.com is even better
from: anonymous
date: Dec. 14th, 2006 09:38 am (UTC)
Link
Reply | Thread
Re: roundedcornr.com is even better
from:
xach
date: Dec. 14th, 2006 12:18 pm (UTC)
Link
Reply | Parent | Thread
(no subject)
from: anonymous
date: Dec. 14th, 2006 10:07 pm (UTC)
Link
Reply | Thread
(no subject)
from: anonymous
date: Dec. 15th, 2006 07:07 pm (UTC)
Link
A nice picture of only rounded corners. (http://drx.a-blast.org/~drx/projects/round/whale.html)
Loaded directly from the Google server, so i do not know how long it will work.
Best greetings,
drx
Reply | Thread
(no subject)
from:
xach
date: Dec. 15th, 2006 09:55 pm (UTC)
Link
Reply | Parent | Thread
Implementation in Rails
from: anonymous
date: Dec. 18th, 2006 09:07 am (UTC)
Link
-furui
Reply | Thread
Re: Implementation in Rails
from: anonymous
date: Dec. 22nd, 2006 03:27 am (UTC)
Link
ch
Reply | Parent | Thread
Thanks for inspiration
from:
adent.myopenid.com
date: May. 6th, 2007 01:04 pm (UTC)
Link
Reply | Thread
transparency
from: anonymous
date: Aug. 16th, 2007 02:22 am (UTC)
Link
I'm using imagemagick to do this and can get it all exactly how i want it except for the parts between the new rounded edges and the old square edges. they come out as black.
any ideas on how to make them transparent? i dont want to see the image i'm placing the corners on but whatever background i place these images on.
as done here: http://www.ibm.com/developerworks/librar
thanks
Reply | Thread
outdated?
from: anonymous
date: Oct. 14th, 2007 09:11 am (UTC)
Link
Reply | Thread