Mobile Facebook Login Page

Mobile Facebook Login Page: Would not be cool if we picked some indigenous mobile UI and also attempt to recreate them making use of just HTML5, CSS3 and also JavaScript? So, today is Facebook's extraordinary IPO and also I took their clean & elegant login screen and also recreated it for the web! Here it is the outcome, some code and also remarks.

Mobile Facebook Login Page

Please note: I produced this app with the iPhone Facebook Application in mind. I only examined the app on iPhone. I currently observed that the radial gradient background looks pixelated on Chrome, and I likewise suspect that as a result of various other slopes, alpha shades as well as etc this application will make some Android as well as BlackBerry gadgets shout. Please don't criticize me:-RRB-.

The view it's very easy. We have the logo design, 2 areas as well as 3 switches. The only point that could look various is the component with CSS class 'shadow'. Considering that I had not been able to produce a box-shadow for the areas without creating conflicts with their boundaries, I use this part as a layer on top of the fields with the inner darkness.

Regarding the theming, there's a lot of CSS3 stuff inside. I'm utilizing Sass with Compass structure, so it alleviates several of the hurdles of simple CSS. Logo design is just an element with repaired dimension and a history photo. I'm also providing the retina version of it making use of the medias inquiries.

As I created previously, the darkness component is a hack service for making the internal box-shadow, without producing conflicts with the areas' boundaries. The email area has a grey verge on the bottom, as well as 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 obtained brand-new slopes, and extra box-shadows. They also give the very same pushing state as the initial interface.

And that's pretty much it. This is a wonderful exercise, to see exactly what we could accomplish utilizing just internet. Particularly with Sencha Touch, considering that we hear a lot of questions asking how easy/hard it is to customize Touch parts.

I wanted to make use of only CSS3, but also for production it would be far better to utilize a solid photo for the radial history for non-iOS gadgets, and other sutil enhancements. From my experience it performs way better.