Www Facebook Login Com Mobile



Www Facebook Login Com Mobile: Would not be cool if we picked some native mobile UI as well as try to recreate them using just HTML5, CSS3 and also JavaScript? So, today is Facebook's phenomenal IPO and I took their tidy & elegant login screen as well as recreated it for the internet! Right here it is the result, some code and also remarks.

Www Facebook Login Com Mobile


Disclaimer: I produced this application with the apple iphone Facebook App in mind. I just checked the app on apple iphone. I already saw that the radial slope history looks pixelated on Chrome, and also I likewise presume that as a result of various other slopes, alpha shades as well as etc this application will certainly make some Android and also BlackBerry devices yell. Please don't condemn me:-RRB-.

View.
The view it's quite straightforward. We have the logo, 2 fields and also 3 buttons. The only thing that might look different is the component with CSS course 'darkness'. Since I wasn't able to develop a box-shadow for the areas without creating conflicts with their boundaries, I use this component as a layer in addition to the areas with the internal darkness.

Theming.
Concerning the theming, there's a great deal of CSS3 stuff inside. I'm using Sass with Compass structure, so it reduces a few of the obstacles of ordinary CSS. Logo design is just a component with fixed size and also a background picture. I'm additionally giving the retina variation of it using the medias questions.



As I wrote formerly, the shadow element is a hack solution for making the internal box-shadow, without creating conflicts with the areas' boundaries. The email field has a gray approach the bottom, and also the password a white approach the top. It develops sort of a side between areas. Something different about the areas is that you can design the text placeholder utilizing::- webkit-input-placeholder.



The buttons obtained new slopes, and also additional box-shadows. They likewise provide the very same pressing state as the initial interface.

Concluding.
And that's practically it. This is an excellent workout, to see exactly what we could accomplish making use of just web. Specially with Sencha Touch, since we listen to a lot of inquiries asking how easy/hard it is to personalize Touch components.

I wished to utilize only CSS3, however, for production it would be far better to make use of a solid picture for the radial history for non-iOS devices, and also other sutil improvements. From my experience it does way better.