Facebook Mobile Login Page M



Facebook Mobile Login Page M: Wouldn't be cool if we chose some indigenous mobile UI as well as attempt to recreate them utilizing just HTML5, CSS3 as well as JavaScript? So, today is Facebook's remarkable IPO and I took their tidy & sophisticated login screen and recreated it for the web! Here it is the outcome, some code and remarks.

Facebook Mobile Login Page M


Please note: I produced this application with the iPhone Facebook App in mind. I just tested the app on iPhone. I currently noticed that the radial slope history looks pixelated on Chrome, and also I also presume that due to other gradients, alpha shades as well as etc this app will make some Android and also BlackBerry tools yell. Please don't criticize me:-RRB-.

Sight.
The view it's rather simple. We have the logo, 2 fields as well as 3 switches. The only thing that may look various is the element with CSS course 'darkness'. Since 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 inner darkness.

Theming.
Concerning the theming, there's a lot of CSS3 stuff inside. I'm making use of Sass with Compass structure, so it alleviates a few of the hurdles of simple CSS. Logo is just a part with repaired dimension as well as a background photo. I'm additionally offering the retina version of it making use of the medias inquiries.



As I composed formerly, the darkness part is a hack option for making the inner box-shadow, without creating conflicts with the areas' borders. The e-mail field has a gray approach the bottom, and also the password a white verge on the top. It creates type of an edge in between fields. Something various about the areas is that you can style the text placeholder using::- webkit-input-placeholder.



The switches obtained new gradients, as well as added box-shadows. They likewise give the very same pushing state as the initial interface.

Finishing up.
Which's practically it. This is an excellent workout, to see what we can accomplish making use of just web. Specifically with Sencha Touch, because we hear a great deal of concerns asking exactly how easy/hard it is to tailor Touch parts.

I wished to make use of only CSS3, but for manufacturing it would be better to make use of a solid picture for the radial history for non-iOS tools, and other sutil improvements. From my experience it carries out way better.