Facebook Login Page for Mobile

Facebook Login Page For Mobile: Would not be trendy if we selected some native mobile UI and also aim to recreate them utilizing just HTML5, CSS3 as well as JavaScript? So, today is Facebook's remarkable IPO as well as I took their clean & sophisticated login screen as well as recreated it for the internet! Right here it is the final result, some code and comments.

Facebook Login Page For Mobile

Disclaimer: I developed this app with the apple iphone Facebook App in mind. I just examined the app on apple iphone. I already discovered that the radial slope history looks pixelated on Chrome, as well as I likewise believe that because of various other gradients, alpha shades and etc this app will make some Android and also BlackBerry tools scream. Please don't blame me:-RRB-.

The view it's very easy. We have the logo, 2 areas and also 3 switches. The only point that could look different is the part with CSS course 'darkness'. Given that I had not been able to create a box-shadow for the fields without creating conflicts with their boundaries, I utilize this component as a layer on top of the areas with the inner darkness.

Concerning the theming, there's a lot of CSS3 things inside. I'm utilizing Sass with Compass framework, so it reduces some of the hurdles of ordinary CSS. Logo design is just a component with repaired size and a background photo. I'm likewise providing the retina variation of it utilizing the medias queries.

As I composed formerly, the darkness part is a hack remedy for making the inner box-shadow, without creating conflicts with the areas' borders. The email area has a gray border on the bottom, and the password a white approach the top. It creates type of a side in between fields. Something various concerning the areas is that you could design the text placeholder using::- webkit-input-placeholder.

The switches received brand-new slopes, and additional box-shadows. They additionally give the exact same pushing state as the original interface.

Wrapping up.
And that's practically it. This is a terrific workout, to see exactly what we could achieve making use of only web. Specifically with Sencha Touch, because we listen to a lot of inquiries asking just how easy/hard it is to personalize Touch parts.

I wanted to make use of only CSS3, however, for manufacturing it would certainly be much better to use a strong image for the radial background for non-iOS tools, as well as other sutil enhancements. From my experience it executes way far better.