Mobile Login for Facebook



Mobile Login For Facebook: Would not be amazing if we selected some indigenous mobile UI and try to recreate them making use of just HTML5, CSS3 and also JavaScript? So, today is Facebook's phenomenal IPO and also I took their tidy & stylish login display and also recreated it for the web! Here it is the result, some code and comments.

Mobile Login For Facebook


Please note: I produced this application with the iPhone Facebook App in mind. I only checked the app on apple iphone. I already observed that the radial slope background looks pixelated on Chrome, as well as I additionally believe that because of other slopes, alpha shades as well as etc this app will make some Android as well as BlackBerry gadgets shout. Please don't condemn me:-RRB-.

View.
The sight it's quite straightforward. We have the logo design, 2 fields as well as 3 switches. The only thing that may look various is the part with CSS course 'darkness'. Given that I wasn't able to produce a box-shadow for the fields without developing conflicts with their boundaries, I use this component as a layer in addition to the areas with the internal darkness.

Theming.
Regarding the theming, there's a lot of CSS3 stuff inside. I'm making use of Sass with Compass structure, so it alleviates several of the obstacles of simple CSS. Logo is just an element with repaired dimension as well as a background image. I'm additionally supplying the retina version of it utilizing the medias inquiries.



As I composed formerly, the shadow part is a hack service for making the internal box-shadow, without developing conflicts with the fields' borders. The e-mail area has a gray border on the bottom, and also the password a white approach the top. It develops kind of a side in between fields. Something different about the areas is that you could style the text placeholder utilizing::- webkit-input-placeholder.



The buttons obtained brand-new gradients, and additional box-shadows. They additionally supply the exact same pushing state as the initial interface.

Completing.
Which's basically it. This is an excellent workout, to see what we could complete utilizing only web. Specifically with Sencha Touch, given that we listen to a lot of inquiries asking how easy/hard it is to personalize Touch parts.

I intended to make use of only CSS3, but for manufacturing it would certainly be much better to use a strong photo for the radial background for non-iOS devices, and other sutil improvements. From my experience it carries out way better.