4 ms·

Clever CSS Easter Egg: Search Google For “Tilt” Or “Askew” On Your Smartphone

70 points by jeffwidman 16y ago

shrikant 16y ago
Only works on iPhones and Androids, I suppose. Didn't work on my Nokia C7 (a very competent smartphone..) Is the term "smartphone" only limited to those platforms now..? :-(
- Florin_Andrei 16y ago
  Doesn't work on iPhone 4.
  - citricsquid 16y ago
    It does for me!
- threepointone 16y ago
  (I'm guessing) google used -webkit-transform css property, does the C7 support that? PS - And I'm sure this is something they did for fun. They could've done it for chrome/safari as well, but they didn't.
  - motti 16y ago
    Indeed, it's achieved by adding webkit-specific -webkit-transform: rotate(1deg) CSS transform applied to the body element so it works on the desktop if you use Chrome or another webkit browser. Not quite sure why they didn't use -moz-transform on Firefox (Gecko) browsers which works the same way.
- abraham 16y ago
  Keep in mind that "smartphone" is the term TNW used not Google.
- camiller 16y ago
  Works on HP webOS. Think it is a webkit browser thing.
  - yuhong 16y ago
    Yep, WebKit is the engine most commonly used in current smartphone browsers.
  - shrikant 16y ago
    I think the C7 browser is Webkit-based...
- abraham 16y ago
  It looks like the C7 is running an older version of WebKit that doesn't support CSS transitions. It seems to be running v525/3.0 [1] and it looks like transitions were only in nightlies at that point. [2] [1] http://www.handsetdetection.com/properties/vendormodel/Nokia/C7-00 http://www.handsetdetection.com/properties/vendormodel/Nokia... [2] http://www.webkit.org/blog/138/css-animation/#comment-23166 http://www.webkit.org/blog/138/css-animation/#comment-23166
  - shrikant 16y ago
    Ah, thanks a lot for the info, and for the link as well - that sheds a better light on some of the oddities I'd noticed in my phone!
deleted 16y ago
[deleted]
deleted 16y ago
[deleted]
mrduncan 16y ago
Since this article doesn't have much substance, if you're looking to do something similar, check out this article on CSS rotation transformations. http://snook.ca/archives/html_and_css/css-text-rotation http://snook.ca/archives/html_and_css/css-text-rotation
- christefano 16y ago
  Indeed. This crashed my browser (Dolphin HD).
burgerbrain 16y ago
I was hoping that this would automatically retilt the screen using the accelerometer. Alas, it always simply just rotates it a few degrees.
- mryall 16y ago
  That's a cool idea. Accelerometer support for JS was added to iOS 4.2 [1], so it should be possible to modify the CSS transformations based on the DeviceOrientation [2]. [1] http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html5 http://www.mobilexweb.com/blog/safari-ios-accelerometer-webs... [2] http://dev.w3.org/geo/api/spec-source-orientation.html http://dev.w3.org/geo/api/spec-source-orientation.html
antimatter15 16y ago
I'm rather disappointed it doesn't take accelerometer input...
deleted 16y ago
[deleted]

70 points by jeffwidman 16y ago

Only works on iPhones and Androids, I suppose. Didn't work on my Nokia C7 (a very competent smartphone..) Is the term "smartphone" only limited to those platforms now..? :-(

Florin_Andrei 16y ago
Doesn't work on iPhone 4.
- citricsquid 16y ago
  It does for me!
threepointone 16y ago
(I'm guessing) google used -webkit-transform css property, does the C7 support that? PS - And I'm sure this is something they did for fun. They could've done it for chrome/safari as well, but they didn't.
- motti 16y ago
  Indeed, it's achieved by adding webkit-specific -webkit-transform: rotate(1deg) CSS transform applied to the body element so it works on the desktop if you use Chrome or another webkit browser. Not quite sure why they didn't use -moz-transform on Firefox (Gecko) browsers which works the same way.
abraham 16y ago
Keep in mind that "smartphone" is the term TNW used not Google.
camiller 16y ago
Works on HP webOS. Think it is a webkit browser thing.
- yuhong 16y ago
  Yep, WebKit is the engine most commonly used in current smartphone browsers.
- shrikant 16y ago
  I think the C7 browser is Webkit-based...
abraham 16y ago
It looks like the C7 is running an older version of WebKit that doesn't support CSS transitions. It seems to be running v525/3.0 [1] and it looks like transitions were only in nightlies at that point. [2] [1] http://www.handsetdetection.com/properties/vendormodel/Nokia/C7-00 http://www.handsetdetection.com/properties/vendormodel/Nokia... [2] http://www.webkit.org/blog/138/css-animation/#comment-23166 http://www.webkit.org/blog/138/css-animation/#comment-23166
- shrikant 16y ago
  Ah, thanks a lot for the info, and for the link as well - that sheds a better light on some of the oddities I'd noticed in my phone!

deleted 16y ago

[deleted]

deleted 16y ago

[deleted]

mrduncan 16y ago

Since this article doesn't have much substance, if you're looking to do something similar, check out this article on CSS rotation transformations. http://snook.ca/archives/html_and_css/css-text-rotation http://snook.ca/archives/html_and_css/css-text-rotation

christefano 16y ago
Indeed. This crashed my browser (Dolphin HD).

burgerbrain 16y ago

I was hoping that this would automatically retilt the screen using the accelerometer. Alas, it always simply just rotates it a few degrees.

mryall 16y ago
That's a cool idea. Accelerometer support for JS was added to iOS 4.2 [1], so it should be possible to modify the CSS transformations based on the DeviceOrientation [2]. [1] http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html5 http://www.mobilexweb.com/blog/safari-ios-accelerometer-webs... [2] http://dev.w3.org/geo/api/spec-source-orientation.html http://dev.w3.org/geo/api/spec-source-orientation.html

antimatter15 16y ago

I'm rather disappointed it doesn't take accelerometer input...

deleted 16y ago

[deleted]