Www.facebook Mobile Login



Www.Facebook Mobile Login: Wouldn't be great if we selected some indigenous mobile UI and also try to recreate them utilizing just HTML5, CSS3 as well as JavaScript? So, today is Facebook's amazing IPO as well as I took their tidy & stylish login screen as well as recreated it for the web! Right here it is the result, some code and also comments.

Www.Facebook Mobile Login


Please note: I produced this app with the iPhone Facebook Application in mind. I just examined the app on iPhone. I already discovered that the radial slope history looks pixelated on Chrome, and I also think that because of other slopes, alpha colors as well as etc this application will certainly make some Android as well as BlackBerry gadgets scream. Please don't criticize me:-RRB-.

View.
The view it's quite simple. We have the logo, 2 areas and also 3 buttons. The only point that might look various is the element with CSS course 'darkness'. Because I wasn't able to produce a box-shadow for the fields without developing conflicts with their borders, I use this element as a layer on top of the areas with the internal darkness.

Theming.
About the theming, there's a great deal of CSS3 things inside. I'm utilizing Sass with Compass structure, so it eases a few of the difficulties of plain CSS. Logo design is simply a part with taken care of dimension and a history image. I'm additionally providing the retina version of it using the medias inquiries.



As I composed formerly, the shadow component is a hack option for making the internal box-shadow, without developing conflicts with the areas' borders. The email area has a gray border on all-time low, as well as the password a white verge on the top. It produces sort of an edge in between fields. Something different about the areas is that you can style the message placeholder utilizing::- webkit-input-placeholder.



The buttons received brand-new gradients, and extra box-shadows. They likewise give the very same pressing state as the original user interface.

Finishing up.
Which's virtually it. This is a great exercise, to see what we could achieve using only internet. Specifically with Sencha Touch, since we hear a lot of inquiries asking how easy/hard it is to personalize Touch elements.

I wanted to make use of just CSS3, but for manufacturing it would be better to utilize a strong image for the radial background for non-iOS tools, as well as various other sutil renovations. From my experience it performs way much better.