Facebook Login Page for Mobile L



Facebook Login Page For Mobile L: Wouldn't be cool if we selected some native mobile UI as well as attempt to recreate them making use of only HTML5, CSS3 and also JavaScript? So, today is Facebook's phenomenal IPO as well as I took their tidy & elegant login display as well as recreated it for the web! Right here it is the result, some code and remarks.

Facebook Login Page For Mobile L


Disclaimer: I created this app with the apple iphone Facebook Application in mind. I just checked the application on iPhone. I already saw 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 application will certainly make some Android as well as BlackBerry gadgets shout. Please don't criticize me:-RRB-.

Sight.
The view it's very simple. We have the logo design, 2 areas as well as 3 buttons. The only thing that could look various is the part with CSS class 'shadow'. Given that I had not been able to produce a box-shadow for the areas without creating conflicts with their boundaries, I utilize this part as a layer in addition to the areas with the internal shadow.

Theming.
About the theming, there's a lot of CSS3 things inside. I'm utilizing Sass with Compass framework, so it alleviates several of the difficulties of plain CSS. Logo is simply a part with dealt with dimension and a background picture. I'm also providing the retina version of it using the medias inquiries.



As I created formerly, the shadow element is a hack option for making the internal box-shadow, without producing conflicts with the fields' boundaries. The e-mail area has a gray approach all-time low, as well as the password a white border on the top. It develops type of a side between areas. Something different concerning the areas is that you could design the message placeholder using::- webkit-input-placeholder.



The buttons obtained new gradients, and also extra box-shadows. They also offer the same pushing state as the original interface.

Completing.
Which's practically it. This is a terrific exercise, to see exactly what we could complete utilizing just web. Particularly with Sencha Touch, given that we hear a lot of inquiries asking how easy/hard it is to customize Touch parts.

I intended to make use of only CSS3, but also for production it would certainly be far better to use a solid picture for the radial background for non-iOS gadgets, and various other sutil improvements. From my experience it carries out way much better.