Facebook Login Via Mobile Phone



Facebook Login Via Mobile Phone: Would not be cool if we picked some native mobile UI as well as aim to recreate them using only HTML5, CSS3 and JavaScript? So, today is Facebook's extraordinary IPO and I took their clean & sophisticated login screen and also recreated it for the web! Below it is the result, some code and remarks.

Facebook Login Via Mobile Phone


Disclaimer: I created this application with the apple iphone Facebook App in mind. I just evaluated the application on apple iphone. I already noticed that the radial slope background looks pixelated on Chrome, and I also believe that because of various other gradients, alpha colors as well as etc this app will certainly make some Android and BlackBerry tools shriek. Please don't blame me:-RRB-.

View.
The sight it's rather basic. We have the logo, 2 areas and 3 buttons. The only thing that may look different is the element with CSS course 'darkness'. Given that I had not been able to create a box-shadow for the areas without developing conflicts with their borders, I utilize this part as a layer in addition to the fields with the internal darkness.

Theming.
About the theming, there's a great deal of CSS3 things inside. I'm utilizing Sass with Compass structure, so it eases a few of the obstacles of simple CSS. Logo design is simply a part with dealt with dimension and also a history picture. I'm likewise giving the retina variation of it making use of the medias questions.



As I wrote formerly, the darkness element is a hack service for making the internal box-shadow, without producing conflicts with the fields' borders. The e-mail field has a gray approach all-time low, as well as the password a white border on the top. It develops sort of a side between fields. Something different about the areas is that you can style the text placeholder utilizing::- webkit-input-placeholder.



The buttons obtained new gradients, as well as added box-shadows. They also offer the same pressing state as the initial interface.

Concluding.
Which's practically it. This is a great workout, to see exactly what we could achieve using only internet. Specially with Sencha Touch, given that we listen to a great deal of concerns asking how easy/hard it is to tailor Touch parts.

I intended to use just CSS3, but also for manufacturing it would certainly be better to utilize a strong photo for the radial history for non-iOS gadgets, and also various other sutil enhancements. From my experience it carries out way better.