RE: [WSG] Google 'Alexander Calder' theme [SEC=UNOFFICIAL]

2011-07-22 Thread Enid Bulman
UNOFFICIAL

Interesting - I don't have access to Chrome at work - but in FireFox it moves 
slowly and gracefully and has a drop-shadow (missing in IE8) reflected below 
the search box - so they have taken some time to do some rather classy work

Enid

-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On 
Behalf Of grant_malcolm_bai...@westnet.com.au
Sent: Friday, 22 July 2011 4:16 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] Google 'Alexander Calder' theme

Hello,

Today's Google home page theme seems to be a very good example of progressive 
enhancement. The mobile graphic is non-interactive in IE7 but looks fine. In 
Chrome, however, the graphic swings about in response to mouse movements (as 
does its shadow, not present for IE7).

Could anyone advise: (i) what technologies were used for this (canvas, etc.), 
and (ii) whether it is possible to save a working copy of the page locally in 
order to study its function (I've never had luck doing this with Google themes).

Thank you and regards,

Grant Bailey


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


UNOFFICIAL


DISCLAIMER:
If you have received this transmission in error please notify us immediately by 
return email and delete all copies.  If this email or any attachments have been 
sent to you in error, that error does not constitute waiver of any 
confidentiality, privilege or copyright in respect of information in the email 
or attachments. 


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] Google 'Alexander Calder' theme

2011-07-22 Thread Birendra
Hi Grant Bailey

This is the html 5 technology, It's hard to study in the locally... but you can 
try for this... But my suggestion study the html 5 and the canvas property. 
There are lot of things you can do with the html 5.

Best of luck 
Regards
Birendra

-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On 
Behalf Of grant_malcolm_bai...@westnet.com.au
Sent: Friday, July 22, 2011 11:46 AM
To: wsg@webstandardsgroup.org
Subject: [WSG] Google 'Alexander Calder' theme

Hello,

Today's Google home page theme seems to be a very good example of progressive 
enhancement. The mobile graphic is non-interactive in IE7 but looks fine. In 
Chrome, however, the graphic swings about in response to mouse movements (as 
does its shadow, not present for IE7).

Could anyone advise: (i) what technologies were used for this (canvas, etc.), 
and (ii) whether it is possible to save a working copy of the page locally in 
order to study its function (I've never had luck doing this with Google themes).

Thank you and regards,

Grant Bailey


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



RE: [WSG] Google 'Alexander Calder' theme

2011-07-22 Thread Chris Taylor
Looking at it in Chrome it's two canvas elements (one for the animation, one 
for the shadow) with a noscript fallback:

canvas id=calder width=400 height=300 style=margin-left: -48px; 
z-index: 0; cursor: move; /canvas

canvas id=calder_shadows width=400 height=300 
style=margin-left:-48px;position:relative;top:-140px;z-index:-5/canvas

noscriptamp;lt;a 
href=/search?q=Alexander+Calderamp;amp;ct=calder11amp;amp;oi=ddle 
title=Alexander Calderamp;amp;#39;s 113th Birthday. Courtesy of Calder 
Foundation / ARS, NY.amp;gt;amp;lt;img id=hplogo 
src=/logos/2011/calder11.png alt=Alexander Calderamp;amp;#39;s 113th 
Birthday. Courtesy of Calder Foundation / ARS, 
NY.amp;gt;amp;lt;/aamp;gt;/noscript

Trying to decipher the JavaScript that runs this is pretty hard, though...

Chris


-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On 
Behalf Of grant_malcolm_bai...@westnet.com.au
Sent: 22 July 2011 07:16
To: wsg@webstandardsgroup.org
Subject: [WSG] Google 'Alexander Calder' theme

Hello,

Today's Google home page theme seems to be a very good example of progressive 
enhancement. The mobile graphic is non-interactive in IE7 but looks fine. In 
Chrome, however, the graphic swings about in response to mouse movements (as 
does its shadow, not present for IE7).

Could anyone advise: (i) what technologies were used for this (canvas, etc.), 
and (ii) whether it is possible to save a working copy of the page locally in 
order to study its function (I've never had luck doing this with Google themes).

Thank you and regards,

Grant Bailey


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] Google 'Alexander Calder' theme

2011-07-22 Thread grant_malcolm_bailey
Chris,
Thanks for your response. Yes, some physics is involved behind the scenes I 
think ...
Grant
- Original Message -
From: Chris Taylor chris.tay...@cubik.co.uk
To: wsg@webstandardsgroup.org
Sent: Fri, 22 Jul 2011 15:17:47 +0800 (WST)
Subject: RE: [WSG] Google 'Alexander Calder' theme

Looking at it in Chrome it's two canvas elements (one for the animation, one 
for the shadow) with a noscript fallback:

canvas id=calder width=400 height=300 style=margin-left: -48px; 
z-index: 0; cursor: move; /canvas

canvas id=calder_shadows width=400 height=300 
style=margin-left:-48px;position:relative;top:-140px;z-index:-5/canvas

noscriptlt;a href=/search?q=Alexander+Calderamp;ct=calder11amp;oi=ddle 
title=Alexander Calderamp;#39;s 113th Birthday. Courtesy of Calder Foundation 
/ ARS, NY.gt;lt;img id=hplogo src=/logos/2011/calder11.png 
alt=Alexander Calderamp;#39;s 113th Birthday. Courtesy of Calder Foundation / 
ARS, NY.gt;lt;/agt;/noscript

Trying to decipher the JavaScript that runs this is pretty hard, though...

Chris


-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On 
Behalf Of grant_malcolm_bai...@westnet.com.au
Sent: 22 July 2011 07:16
To: wsg@webstandardsgroup.org
Subject: [WSG] Google 'Alexander Calder' theme

Hello,

Today's Google home page theme seems to be a very good example of progressive 
enhancement. The mobile graphic is non-interactive in IE7 but looks fine. In 
Chrome, however, the graphic swings about in response to mouse movements (as 
does its shadow, not present for IE7).

Could anyone advise: (i) what technologies were used for this (canvas, etc.), 
and (ii) whether it is possible to save a working copy of the page locally in 
order to study its function (I've never had luck doing this with Google themes).

Thank you and regards,

Grant Bailey


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***