Www Login Facebook Com Mobile



Www Login Facebook Com Mobile: Would not be amazing if we selected some native mobile UI and also attempt to recreate them making use of just HTML5, CSS3 and JavaScript? So, today is Facebook's remarkable IPO and I took their clean & stylish login screen as well as recreated it for the web! Here it is the result, some code as well as comments.

Www Login Facebook Com Mobile


Please note: I produced this app with the apple iphone Facebook App in mind. I just evaluated the app on apple iphone. I already noticed that the radial gradient background looks pixelated on Chrome, and I likewise presume that as a result of other slopes, alpha shades as well as etc this application will make some Android and also BlackBerry tools yell. Please do not blame me:-RRB-.

Sight.
The view it's rather basic. We have the logo, 2 areas and also 3 buttons. The only thing that may look different is the component with CSS class 'shadow'. Considering that I had not been able to create a box-shadow for the fields without producing conflicts with their borders, I use this component as a layer in addition to the areas with the internal shadow.

Theming.
About the theming, there's a great deal of CSS3 stuff inside. I'm utilizing Sass with Compass framework, so it minimizes several of the difficulties of simple CSS. Logo is just a component with dealt with dimension and a background picture. I'm additionally offering the retina variation of it making use of the medias queries.



As I created formerly, the darkness element is a hack service for making the internal box-shadow, without producing conflicts with the fields' boundaries. The e-mail area has a gray approach the bottom, and the password a white approach the top. It produces kind of an edge between fields. Something various about the areas is that you could design the text placeholder making use of::- webkit-input-placeholder.



The switches obtained new slopes, and also extra box-shadows. They also supply the very same pushing state as the initial interface.

Concluding.
And that's pretty much it. This is a fantastic workout, to see exactly what we can complete utilizing only web. Particularly with Sencha Touch, since we hear a lot of questions asking exactly how easy/hard it is to customize Touch elements.

I wished to make use of only CSS3, however, for manufacturing it would certainly be better to make use of a strong picture for the radial history for non-iOS tools, and also various other sutil improvements. From my experience it carries out way much better.