Facebook Mobile Web Login

Facebook Mobile Web Login: Wouldn't be cool if we selected some native mobile UI and aim to recreate them making use of just HTML5, CSS3 and also JavaScript? So, today is Facebook's amazing IPO as well as I took their tidy & elegant login screen and also recreated it for the internet! Below it is the result, some code as well as remarks.

Facebook Mobile Web Login

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

The view it's pretty basic. We have the logo, 2 areas and 3 buttons. The only thing that may look different is the element with CSS class 'darkness'. Considering that I had not been able to produce 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 stuff inside. I'm using Sass with Compass structure, so it relieves some of the difficulties of plain CSS. Logo design is simply a component with taken care of dimension as well as a background image. I'm likewise supplying the retina version of it using the medias inquiries.

As I created previously, the darkness part is a hack remedy for making the internal box-shadow, without creating conflicts with the fields' boundaries. The e-mail field has a gray border on all-time low, and the password a white verge on the top. It develops type of an edge between areas. Something various regarding the fields is that you can design the text placeholder utilizing::- webkit-input-placeholder.

The buttons got brand-new gradients, and also extra box-shadows. They additionally give the exact same pushing state as the initial user interface.

And that's virtually it. This is a fantastic exercise, to see just what we could achieve using just internet. Specifically with Sencha Touch, because we listen to a great deal of inquiries asking how easy/hard it is to personalize Touch components.

I wished to use only CSS3, but also for production it would be much better to use a strong picture for the radial background for non-iOS devices, and other sutil improvements. From my experience it executes way much better.