M Facebook Login Mobile



M Facebook Login Mobile: Would not be trendy if we chose some native mobile UI and try to recreate them utilizing just HTML5, CSS3 and also JavaScript? So, today is Facebook's phenomenal IPO and also I took their tidy & elegant login screen and recreated it for the web! Below it is the result, some code and remarks.

M Facebook Login Mobile


Disclaimer: I created this application with the iPhone Facebook Application in mind. I only tested the application on iPhone. I currently saw that the radial slope history looks pixelated on Chrome, as well as I also believe that because of other slopes, alpha colors and also etc this application will certainly make some Android as well as BlackBerry tools shriek. Please don't blame me:-RRB-.

Sight.
The view it's rather basic. We have the logo design, 2 fields as well as 3 switches. The only thing that could look various is the part with CSS course 'darkness'. Because I wasn't able to develop a box-shadow for the fields without developing conflicts with their boundaries, I use this component as a layer in addition to the fields with the internal darkness.

Theming.
Concerning the theming, there's a lot of CSS3 stuff inside. I'm making use of Sass with Compass framework, so it eases several of the hurdles of simple CSS. Logo is just a part with taken care of size as well as a background image. I'm additionally providing the retina version of it using the medias inquiries.



As I wrote previously, the shadow part is a hack option for making the internal box-shadow, without producing conflicts with the fields' boundaries. The e-mail field has a grey approach the bottom, and the password a white approach the top. It develops sort of a side between fields. Something different about the areas is that you could style the message placeholder making use of::- webkit-input-placeholder.



The switches got brand-new gradients, and additional box-shadows. They additionally supply the exact same pushing state as the initial user interface.

Finishing up.
And that's virtually it. This is a wonderful exercise, to see just what we can achieve using just web. Specifically with Sencha Touch, since we listen to a great deal of concerns asking how easy/hard it is to personalize Touch components.

I wished to utilize only CSS3, but for production it would be far better to use a strong photo for the radial background for non-iOS devices, and various other sutil enhancements. From my experience it performs way far better.