Facebook Mobile Site Login



Facebook Mobile Site Login: Would not be trendy if we chose some native mobile UI and also attempt to recreate them making use of only HTML5, CSS3 and JavaScript? So, today is Facebook's extraordinary IPO and I took their clean & sophisticated login screen and also recreated it for the internet! Here it is the result, some code as well as comments.

Facebook Mobile Site Login


Please note: I produced this application with the iPhone Facebook Application in mind. I just tested the application on apple iphone. I already noticed that the radial slope history looks pixelated on Chrome, and also I also believe that because of other gradients, alpha shades and etc this app will certainly make some Android and also BlackBerry gadgets howl. Please do not condemn me:-RRB-.

View.
The sight it's very straightforward. We have the logo design, 2 areas and also 3 buttons. The only thing that might look different is the part with CSS course 'shadow'. Since I had not been able to develop a box-shadow for the areas without creating conflicts with their borders, I use this component as a layer in addition to the areas with the internal darkness.

Theming.
About the theming, there's a lot of CSS3 things inside. I'm utilizing Sass with Compass framework, so it reduces several of the difficulties of ordinary CSS. Logo is simply a part with dealt with size as well as a history photo. I'm additionally providing the retina variation of it utilizing 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 areas' borders. The email area has a gray verge on the bottom, and also the password a white verge on the top. It develops kind of an edge between areas. Something various regarding the fields is that you can design the message placeholder making use of::- webkit-input-placeholder.



The switches got new gradients, and also extra box-shadows. They likewise provide the very same pushing state as the initial interface.

Completing.
Which's practically it. This is a wonderful workout, to see exactly what we could achieve making use of only web. Specifically with Sencha Touch, because we listen to a great deal of inquiries asking how easy/hard it is to tailor Touch components.

I wanted to use just CSS3, but for manufacturing it would be much better to utilize a solid picture for the radial history for non-iOS gadgets, as well as various other sutil enhancements. From my experience it performs way much better.