Facebook Login Welcome Mobile Free Download

Facebook Login Welcome Mobile Free Download: Wouldn't be awesome if we selected some indigenous mobile UI and try to recreate them using just HTML5, CSS3 as well as JavaScript? So, today is Facebook's extraordinary IPO and I took their clean & elegant login screen and recreated it for the web! Here it is the outcome, some code and also comments.

Facebook Login Welcome Mobile Free Download

Disclaimer: I developed this app with the iPhone Facebook Application in mind. I just examined the app on apple iphone. I currently discovered that the radial gradient background looks pixelated on Chrome, and I likewise believe that due to other gradients, alpha shades and also etc this application will certainly make some Android and also BlackBerry tools shout. Please don't condemn me:-RRB-.

The sight it's pretty basic. We have the logo, 2 areas and 3 buttons. The only thing that might look various is the component with CSS class 'shadow'. Since I wasn't able to develop a box-shadow for the fields without producing conflicts with their boundaries, I use this component as a layer on top of the fields with the inner darkness.

Concerning the theming, there's a lot of CSS3 things inside. I'm making use of Sass with Compass framework, so it relieves some of the obstacles of plain CSS. Logo design is just an element with dealt with dimension and also a history picture. I'm additionally supplying the retina variation of it utilizing the medias inquiries.

As I composed previously, the darkness component is a hack option for making the inner box-shadow, without creating conflicts with the fields' boundaries. The email area has a gray verge on the bottom, and the password a white approach the top. It develops type of an edge between areas. Something various regarding the fields is that you can style the text placeholder utilizing::- webkit-input-placeholder.

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

And that's virtually it. This is a fantastic workout, to see exactly what we could accomplish utilizing only internet. Specifically with Sencha Touch, given that we hear a great deal of concerns asking how easy/hard it is to personalize Touch components.

I wanted to make use of only CSS3, but for manufacturing it would certainly be far better to make use of a solid image for the radial background for non-iOS gadgets, and other sutil enhancements. From my experience it carries out way much better.