[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 ***
RE: [WSG] Google 'Alexander Calder' theme [SEC=UNOFFICIAL]
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
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
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
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 ***
