Facebook Login Using Mobile Phone



Facebook Login Using Mobile Phone: Would not be awesome if we chose some indigenous mobile UI and attempt to recreate them using just HTML5, CSS3 and JavaScript? So, today is Facebook's extraordinary IPO as well as I took their clean & classy login screen as well as recreated it for the internet! Below it is the final result, some code and remarks.

Facebook Login Using Mobile Phone


Disclaimer: I produced this application with the apple iphone Facebook Application in mind. I just checked the app on iPhone. I already discovered that the radial slope background looks pixelated on Chrome, and I also suspect that as a result of various other slopes, alpha shades and also etc this app will certainly make some Android as well as BlackBerry devices howl. Please do not criticize me:-RRB-.

View.
The sight it's pretty easy. We have the logo design, 2 fields and also 3 buttons. The only thing that could look different is the component with CSS class 'darkness'. Given that I wasn't able to produce a box-shadow for the fields without creating conflicts with their borders, I utilize this component as a layer on top of the areas with the internal shadow.

Theming.
Regarding the theming, there's a great deal of CSS3 stuff inside. I'm utilizing Sass with Compass structure, so it alleviates a few of the obstacles of plain CSS. Logo is simply a component with repaired size and also a history photo. I'm also supplying the retina version of it using the medias queries.



As I created formerly, the darkness part is a hack remedy for making the internal box-shadow, without creating conflicts with the areas' boundaries. The e-mail area has a gray verge on the bottom, as well as the password a white approach the top. It creates kind of a side between areas. Something various regarding the fields is that you could style the message placeholder utilizing::- webkit-input-placeholder.



The switches received new gradients, and also added box-shadows. They also provide the very same pushing state as the original interface.

Wrapping up.
And that's basically it. This is an excellent exercise, to see exactly what we can complete making use of only web. Specially with Sencha Touch, given that we hear a great deal of concerns asking how easy/hard it is to tailor Touch elements.

I wanted to make use of only CSS3, but also for production it would be far better to utilize a strong photo for the radial history for non-iOS devices, and various other sutil renovations. From my experience it does way better.