Mobile Facebook Login Home Page



Mobile Facebook Login Home Page: Would not be trendy if we chose some native mobile UI and attempt to recreate them utilizing just HTML5, CSS3 as well as JavaScript? So, today is Facebook's extraordinary IPO and I took their clean & elegant login screen and recreated it for the web! Here it is the result, some code and remarks.

Mobile Facebook Login Home Page


Disclaimer: I produced this application with the apple iphone Facebook App in mind. I just tested the app on iPhone. I already observed that the radial slope background looks pixelated on Chrome, and I additionally think that as a result of other gradients, alpha shades as well as etc this application will make some Android and BlackBerry devices scream. Please don't criticize me:-RRB-.

Sight.
The sight it's very straightforward. We have the logo, 2 fields and also 3 switches. The only point that may look different is the element with CSS course 'shadow'. Given that I wasn't able to produce a box-shadow for the areas without developing conflicts with their boundaries, I use this part as a layer in addition to the areas with the inner shadow.

Theming.
About the theming, there's a great deal of CSS3 things inside. I'm making use of Sass with Compass framework, so it reduces some of the obstacles of plain CSS. Logo design is simply a part with dealt with size and a background photo. I'm likewise providing the retina version of it utilizing the medias questions.



As I composed previously, the darkness element is a hack service for making the internal box-shadow, without creating conflicts with the fields' boundaries. The email field has a grey border on all-time low, and also the password a white verge on the top. It creates kind of an edge between areas. Something different regarding the areas is that you can design the text placeholder using::- webkit-input-placeholder.



The buttons obtained brand-new slopes, and also extra box-shadows. They additionally offer the same pressing state as the original user interface.

Finishing up.
And that's basically it. This is a wonderful exercise, to see just what we could achieve using only web. Specially with Sencha Touch, because we listen to a lot of inquiries asking how easy/hard it is to personalize Touch components.

I intended to use only CSS3, however, for production it would certainly be much better to use a solid picture for the radial history for non-iOS tools, and other sutil renovations. From my experience it executes way much better.