Give your application a facelift – CSS
Fabian Piau | Wednesday February 15th, 2012 - 07:47 PMEven bug-free, an application with a poor design will surely impede users from performing their day-to-day activities. It is therefore important to take some time to improve the design and usability of an application. Generally, a customer does not mention specifications about the user-friendliness of his future application. But it will always be better for him to use an attractive application. The visual identity should not be ignored too. This point is essential in certain sectors with strong competition such as e-shopping or advertising.
This article will show you that it is possible to improve the overall design of an application in few minutes. You will see how to give your forms that extra touch of style…
So, you will switch from this form style :
to this one :
Note that only recent versions of browsers will totally support these improvements (Firefox 4, Internet Explorer 9 for example). Why ? Because of the use of advanced CSS3 properties (box-shadow, border-radius, text-shadow…). On older browsers, these properties degrade fairly nicely. Rounded corners become square, gradients become flat colors… But the final result is often much better than the original. I invite you to visit this website https://caniuse.com/ to access CSS3/HTML5 browsers compatibility tables.
Here is the original form in IE6 :
and the degraded result with the new CSS :
What is the tip to achieve this “facelift” ? Just visit this website : http://www.cssbuttongenerator.com/ that allows you to create a button with your own parameters : size, color, shadow, text, active, disabled, focus, etc. and generate the CSS code (without the need of any images). Once the generated code is embedded in your stylesheet, you can simply use your new classes with typical form elements (button, text, textarea, etc.).
There is also a more complete application available : http://www.cssbuttongenerator.com/. It allows you to see the result on other types of element than buttons, to access predefined templates, to save your own templates… I couldn’t get it to work in Firefox, but this application works fine in Chrome.
