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:

Parameters:

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.

Link | Leave a comment | Add to Memories | Tell a Friend

Comments {22}

Awesome

from: anonymous
date: Dec. 13th, 2006 07:37 am (UTC)
Link

found this on digg.
I can't imagine what google would say if people start linking to images like this: http://groups-beta.google.com/groups/roundedcorners?c=555555&bc=green&w=9999&h=9999&a=tl
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

Might be a good idea to generate them into the browser and then just right click and save the file locally. then you don't have to worry about google blocking access.

Reply | Parent | Thread

Other Colors

from: anonymous
date: Dec. 13th, 2006 03:05 pm (UTC)
Link

Found colors:
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

41232f

Reply | Parent | Thread

so....

from: anonymous
date: Dec. 13th, 2006 03:19 pm (UTC)
Link

so how exactly to put this to use ?

how about a quick demo writeup ?

Reply | Thread

Colors

from: anonymous
date: Dec. 13th, 2006 03:57 pm (UTC)
Link

It looks like all CSS 2 color names are support. I don't notice any additional CSS3/X11 color names supported.

Reply | Thread

Zach Beane

Re: Colors

from: [info]xach
date: Dec. 13th, 2006 04:02 pm (UTC)
Link

Good catch!

Reply | Parent | Thread

Maximum Height And Width...

from: anonymous
date: Dec. 13th, 2006 04:51 pm (UTC)
Link

...appear to be 32767 - the maximum positive value for a signed 16-bit integer.
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

It would be nice if you could have transparent backgrounds here, since PNG supports it.

Reply | Thread

Zach Beane

Re: transparency?

from: [info]xach
date: Dec. 13th, 2006 09:28 pm (UTC)
Link

I dunno why that isn't a feature of google's thing. Unfortunately, in 2006, you still cannot rely on IE to display PNGs properly without resorting to IE-only CSS/JS tricks; maybe that has something to do with it.

Reply | Parent | Thread

Daniel Martin

Re: transparency?

from: [info]dtm
date: Dec. 30th, 2006 02:24 am (UTC)
Link

Note that as far as transparency goes, you can get simple transparent/not-transparent style transparency (i.e. what can be gotten with gif images) reliably in indexed PNG images in internet explorer 5.0 and higher. Those conditions - transparency is only on or off, and an indexed PNG - should apply here.

Alpha-level transparency (blended stuff) and transparency in non-indexed images still generally requires strange internet explorer-specific tag soup.

Reply | Parent | Thread

Zach Beane

Re: transparency?

from: [info]xach
date: Dec. 13th, 2006 09:34 pm (UTC)
Link

Hey, I was wrong. If you omit the bc parameter, the image is transparent. (Thanks to someone at blog.outer-court.com for the info.)

Reply | Parent | Thread

roundedcornr.com is even better

from: anonymous
date: Dec. 14th, 2006 09:38 am (UTC)
Link

hey, you should check out roundedcornr.com. it generates a lot more variety of rounded corners, and the site itself has plenty of rounded corners =)

Reply | Thread

Zach Beane

Re: roundedcornr.com is even better

from: [info]xach
date: Dec. 14th, 2006 12:18 pm (UTC)
Link

Aliased edges? In 2006?

Reply | Parent | Thread

(no subject)

from: anonymous
date: Dec. 14th, 2006 10:07 pm (UTC)
Link

The transparent background is not compatible to IE 6. Can Google generate a gif format?

Reply | Thread

(no subject)

from: anonymous
date: Dec. 15th, 2006 07:07 pm (UTC)
Link

Look what i made with it!
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

Zach Beane

(no subject)

from: [info]xach
date: Dec. 15th, 2006 09:55 pm (UTC)
Link

That is all kinds of awesome.

Reply | Parent | Thread

Implementation in Rails

from: anonymous
date: Dec. 18th, 2006 09:07 am (UTC)
Link

I whipped up an implementation in Ruby on Rails that works nearly the same as Google's. Check it out: http://furui.org/blog/2006/12/18/rounded-corners-in-rails/

-furui

Reply | Thread

Re: Implementation in Rails

from: anonymous
date: Dec. 22nd, 2006 03:27 am (UTC)
Link

it seems that google already have implemented a protection for use this tool, now if you want to use it you have to check that you are human!

ch

Reply | Parent | Thread

Thanks for inspiration

from: [info]adent.myopenid.com
date: May. 6th, 2007 01:04 pm (UTC)
Link

You can try simple rounded-corner generator: http://sw.dev20.info/google/corners/index.php

Reply | Thread

transparency

from: anonymous
date: Aug. 16th, 2007 02:22 am (UTC)
Link

i am using these corners to place on rectangle images to produce rounded corner images.

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/library/l-graf2/?ca=dgr-lnxw15GraphicsLine

thanks

Reply | Thread

outdated?

from: anonymous
date: Oct. 14th, 2007 09:11 am (UTC)
Link

It looks like Google has stopped using these corner images in favor of using a single round image and then changing the positioning.

Reply | Thread



Original-Seite: Zach's Journal - google's own cornershop
 Web-Blaster V2.21 Webblaster-Feld schließen
Die angezeigte Seite wurde durch den Web-Blaster geleitet und dadurch mit der Datenbank des Assoziations-Blasters verknüpft.

Der Web-Blaster ist ein alternativer Browser, der beliebige Webseiten mit Links anreichert. Der gesamte Vorgang geschieht in Echtzeit mit den Original-Daten, es werden keine fremden Daten auf dem Blaster-Server zwischengespeichert.

Um diese Seite unverändert und auf ihrem ursprünglichen Server zu sehen, muss der Webblaster abgeschaltet werden.

Webblaster abschalten