Facebook Login Home Page Mobile I



Facebook Login Home Page Mobile I: Would not be amazing if we selected some native mobile UI and try to recreate them using only HTML5, CSS3 and also JavaScript? So, today is Facebook's phenomenal IPO and I took their clean & classy login screen and recreated it for the web! Below it is the outcome, some code and remarks.

Facebook Login Home Page Mobile I


Please note: I produced this app with the apple iphone Facebook App in mind. I just evaluated the application on iPhone. I currently discovered that the radial gradient history looks pixelated on Chrome, and I also suspect that due to various other slopes, alpha colors as well as etc this application will certainly make some Android and BlackBerry devices shout. Please do not condemn me:-RRB-.

Sight.
The sight it's quite basic. We have the logo design, 2 areas as well as 3 switches. The only point that may look various is the element with CSS class 'shadow'. Considering that I wasn't able to develop a box-shadow for the fields without developing conflicts with their boundaries, I use this element as a layer in addition to the areas with the inner shadow.

Theming.
Regarding the theming, there's a great deal of CSS3 stuff inside. I'm using Sass with Compass framework, so it minimizes several of the difficulties of ordinary CSS. Logo design is simply a component with fixed dimension and a history photo. I'm additionally giving the retina variation of it making use of the medias queries.



As I wrote formerly, the shadow element is a hack solution for making the internal box-shadow, without creating conflicts with the areas' borders. The email area has a gray verge on all-time low, and the password a white approach the top. It develops sort of an edge between fields. Something different concerning the areas is that you could style the text placeholder utilizing::- webkit-input-placeholder.



The switches got new slopes, and additional box-shadows. They also offer the very same pressing state as the original user interface.

Concluding.
Which's practically it. This is a wonderful exercise, to see exactly what we could complete using just web. Particularly with Sencha Touch, since we hear a lot of concerns asking exactly how easy/hard it is to customize Touch components.

I wished to make use of only CSS3, but also for manufacturing it would be better to utilize a solid picture for the radial background for non-iOS tools, and also various other sutil renovations. From my experience it executes way better.