M.facebook Login Mobile



M.Facebook Login Mobile: Would not be awesome if we chose some native mobile UI and attempt to recreate them utilizing only HTML5, CSS3 as well as JavaScript? So, today is Facebook's extraordinary IPO and I took their clean & classy login screen and also recreated it for the internet! Here it is the outcome, some code and remarks.

M.Facebook Login Mobile


Disclaimer: I produced this app with the apple iphone Facebook Application in mind. I only tested the app on apple iphone. I already saw that the radial gradient background looks pixelated on Chrome, as well as I additionally believe that due to other gradients, alpha shades and also etc this app will certainly make some Android as well as BlackBerry gadgets shriek. Please don't blame me:-RRB-.

View.
The sight it's very easy. We have the logo design, 2 fields and 3 switches. The only point that could look various is the component with CSS course 'shadow'. Since I wasn't able to create a box-shadow for the fields without creating conflicts with their borders, I use this part as a layer on top of the areas with the inner darkness.

Theming.
Concerning the theming, there's a great deal of CSS3 things inside. I'm using Sass with Compass framework, so it alleviates some of the hurdles of simple CSS. Logo design is simply a part with dealt with dimension and a background photo. I'm additionally offering the retina variation of it using the medias inquiries.



As I composed previously, the darkness component is a hack service for making the internal box-shadow, without developing conflicts with the areas' borders. The e-mail field has a gray verge on all-time low, and also the password a white verge on the top. It creates type of a side in between areas. Something various about the areas is that you could design the message placeholder using::- webkit-input-placeholder.



The buttons got brand-new slopes, and also additional box-shadows. They also supply the very same pushing state as the initial interface.

Concluding.
Which's basically it. This is a fantastic exercise, to see just what we can achieve using just web. Specially with Sencha Touch, since we listen to a great deal of concerns asking how easy/hard it is to personalize Touch parts.

I wished to utilize just CSS3, but also for manufacturing it would be much better to utilize a strong photo for the radial background for non-iOS tools, and also various other sutil enhancements. From my experience it executes way much better.