Welcome to Facebook Mobile Login



Welcome To Facebook Mobile Login: Would not be awesome if we chose some indigenous mobile UI and also aim to recreate them using only HTML5, CSS3 as well as JavaScript? So, today is Facebook's remarkable IPO as well as I took their tidy & stylish login screen as well as recreated it for the internet! Below it is the final result, some code and comments.

Welcome To Facebook Mobile Login


Please note: I developed this application with the apple iphone Facebook App in mind. I just evaluated the application on apple iphone. I already observed that the radial gradient history looks pixelated on Chrome, and also I additionally presume that as a result of various other slopes, alpha shades and also etc this application will make some Android and also BlackBerry tools scream. Please don't condemn me:-RRB-.

Sight.
The view it's pretty basic. We have the logo, 2 areas and 3 switches. The only point that may look various is the element with CSS class 'darkness'. Considering that I wasn't able to develop a box-shadow for the fields without producing conflicts with their borders, I use this component as a layer in addition to the areas with the inner shadow.

Theming.
About the theming, there's a lot of CSS3 stuff inside. I'm making use of Sass with Compass structure, so it minimizes several of the hurdles of plain CSS. Logo design is just an element with dealt with dimension as well as a background picture. I'm likewise providing the retina version of it making use of the medias inquiries.



As I wrote previously, the shadow component is a hack service for making the internal box-shadow, without creating conflicts with the areas' boundaries. The email field has a grey verge on all-time low, as well as the password a white approach the top. It produces sort of a side in between fields. Something different about the fields is that you can design the text placeholder utilizing::- webkit-input-placeholder.



The buttons obtained new gradients, and also added box-shadows. They likewise give the very same pressing state as the original interface.

Finishing up.
Which's basically it. This is a fantastic exercise, to see what we could complete utilizing only web. Specifically with Sencha Touch, given that we listen to a lot of questions asking just how easy/hard it is to personalize Touch elements.

I wished to make use of only CSS3, however, for production it would certainly be far better to utilize a strong picture for the radial history for non-iOS gadgets, and also other sutil enhancements. From my experience it carries out way much better.