Facebook Mobile Website Login



Facebook Mobile Website Login: Wouldn't be amazing if we picked some native mobile UI and also try 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 clean & sophisticated login display and recreated it for the web! Here it is the final result, some code and also comments.

Facebook Mobile Website Login


Disclaimer: I produced this application with the apple iphone Facebook Application in mind. I only examined the application on iPhone. I already discovered that the radial gradient history looks pixelated on Chrome, and I also suspect that due to other gradients, alpha colors as well as etc this app will certainly make some Android as well as BlackBerry devices shriek. Please don't blame me:-RRB-.

View.
The view it's rather easy. We have the logo, 2 areas and also 3 switches. The only point that may look different is the part with CSS course 'shadow'. Since I had not been able to create a box-shadow for the fields without creating conflicts with their borders, I utilize this component as a layer on top of the fields with the inner darkness.

Theming.
Concerning the theming, there's a great deal of CSS3 stuff inside. I'm utilizing Sass with Compass framework, so it alleviates a few of the obstacles of simple CSS. Logo design is simply a part with dealt with size and also a history photo. I'm likewise giving the retina version of it using the medias queries.



As I created previously, the shadow part is a hack service for making the inner box-shadow, without producing conflicts with the fields' boundaries. The email field has a grey border on the bottom, and the password a white border on the top. It creates type of an edge in between fields. Something various concerning the fields is that you could style the message placeholder utilizing::- webkit-input-placeholder.



The buttons received new slopes, and also added box-shadows. They additionally supply the exact same pushing state as the initial interface.

Finishing up.
And that's basically it. This is a great workout, to see what we can complete using only internet. Specifically with Sencha Touch, considering that we hear a lot of inquiries asking how easy/hard it is to customize Touch elements.

I wanted to use just CSS3, but for production it would certainly be better to utilize a strong picture for the radial background for non-iOS gadgets, as well as various other sutil renovations. From my experience it does way better.