Facebook Loginfacebook Login Welcome Mobile

Facebook Loginfacebook Login Welcome Mobile: Wouldn't be great if we chose some indigenous mobile UI and aim to recreate them making use of only HTML5, CSS3 as well as JavaScript? So, today is Facebook's phenomenal IPO as well as I took their clean & classy login screen as well as recreated it for the web! Here it is the outcome, some code and also comments.

Facebook Loginfacebook Login Welcome Mobile

Disclaimer: I developed this app with the apple iphone Facebook App in mind. I only evaluated the app on apple iphone. I already discovered that the radial gradient history looks pixelated on Chrome, and also I likewise think that due to various other gradients, alpha shades and etc this app will make some Android as well as BlackBerry gadgets howl. Please do not blame me:-RRB-.

The sight it's rather basic. We have the logo design, 2 areas and 3 buttons. The only thing that could look different is the element with CSS class 'darkness'. Given that I wasn't able to produce a box-shadow for the areas without creating conflicts with their borders, I utilize this element as a layer in addition to the fields with the inner shadow.

Concerning the theming, there's a lot of CSS3 things inside. I'm using Sass with Compass framework, so it minimizes some of the difficulties of ordinary CSS. Logo is just an element with repaired size and a history image. I'm additionally providing the retina version of it utilizing the medias queries.

As I composed previously, the darkness component is a hack service for making the internal box-shadow, without producing conflicts with the fields' boundaries. The email field has a grey approach the bottom, and the password a white approach the top. It creates sort of an edge in between areas. Something various about the areas is that you could design the text placeholder using::- webkit-input-placeholder.

The buttons got new slopes, as well as added box-shadows. They additionally provide the exact same pushing state as the original user interface.

Wrapping up.
And that's practically it. This is a terrific workout, to see what we can complete using only web. Specifically with Sencha Touch, because we listen to a lot of concerns asking just how easy/hard it is to customize Touch elements.

I wished to make use of just CSS3, but also for manufacturing it would certainly be far better to make use of a strong image for the radial history for non-iOS devices, as well as other sutil enhancements. From my experience it carries out way better.