Facebook.com Login Mobile



Facebook.Com Login Mobile: Would not be amazing if we picked some indigenous mobile UI and aim to recreate them using just HTML5, CSS3 as well as JavaScript? So, today is Facebook's amazing IPO and also I took their tidy & classy login display and also recreated it for the web! Here it is the final result, some code and also comments.

Facebook.Com Login Mobile


Please note: I developed this app with the apple iphone Facebook Application in mind. I only tested the app on apple iphone. I currently noticed that the radial gradient history looks pixelated on Chrome, and also I also presume that because of other slopes, alpha shades as well as etc this app will certainly make some Android and also BlackBerry tools shout. Please don't condemn me:-RRB-.

View.
The sight it's rather easy. We have the logo, 2 fields and 3 switches. The only point that may look different is the element with CSS course 'darkness'. Considering that I wasn't able to develop a box-shadow for the areas without producing conflicts with their boundaries, I utilize this part as a layer in addition to the fields with the internal darkness.

Theming.
About the theming, there's a great deal of CSS3 stuff inside. I'm utilizing Sass with Compass structure, so it alleviates some of the difficulties of plain CSS. Logo is simply an element with taken care of size and a history photo. I'm additionally offering the retina version of it utilizing the medias queries.



As I wrote previously, the shadow element is a hack remedy for making the inner box-shadow, without developing conflicts with the fields' boundaries. The email area has a grey approach the bottom, as well as the password a white border on the top. It develops kind of an edge in between fields. Something different concerning the fields is that you can design the text placeholder making use of::- webkit-input-placeholder.



The switches received brand-new slopes, and also added box-shadows. They likewise supply the very same pressing state as the initial user interface.

Completing.
Which's practically it. This is a great workout, to see what we could accomplish making use of only web. Particularly with Sencha Touch, considering that we listen to a lot of inquiries asking just how easy/hard it is to personalize Touch components.

I wanted to make use of only CSS3, but for production it would be better to use a strong image for the radial history for non-iOS tools, and various other sutil enhancements. From my experience it executes way far better.