Login Facebook Mobile Phone



Login Facebook Mobile Phone: Would not be trendy if we chose some native mobile UI as well as aim to recreate them utilizing only HTML5, CSS3 and JavaScript? So, today is Facebook's extraordinary IPO and I took their clean & sophisticated login display and recreated it for the web! Here it is the final result, some code and also remarks.

Login Facebook Mobile Phone


Disclaimer: I created this application with the iPhone Facebook App in mind. I just evaluated the application on iPhone. I already observed that the radial gradient background looks pixelated on Chrome, as well as I also presume that as a result of other slopes, alpha shades as well as etc this app will certainly make some Android as well as BlackBerry devices shout. Please don't condemn me:-RRB-.

Sight.
The view it's very easy. We have the logo, 2 areas and 3 switches. The only point that may look various is the element with CSS class 'darkness'. Given that I had not been able to produce a box-shadow for the areas without developing conflicts with their borders, I use this element as a layer on top of the areas with the internal darkness.

Theming.
About the theming, there's a lot of CSS3 things inside. I'm utilizing Sass with Compass structure, so it eases some of the hurdles of simple CSS. Logo is just a component with taken care of dimension and also a background photo. I'm likewise providing the retina variation of it using the medias inquiries.



As I composed formerly, the darkness element is a hack solution for making the inner box-shadow, without developing conflicts with the areas' boundaries. The email area has a grey border on all-time low, and the password a white approach the top. It produces kind of a side between fields. Something different concerning the fields is that you can style the message placeholder making use of::- webkit-input-placeholder.



The switches obtained brand-new slopes, and also additional box-shadows. They additionally offer the very same pressing state as the original interface.

Completing.
And that's basically it. This is a terrific workout, to see exactly what we could achieve making use of just internet. Particularly with Sencha Touch, since we listen to a great deal of questions asking how easy/hard it is to customize Touch elements.

I intended to make use of just CSS3, however, for manufacturing it would certainly be much better to utilize a strong image for the radial background for non-iOS gadgets, as well as other sutil enhancements. From my experience it does way much better.