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