Facebook Login Welcome Mobile: Would not be great if we selected some native mobile UI as well as try to recreate them using just HTML5, CSS3 and also JavaScript? So, today is Facebook's amazing IPO as well as I took their tidy & sophisticated login display and also recreated it for the web! Right here it is the result, some code and remarks.
Facebook Login Welcome Mobile
Please note: I created this app with the iPhone Facebook Application in mind. I just examined the application on iPhone. I already observed that the radial slope history looks pixelated on Chrome, as well as I additionally think that because of various other gradients, alpha colors and etc this app will make some Android and BlackBerry tools shout. Please do not condemn me:-RRB-.
Sight.
The view it's rather simple. We have the logo, 2 areas and 3 switches. The only thing that may look different is the part with CSS course 'shadow'. Since I had not been able to develop a box-shadow for the fields without producing conflicts with their boundaries, I utilize this component as a layer in addition to the areas with the inner darkness.
Theming.
About the theming, there's a great deal of CSS3 things inside. I'm using Sass with Compass framework, so it eases a few of the obstacles of plain CSS. Logo is simply a component with taken care of dimension and a history picture. I'm likewise providing the retina version of it making use of the medias queries.
As I composed formerly, the shadow component is a hack option for making the inner box-shadow, without producing conflicts with the fields' boundaries. The e-mail field has a grey verge on all-time low, and also the password a white verge on the top. It develops kind of a side between areas. Something various concerning the fields is that you can design the text placeholder using::- webkit-input-placeholder.
The switches obtained brand-new slopes, as well as additional box-shadows. They likewise offer the very same pressing state as the initial interface.
Wrapping up.
Which's basically it. This is an excellent workout, to see just what we can complete utilizing only web. Particularly with Sencha Touch, considering that we hear a lot of concerns asking exactly how easy/hard it is to customize Touch parts.
I wished to make use of just CSS3, but for manufacturing it would certainly be better to use a strong picture for the radial history for non-iOS tools, as well as various other sutil improvements. From my experience it does way far better.
Comments
Post a Comment