Facebook Login On Mobile Phone



Facebook Login On Mobile Phone: Would not be cool if we chose some indigenous mobile UI and attempt to recreate them utilizing just HTML5, CSS3 and also JavaScript? So, today is Facebook's extraordinary IPO as well as I took their clean & elegant login screen as well as recreated it for the web! Right here it is the outcome, some code and comments.

Facebook Login On Mobile Phone


Please note: I created this app with the apple iphone Facebook Application in mind. I just examined the app on iPhone. I currently discovered that the radial slope history looks pixelated on Chrome, and I also believe that due to various other gradients, alpha colors as well as etc this app will make some Android and BlackBerry tools yell. Please don't condemn me:-RRB-.

Sight.
The view it's quite straightforward. We have the logo, 2 areas and 3 switches. The only thing that might look various is the element with CSS class 'shadow'. Because I wasn't able to produce a box-shadow for the areas without creating conflicts with their boundaries, I use this element as a layer in addition to the fields with the internal shadow.

Theming.
About the theming, there's a great deal of CSS3 things inside. I'm making use of Sass with Compass framework, so it eases several of the difficulties of plain CSS. Logo is just an element with repaired dimension and a background picture. I'm also supplying the retina version of it making use of the medias inquiries.



As I wrote formerly, the darkness component is a hack option for making the internal box-shadow, without developing conflicts with the areas' boundaries. The e-mail area has a gray verge on all-time low, and the password a white approach the top. It develops sort of a side in between areas. Something various about the fields is that you could design the message placeholder using::- webkit-input-placeholder.



The switches received new gradients, as well as extra box-shadows. They likewise give the very same pushing state as the original user interface.

Concluding.
Which's pretty much it. This is a terrific exercise, to see exactly what we could complete making use of only internet. Specifically with Sencha Touch, since we listen to a great deal of questions asking just how easy/hard it is to personalize Touch elements.

I intended to make use of just CSS3, however, for production it would be far better to utilize a solid photo for the radial history for non-iOS devices, and also other sutil enhancements. From my experience it does way better.