Facebook Login Site Mobile



Facebook Login Site Mobile: Wouldn't be great if we picked some indigenous mobile UI and also try to recreate them making use of only HTML5, CSS3 and JavaScript? So, today is Facebook's amazing IPO and I took their clean & elegant login display and recreated it for the internet! Right here it is the result, some code and also comments.

Facebook Login Site Mobile


Disclaimer: I developed this app with the iPhone Facebook App in mind. I only tested the application on apple iphone. I currently saw that the radial gradient history looks pixelated on Chrome, and also I also suspect that due to various other gradients, alpha colors and etc this app will certainly make some Android and also BlackBerry gadgets scream. Please do not condemn me:-RRB-.

View.
The view it's quite basic. We have the logo, 2 areas and also 3 buttons. The only thing that may look different is the component with CSS class 'darkness'. Because I wasn't able to produce a box-shadow for the areas without developing conflicts with their borders, I utilize this component as a layer on top of the fields with the internal shadow.

Theming.
About the theming, there's a lot of CSS3 stuff inside. I'm using Sass with Compass framework, so it reduces a few of the difficulties of simple CSS. Logo is just a part with taken care of size and also a history photo. I'm likewise supplying the retina variation of it utilizing the medias queries.



As I created previously, the darkness part is a hack option for making the inner box-shadow, without creating conflicts with the areas' boundaries. The email area has a grey approach the bottom, and the password a white border on the top. It develops sort of a side between areas. Something different concerning the areas is that you could design the text placeholder making use of::- webkit-input-placeholder.



The buttons got brand-new gradients, as well as additional box-shadows. They additionally offer the very same pushing state as the initial user interface.

Wrapping up.
And that's practically it. This is a terrific exercise, to see what we could achieve making use of only internet. Specially with Sencha Touch, given that we listen to a great deal of questions asking how easy/hard it is to personalize Touch components.

I intended to make use of just CSS3, but for manufacturing it would certainly be far better to utilize a solid image for the radial history for non-iOS tools, and also various other sutil improvements. From my experience it executes way much better.