Facebook Login Through Mobile

Facebook Login Through Mobile: Would not be trendy if we picked some native mobile UI and try to recreate them using only HTML5, CSS3 as well as JavaScript? So, today is Facebook's phenomenal IPO and I took their clean & classy login screen and recreated it for the internet! Right here it is the outcome, some code as well as remarks.

Facebook Login Through Mobile

Disclaimer: I created this application with the apple iphone Facebook App in mind. I only examined the app on apple iphone. I already observed that the radial slope background looks pixelated on Chrome, and I also believe that due to other gradients, alpha colors as well as etc this application will make some Android and BlackBerry tools yell. Please do not condemn me:-RRB-.

The view it's rather simple. We have the logo, 2 fields and 3 switches. The only point that may look different is the element with CSS course 'shadow'. Because I wasn't able to produce a box-shadow for the areas without creating conflicts with their boundaries, I utilize this component as a layer on top of the fields with the inner shadow.

About the theming, there's a great deal of CSS3 stuff inside. I'm using Sass with Compass structure, so it relieves several of the hurdles of plain CSS. Logo design is simply an element with repaired dimension and a history photo. I'm likewise offering the retina version of it using the medias queries.

As I created formerly, the darkness element is a hack remedy for making the internal box-shadow, without creating conflicts with the areas' borders. The email field has a grey verge on the bottom, and the password a white verge on the top. It creates type of an edge between areas. Something different concerning the fields is that you can style the text placeholder making use of::- webkit-input-placeholder.

The switches got new gradients, and also added box-shadows. They additionally provide the very same pushing state as the initial interface.

Finishing up.
Which's pretty much it. This is a terrific exercise, to see just what we could achieve making use of just internet. Specifically with Sencha Touch, since we hear a great deal of questions asking how easy/hard it is to personalize Touch components.

I wished to utilize just CSS3, however, for production it would be far better to use a solid photo for the radial background for non-iOS gadgets, and various other sutil enhancements. From my experience it carries out way much better.