Facebook Mobile Facebook Mobile Login Page



Facebook Mobile Facebook Mobile Login Page: Would not be great if we chose some native mobile UI and attempt to recreate them making use of only HTML5, CSS3 and JavaScript? So, today is Facebook's extraordinary IPO and also I took their clean & stylish login screen and also recreated it for the web! Here it is the result, some code as well as comments.

Facebook Mobile Facebook Mobile Login Page


Disclaimer: I developed this app with the apple iphone Facebook Application in mind. I just evaluated the app on apple iphone. I currently observed that the radial slope history looks pixelated on Chrome, and also I also suspect that as a result of various other gradients, alpha colors and also etc this app will certainly make some Android as well as BlackBerry gadgets yell. Please do not blame me:-RRB-.

Sight.
The sight it's rather easy. We have the logo, 2 fields as well as 3 buttons. The only thing that might look different is the part with CSS class 'darkness'. Given that I had not been able to develop a box-shadow for the areas without producing conflicts with their boundaries, I use this component as a layer in addition to the areas with the internal darkness.

Theming.
Concerning the theming, there's a great deal of CSS3 things inside. I'm utilizing Sass with Compass structure, so it relieves a few of the hurdles of plain CSS. Logo design is just an element with fixed size and a background picture. I'm also giving the retina version of it making use of the medias questions.



As I created previously, the darkness part is a hack solution for making the inner box-shadow, without developing conflicts with the areas' borders. The e-mail field has a grey approach all-time low, and the password a white border on the top. It creates kind of an edge between fields. Something different concerning the areas is that you could design the message placeholder using::- webkit-input-placeholder.



The buttons got brand-new gradients, and also additional box-shadows. They additionally offer the same pushing state as the original interface.

Concluding.
Which's basically it. This is an excellent workout, to see exactly what we can achieve making use of only internet. Particularly with Sencha Touch, given that we hear a lot of concerns asking just how easy/hard it is to tailor Touch elements.

I wished to make use of just CSS3, however, for production it would certainly be much better to utilize a solid picture for the radial background for non-iOS gadgets, and also various other sutil renovations. From my experience it does way better.