[WSG] Google 'Alexander Calder' theme

2011-07-22 Thread grant_malcolm_bailey
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
***



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] Re-ask: z-index bug in webkit?

2011-07-22 Thread Birendra
Strange it's take me to the another site
http://www.lotusseedsdesign.com/mt/;



-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of tee
Sent: Friday, July 22, 2011 11:22 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Re-ask: z-index bug in webkit?

Strange, it works for me.
 http://bit.ly/oyBzIY

tee
On Jul 21, 2011, at 10:27 PM, Birendra wrote:

 Hi Tee
 
 The link isn't working. http://bit.ly/oyBzIY;
 
 Please can you check the link.
 
 Regards
 Birendra
 -Original Message-
 From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] 
 On Behalf Of tee
 Sent: Friday, July 22, 2011 10:38 AM
 To: wsg@webstandardsgroup.org
 Subject: [WSG] Re-ask: z-index bug in webkit?
 
 p/s: Please ignore my previous thread as it is a static page and the 
 slide images' links to my local server.
 
 I have never experienced z-index issue before in webkit browsers and 
 this one really got me. It's been two days still haven't been able to
solve.
 
 Visit from Chorme or Safari, the slideshow has a transparent layer for 
 texts. I do believe the z-indx order is correct because it works for
IE6/7.
 
 http://bit.ly/oyBzIY
 
 Thank you!
 tee
 



***
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 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
***