Facebook Login Mobile



Facebook Login Mobile: Would not be awesome if we chose some indigenous mobile UI and try to recreate them making use of just HTML5, CSS3 and JavaScript? So, today is Facebook's amazing IPO and I took their clean & elegant login display and recreated it for the internet! Below it is the final result, some code and also remarks.

Facebook Login Mobile


Disclaimer: I created this application with the iPhone Facebook Application in mind. I only evaluated the application on apple iphone. I currently saw that the radial slope background looks pixelated on Chrome, and I likewise believe that due to various other gradients, alpha colors and also etc this app will make some Android as well as BlackBerry gadgets shout. Please do not blame me:-RRB-.

View.
The view it's quite straightforward. We have the logo design, 2 areas as well as 3 buttons. The only thing that could look various is the element with CSS class 'shadow'. Because I wasn't able to create a box-shadow for the fields without developing conflicts with their borders, I utilize this component as a layer in addition to the fields with the inner darkness.

Theming.
About the theming, there's a lot of CSS3 stuff inside. I'm using Sass with Compass structure, so it alleviates several of the obstacles of plain CSS. Logo is just an element with repaired dimension and also a history photo. I'm likewise supplying the retina variation of it making use of the medias questions.



As I created formerly, the darkness part is a hack solution for making the inner box-shadow, without developing conflicts with the fields' borders. The e-mail field has a grey approach all-time low, and the password a white border on the top. It develops type of a side between fields. Something various concerning the areas is that you can design the text placeholder utilizing::- webkit-input-placeholder.



The switches received new slopes, and added box-shadows. They likewise supply the very same pressing state as the initial interface.

Finishing up.
And that's virtually it. This is a wonderful workout, to see exactly what we can complete making use of just internet. Specially with Sencha Touch, considering that we hear a great deal of inquiries asking just how easy/hard it is to customize Touch components.

I wished to use just CSS3, but also for production it would certainly be far better to use a solid photo for the radial history for non-iOS tools, and other sutil renovations. From my experience it performs way better.