TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Cloning the UI of iOS 7 with HTML, CSS and JavaScript

115 pointsby c2prodsalmost 12 years ago

12 comments

apikealmost 12 years ago
This makes a nice demo and highlights that in some ways, iOS 7 is easier to reproduce using web technology than iOS 6 was.<p>&gt; There’s been a lot of controversy recently on whether Javascript could compete with native or not, both in terms of performance and of look’n’feel.<p>On the other hand, the controversially difficult to reproduce parts of iOS 7 aren&#x27;t part of this demo. The real-time blur, the zooming &quot;z-axis&quot; navigation, the 3D animations, and the 60fps scrubbable gestures for going back in the navigation stack aren&#x27;t here.<p>While those are all &quot;bonus effects,&quot; they&#x27;re also a lot of what makes iOS 7 delightful to use.
评论 #6343348 未加载
评论 #6343552 未加载
jeenaalmost 12 years ago
Why don&#x27;t they use proper HTML5 instead of this tag soup?<p><a href="https://gist.github.com/jeena/f62232da7d6ac964d403" rel="nofollow">https:&#x2F;&#x2F;gist.github.com&#x2F;jeena&#x2F;f62232da7d6ac964d403</a><p>The rest is a matter of CSS.<p>[Edit:] moved the code to a gist
评论 #6341370 未加载
SunboXalmost 12 years ago
<a href="https://beta.icloud.com" rel="nofollow">https:&#x2F;&#x2F;beta.icloud.com</a> uses new &quot;iOS7&quot; layout, too. Some styles could be taken from there ;)
评论 #6341308 未加载
评论 #6341251 未加载
flying_dalmost 12 years ago
Check out <a href="http://www.appgyver.com/steroids" rel="nofollow">http:&#x2F;&#x2F;www.appgyver.com&#x2F;steroids</a> It&#x27;s still in it&#x27;s early stages but looks very promising. It gives you native navigation and transitions, amongst other many other goodies.
评论 #6343334 未加载
alexfringesalmost 12 years ago
Nice attention to detail in this. By the way, it seems like the new view&#x27;s shadow in the original actually loses opacity as that view leaves the screen. Did you look around for the blur effect at all? You mentioned it but any luck beyond that? I&#x27;ve seen some attempts but nothing useful.
评论 #6340598 未加载
评论 #6340348 未加载
评论 #6340702 未加载
yesimahumanalmost 12 years ago
Fantastic post, thanks for sharing! I&#x27;m invested pretty heavily in HTML5 on mobile and your demo just reassures me this is the future (it feels great!). I hope you don&#x27;t mind me using some of this stuff for a new project I&#x27;m working on.
评论 #6340504 未加载
cheeaunalmost 12 years ago
This is a very good job. I plan to iOS7-ify my HackerWeb app once iOS7 is released next month, so your article would be helpful to me :)
评论 #6340585 未加载
评论 #6340913 未加载
评论 #6340497 未加载
评论 #6340867 未加载
chucknelsonalmost 12 years ago
Pretty cool. I know this is more of a demonstration of simulating the iOS 7 UI, but I&#x27;m assuming to use this for something you&#x27;d want the URLs to update as you move through an app?<p>I may have missed references to this limitation, again, if it even matters for the purpose of the post.
评论 #6341037 未加载
solisticealmost 12 years ago
Uhmmm, your live demo just selfdestructed when I clicked on it. Any chance it doesn&#x27;t work in firefox?
评论 #6343323 未加载
madeofpalkalmost 12 years ago
Great writeup. I just spent a significant amount of time trying to perfect a CSS UINavigationBar, and still not happy with it
quadratinialmost 12 years ago
please properly indent the code snippents
评论 #6341357 未加载
TeeWEEalmost 12 years ago
IOS comes with an (new) UI -&gt; HTML folks clone it -&gt; &quot;Look its cool bro&quot;.