Facebook Login Mobile android

Facebook Login Mobile Android: Wouldn't be cool if we chose some indigenous mobile UI as well as try to recreate them making use of just HTML5, CSS3 and JavaScript? So, today is Facebook's remarkable IPO and also I took their tidy & classy login display as well as recreated it for the internet! Here it is the final result, some code and also comments.

Facebook Login Mobile Android

Please note: I created this application with the iPhone Facebook Application in mind. I just tested the app on apple iphone. I currently discovered that the radial gradient history looks pixelated on Chrome, and also I likewise suspect that due to various other gradients, alpha colors and etc this app will certainly make some Android and also BlackBerry gadgets scream. Please do not condemn me:-RRB-.

The view it's quite simple. We have the logo design, 2 fields as well as 3 buttons. The only point that may look various is the component with CSS class 'darkness'. Since I wasn't able to create a box-shadow for the fields without creating conflicts with their borders, I utilize this part as a layer in addition to the areas with the internal shadow.

About the theming, there's a lot of CSS3 stuff inside. I'm using Sass with Compass structure, so it minimizes several of the difficulties of plain CSS. Logo design is just an element with dealt with dimension as well as a history photo. I'm additionally providing the retina version of it making use of the medias queries.

As I created formerly, the darkness part is a hack option for making the internal box-shadow, without producing conflicts with the areas' boundaries. The e-mail field has a grey verge on the bottom, and also the password a white approach the top. It develops sort of an edge between fields. Something different regarding the fields is that you can design the message placeholder utilizing::- webkit-input-placeholder.

The buttons got brand-new gradients, and also added box-shadows. They likewise supply the very same pushing state as the original interface.

Finishing up.
And that's practically it. This is an excellent workout, to see just what we can achieve using only internet. Specially with Sencha Touch, given that we hear a great deal of inquiries asking exactly how easy/hard it is to tailor Touch elements.

I wished to make use of only CSS3, but also for production it would be better to use a solid photo for the radial history for non-iOS tools, and also various other sutil improvements. From my experience it does way much better.