Facebook Mobile Login Online



Facebook Mobile Login Online: Wouldn't be amazing if we picked some indigenous mobile UI and also aim to recreate them making use of only HTML5, CSS3 as well as JavaScript? So, today is Facebook's remarkable IPO and also I took their tidy & elegant login display and also recreated it for the internet! Here it is the result, some code as well as remarks.

Facebook Mobile Login Online


Please note: I developed this app with the apple iphone Facebook App in mind. I just checked the app on iPhone. I already noticed that the radial gradient history looks pixelated on Chrome, and also I also believe that as a result of other slopes, alpha colors as well as etc this application will make some Android and also BlackBerry tools scream. Please don't blame me:-RRB-.

Sight.
The sight it's quite basic. We have the logo design, 2 areas and 3 switches. The only thing that could look different is the part with CSS class 'darkness'. Since I had not been able to create a box-shadow for the areas without creating conflicts with their borders, I use this part as a layer in addition to the fields with the internal shadow.

Theming.
About the theming, there's a lot of CSS3 things inside. I'm making use of Sass with Compass structure, so it minimizes some of the difficulties of plain CSS. Logo design is simply an element with dealt with dimension and also a history image. I'm likewise offering the retina variation of it using the medias queries.



As I composed formerly, the shadow element is a hack option for making the internal box-shadow, without developing conflicts with the fields' boundaries. The email field has a grey approach all-time low, and the password a white border on the top. It produces kind of an edge between fields. Something different concerning the fields is that you could style the text placeholder making use of::- webkit-input-placeholder.



The switches received new slopes, and extra box-shadows. They additionally provide the exact same pressing state as the original user interface.

Concluding.
Which's practically it. This is an excellent exercise, to see just what we could accomplish utilizing just web. Specifically with Sencha Touch, given that we listen to a great deal of concerns asking exactly how easy/hard it is to personalize Touch elements.

I intended to utilize only CSS3, but also for manufacturing it would be better to make use of a solid picture for the radial background for non-iOS devices, and also other sutil enhancements. From my experience it does way far better.