13 ms·
Cloning the UI of iOS 7 with HTML, CSS and JavaScript
- alexfringes 13y agoNice attention to detail in this. By the way, it seems like the new view'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've seen some attempts but nothing useful.
- M4v3R 13y agoI've looked into this as well. At the moment it is impossible to achieve this effect in plain HTML/Javascript/CSS. It would probably need some Canvas/WebGL magic to work for live content below the navigation bar, but that feels like overdoing it. Achieving blur in CSS is possible, but it's different - you apply blur to an element itself, not to a background of element that covers it.
- yesimahuman 13y agoThis demo comes close (only works on the phone, and make sure to swipe up to see the menu): http://dl.dropboxusercontent.com/u/2220075/ios7/lax.html http://dl.dropboxusercontent.com/u/2220075/ios7/lax.html I forget where this comes from, I just have the link.
- c2prods 13y agoYes, I've seen it an a few others demos. But the difficulty here is to make the content blurred while it scrolls. It's extremely smooth on iOS 7 beta and I can't see anyway to reproduce properly in HTML without severely compromising the performances.
- peterhunt 13y agoI think this is actually possible if you use synthetic scrolling (i.e. interpret touch events, compute intertia and use translate3d + requestAnimationFrame). You'd basically have 2 copies of the content area, one blurred w/ css and one not blurred. Render the blurred one above the non blurred one and scroll them in lock step. You can probably get ok performance if you don't have a lot of images. A high quality implementation of synthetic scrolling is available at http://github.com/zynga/scroller http://github.com/zynga/scroller if you want to play with it.
- c2prods 13y agoHmm, I've tried something like that (although not as elaborate), but it really was sluggish... It may work but I think you should at least need an iPhone 4S or 5.
- M4v3R 13y agoAs I said, it's hard/close to impossible to reliably achieve this effect for live content. With static content you can use CSS filters to do the blurring.
- madeofpalk 13y agoYeah, the iOS 7 'frosted glass translucency is impossible to achieve with CSS. Everyone points to filter: blur(), but that only blurs the element, and not items behind it. The only thing I could come up with was using something like HTML2Canvas[1] to render a portion of the DOM in a canvas/image, position that exactly on top, and then blur that. But all that seems quite convoluted and heavy, so decided not to invest any energy into it. [1]: https://github.com/niklasvh/html2canvas https://github.com/niklasvh/html2canvas
- meerita 13y agoYou can blur everything, you just need to point the elements.
- dm2 13y agoWould one of these solutions work? http://stackoverflow.com/questions/17034485/ios-7s-blurred-overlay-effect-using-css http://stackoverflow.com/questions/17034485/ios-7s-blurred-o... Also: http://www.blurjs.com/ http://www.blurjs.com/
- yesimahuman 13y agoFantastic post, thanks for sharing! I'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't mind me using some of this stuff for a new project I'm working on.
- c2prods 13y agoThanks! No problem, you can use it for other projects, the code is on github.
- cheeaun 13y agoThis 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 :)
- c2prods 13y agoThanks! I'll be happy to see a new version of HackerWeb :)
- josteink 13y agoAs someone using that app, I would love the option to keep the old interface. Having web-apps trying to mimick a platform I don't use just feels wrong. In much the same way as those fake Windows-UI images ("Scan complete. 3 viruses found!") used all over the internet trying to trick noobs into installing malware.
- cheeaun 13y agoThe old interface will stay for older versions of iOS. In fact, I'm already doing that for iOS 6 and iOS 5, which both looks slightly different.
- TazeTSchnitzel 13y agoCould you make it possible to use the "wrong" interface? I'd love to try the iOS look on my Android phone
- cheeaun 13y agoYou can opt-in to other themes here http://cheeaun.github.io/hackerweb/options.html http://cheeaun.github.io/hackerweb/options.html :)
- TazeTSchnitzel 13y agoThanks!
- madeofpalk 13y agoGreat writeup. I just spent a significant amount of time trying to perfect a CSS UINavigationBar, and still not happy with it
- chucknelson 13y agoPretty cool. I know this is more of a demonstration of simulating the iOS 7 UI, but I'm assuming to use this for something you'd want the URLs to update as you move through an app? I may have missed references to this limitation, again, if it even matters for the purpose of the post.
- c2prods 13y agoI've actually designed it with a Phonegap integration in mind, to be honest. I think it's possible but you'd probably have to add a great deal of complexity to the code. I'm not familiar with Backbone.js, but may be you can use it to implement routing?
- TeeWEE 13y agoIOS comes with an (new) UI -> HTML folks clone it -> "Look its cool bro".
- apike 13y agoThis makes a nice demo and highlights that in some ways, iOS 7 is easier to reproduce using web technology than iOS 6 was. > 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. On the other hand, the controversially difficult to reproduce parts of iOS 7 aren't part of this demo. The real-time blur, the zooming "z-axis" navigation, the 3D animations, and the 60fps scrubbable gestures for going back in the navigation stack aren't here. While those are all "bonus effects," they're also a lot of what makes iOS 7 delightful to use.
- c2prods 13y agoActually, I don't think JS can really compete with native, that's not the point I'm trying to make in this article. Nonetheless, webapps can be an acceptable tradeoff for small apps, that are not too resource-intensive. In such cases, I think HTML, CSS and JS can give good enough results.
- brianshaler 13y ago(First, nice work!) I think there's an argument either way on this, though. Even with a simple app, some would say looking very similar to native but being 1% off can be more detrimental to the experience than executing very well on a different, more HTML/CSS/JS-friendly approach. That being said, I think this would be an interesting thing to start seeing around the web!
- SiVal 13y agoSince iOS6 and iOS7 have different looks and feels, it is apparent that rigidly adhering to the one true native look and feel isn't mandatory. I'll bet HTML5 can get closer to either iOS version than they are to each other and so close that I, an iPhone user, wouldn't notice the difference for the kind of app that doesn't require native hardware access. I'll bet that someone will produce an HTML5 mobile UI that I'll like more than I'll like iOS7. I'll bet that this won't be the last iOS UI overhaul, and that some future Apple TV will have yet another "native look and feel" and that iPhone owners will use their TVs and Kindles and smart refrigerators and countless Web apps and eventually lose track of what "the native look and feel of an iPhone" looks and feels like.
- SunboX 13y agohttps://beta.icloud.com https://beta.icloud.com uses new "iOS7" layout, too. Some styles could be taken from there ;)
- maguay 13y agoThat is awesome.
- c2prods 13y agoThere's a lot of interesting things indeed! They achieve a nice blur effect, even though I suppose it would be way too heave for mobile.
- turval 13y agoIf you inspect the page It appears they are generating a blurred version of the png on the fly in js. The source of the blurred version of the image is equal to "data:image/png;base64,iVBOR…7WkYklgQdZAAAAABJRU5ErkJggg==" while the none blurred version is https://beta.icloud.com/system/cloudos/1SBeta.102619/en-us/source/resources/images/mail_icon.png https://beta.icloud.com/system/cloudos/1SBeta.102619/en-us/s...
- jeena 13y agoWhy don't they use proper HTML5 instead of this tag soup? https://gist.github.com/jeena/f62232da7d6ac964d403 https://gist.github.com/jeena/f62232da7d6ac964d403 The rest is a matter of CSS. [Edit:] moved the code to a gist
- c2prods 13y agoYou're entirely right. I'm just used to the old way, but I guess I'm a bit of an eccentric. I'll try to update the repo asap. (Anyway, I think the HTML architecture could be streamlined, my point was more to demonstrate the css possibilities)
- jeena 13y agoAnd you did a really great job with the CSS. But I know that many young people who are starting with HTML/CSS will be hugely impressed by your examples and will try to copy them. And because they see the div-soup in your examples they will assume that this is how you're supposed to write modern HTML. In the end they see the most modern look in the examples, so I wouldn't even blame them for thinking like that. It would be sad if they learned to write non-semantic HTML and I think we all who write examples on the net should try to write great examples :) And in fact we should do it with all the HTML which is online because we all learned HTML and CSS from right click "View Page Source" :D
- c2prods 13y agoYou're 100% right. I don't have enough time to do that this evening (it's 8pm in France), so I'll give it a look tomorrow :)
- tuxracer 13y agoNote that opinions differ on this. Personally I think semantic HTML is nothing but meeting-bait. If you try to be diligent about it you end up in discussions and meetings around whether a certain element should be a figcaption tag should be used or aside etc... And at the end of these types of discussions, regardless of the outcome, nothing that has any actual effect has been changed. It will make zero practical difference whether you use semantic HTML or not. The only thing seemingly affected are imaginary mobile devices that render <nav> differently than <div> or imaginary screen readers that can't read text unless it's in a <figcaption> tag.
- quadratini 13y agoplease properly indent the code snippents
- c2prods 13y agoOoops, I don't know why it went so wrong, I corrected it.
- solistice 13y agoUhmmm, your live demo just selfdestructed when I clicked on it. Any chance it doesn't work in firefox?
- c2prods 13y agoI haven't tested it on FF... I really developed it with only iOS in mind, so many CSS properties are prefixed and there might be other bugs...
- solistice 13y agoWhenever I click on anything it layers the new elements behind the other ones and the whole interface becomes unresponsive. It works for others though, and it's pretty and iOSey, so props on that.
- flying_d 13y agoCheck out http://www.appgyver.com/steroids http://www.appgyver.com/steroids It's still in it's early stages but looks very promising. It gives you native navigation and transitions, amongst other many other goodies.
- c2prods 13y agoInteresting indeed!