Facebook Login In Mobile Phone M



Facebook Login In Mobile Phone M: Wouldn't be cool if we selected some native mobile UI and also attempt to recreate them making use of only HTML5, CSS3 and also JavaScript? So, today is Facebook's phenomenal IPO and also I took their clean & elegant login screen and recreated it for the internet! Here it is the outcome, some code and comments.

Facebook Login In Mobile Phone M


Disclaimer: I created this application with the iPhone Facebook Application in mind. I only tested the application on apple iphone. I currently observed that the radial slope background looks pixelated on Chrome, and also I likewise think that because of other gradients, alpha shades as well as etc this application will make some Android and also BlackBerry gadgets howl. Please don't criticize me:-RRB-.

View.
The view it's very simple. We have the logo, 2 fields and also 3 buttons. The only point that might look different is the element with CSS class 'darkness'. Since I had not been able to produce a box-shadow for the areas without producing conflicts with their boundaries, I utilize this element as a layer on top of the fields with the inner darkness.

Theming.
Regarding the theming, there's a lot of CSS3 stuff inside. I'm making use of Sass with Compass structure, so it minimizes some of the obstacles of simple CSS. Logo is just an element with taken care of dimension and a background photo. I'm also providing the retina version of it making use of the medias questions.



As I composed formerly, the shadow element is a hack option for making the inner box-shadow, without creating conflicts with the fields' borders. The e-mail field has a grey approach the bottom, as well as the password a white approach the top. It creates sort of a side in between fields. Something different concerning the fields is that you can design the message placeholder using::- webkit-input-placeholder.



The switches received brand-new gradients, and additional box-shadows. They also provide the exact same pressing state as the original user interface.

Wrapping up.
Which's basically it. This is a great exercise, to see exactly what we could complete utilizing only internet. Particularly with Sencha Touch, since we listen to a lot of questions asking exactly how easy/hard it is to personalize Touch components.

I wished to utilize only CSS3, but also for manufacturing it would be better to make use of a strong photo for the radial background for non-iOS tools, and various other sutil renovations. From my experience it executes way much better.