Facebook.com Mobile Login



Facebook.Com Mobile Login: Would not be great if we selected 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 tidy & stylish login screen and recreated it for the internet! Right here it is the outcome, some code and remarks.

Facebook.Com Mobile Login


Disclaimer: I created this application with the iPhone Facebook Application in mind. I only evaluated the app on apple iphone. I currently saw that the radial gradient history looks pixelated on Chrome, and I also think that as a result of other slopes, alpha colors as well as etc this application will make some Android as well as BlackBerry gadgets shriek. Please don't criticize me:-RRB-.

Sight.
The sight it's rather easy. We have the logo design, 2 areas and 3 buttons. The only point that may look various is the part with CSS class 'darkness'. Since I wasn't able to create a box-shadow for the areas without developing conflicts with their boundaries, I use this component as a layer on top of the areas with the inner darkness.

Theming.
Regarding the theming, there's a great deal of CSS3 stuff inside. I'm utilizing Sass with Compass framework, so it alleviates a few of the difficulties of plain CSS. Logo is just a part with dealt with dimension and a background picture. I'm additionally supplying the retina variation of it using the medias questions.



As I composed formerly, the darkness part is a hack service for making the internal box-shadow, without creating conflicts with the areas' borders. The email area has a gray border on the bottom, as well as the password a white verge on the top. It develops type of an edge in between areas. Something various about the fields is that you could style the message placeholder utilizing::- webkit-input-placeholder.



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

Wrapping up.
And that's practically it. This is a fantastic workout, to see what we could achieve using only internet. Particularly with Sencha Touch, since we hear a great deal of concerns asking how easy/hard it is to personalize Touch elements.

I wished to make use of just CSS3, but also for manufacturing it would be better to use a solid photo for the radial history for non-iOS tools, and various other sutil enhancements. From my experience it carries out way much better.