Agility, Java programming, New technologies and more…
  • rss
  • Home
  • Management
  • Agile Programming
  • Technology
  • Linux
  • Event
  • Android app
  • Contact
  • About the author
  • English
  • Francais

Give your application a facelift – CSS

Fabian Piau | Wednesday February 15th, 2012 - 07:47 PM
  • Print
  • Twitter
  • LinkedIn
  • Facebook
  • Pocket

 Version française disponible

Even 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 :

Form before

to this one :

Form after

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 :

Form before in IE6

and the degraded result with the new CSS :

Form after in IE6

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.).

Related posts

seo performance websiteThe best free and online tools for testing and optimizing an application or website printerOptimize your website for print in 5 minutes
Categories
Agile programming
Tags
user-friendly, css, user-friendliness
Comments rss
Comments rss

« Firefox Nightly, Aurora, Beta, Desktop, Mobile, ESR & Co. Customizing Gnome 3 (Shell) »

Download CarmaBlog App

RSS feeds

  • RSS Feed RSS - Posts
  • RSS Feed RSS - Comments

Most viewed posts

  • Changing the language in Firefox - 114,911 views
  • Using Google Forms / Drive / Docs to create an online survey - 61,512 views
  • FAQ – Online survey with Google Forms / Drive / Docs - 41,212 views
  • Customizing Gnome 3 (Shell) - 29,096 views
  • The meaning of URL, URI, URN - 15,912 views
  • Java EE & CDI vs. Spring - 14,814 views
  • Open Street Map, better map than Google Maps? - 13,770 views
  • Comparing NoSQL: Couchbase & MongoDB - 13,519 views
  • Firefox Nightly, Aurora, Beta, Desktop, Mobile, ESR & Co. - 12,724 views
  • First steps with Apache Camel - 11,722 views

Recent Comments

  • Saint hilaire albert on FAQ – Online survey with Google Forms / Drive / Docsmerci beaucoup
  • Fabian Piau on FAQ – Online survey with Google Forms / Drive / DocsNon, ce n’était pas la bonne pratique effectivemen…
  • Saint hilaire albert on FAQ – Online survey with Google Forms / Drive / Docsah, alors je crois avoir trouvé : mon lien se term…
  • Fabian Piau on FAQ – Online survey with Google Forms / Drive / DocsJe n'arrive pas à reproduire car si vous cliquez s…
  • Saint hilaire albert on FAQ – Online survey with Google Forms / Drive / Docsje vais tenter d'être plus précis : j'envoie un li…

Recent posts

  • Flagger – Monitor your Canary deployments with Grafana - 6 months and 2 weeks ago
  • Flagger – Canary deployments on Kubernetes - 7 months and 4 weeks ago
  • Flagger – Get Started with Istio and Kubernetes - 8 months and 2 weeks ago
  • Expedia CoderDojo in London - 1 year and 5 months ago
  • Volunteering at Devoxx4Kids - 1 year and 8 months ago
  • A Java 11 migration successful story - 2 years and 3 weeks ago
  • Tips to make your WordPress website secure - 2 years and 3 months ago
  • Devoxx UK 2018 – Day 2 - 2 years and 7 months ago
  • Devoxx UK 2018 – Day 1 - 2 years and 7 months ago
  • TransferWise, Revolut and Monzo, a small revolution for travelers and expats - 2 years and 11 months ago
  • Autocomplete for Git - 3 years and 7 months ago
  • Swagger, the automated API documentation - 3 years and 10 months ago
  • Microservices architecture – Best practices - 4 years and 3 months ago
  • FAQ – Online survey with Google Forms / Drive / Docs - 4 years and 8 months ago
  • QCon London 2016 – Project Jigsaw in JDK 9 – Modularity comes to Java - 4 years and 9 months ago
Buy me a coffee

Language

  • Français
  • English

Follow me!

Follow me on Linkedin
Follow me on Twitter
Follow me on Stackoverflow
Follow me on Github
Follow me on Rss
Link to my Contact

Email subscription

Enter your email address to receive notifications of new posts.

Tags

.net agility android bash best practices blog cache cloud computing conference continuous integration css developer devoxx docker docs drive eclipse extreme programming firefox flagger forms google helm hibernate istio java job jug kubernetes london mobile computing overview performance plugin programmer qcon script sharing society spring tool ubuntu windows wordpress

Links

  • Blog Ippon Technologies
  • Blog Publicis Sapient
  • Blog Zenika
  • Classpert
  • CommitStrip
  • Coursera
  • Le Touilleur Express
  • Les Cast Codeurs Podcast
  • OCTO talks !
  • The Twelve-Factor App

Categories

  • Event (15)
  • Linux (3)
  • Management (7)
  • Agile programming (29)
  • Technology (44)

Archives

  • June 2020 (1)
  • May 2020 (2)
  • July 2019 (1)
  • May 2019 (1)
  • December 2018 (1)
  • October 2018 (1)
  • June 2018 (1)
  • May 2018 (1)
  • January 2018 (1)
  • May 2017 (1)
  • March 2017 (1)
  • October 2016 (1)
  • April 2016 (2)
  • March 2016 (1)
  • November 2015 (1)
  • May 2015 (1)
  • February 2015 (1)
  • December 2014 (1)
  • November 2014 (1)
  • September 2014 (2)
  • August 2014 (1)
  • July 2014 (2)
  • June 2014 (1)
  • April 2014 (1)
  • March 2014 (1)
  • February 2014 (2)
  • January 2014 (1)
  • December 2013 (1)
  • November 2013 (1)
  • October 2013 (3)
  • September 2013 (5)
  • July 2013 (1)
  • June 2013 (1)
  • May 2013 (1)
  • April 2013 (1)
  • March 2013 (2)
  • February 2013 (1)
  • January 2013 (2)
  • December 2012 (2)
  • October 2012 (1)
  • September 2012 (1)
  • July 2012 (1)
  • May 2012 (1)
  • April 2012 (1)
  • March 2012 (1)
  • February 2012 (1)
  • January 2012 (2)
  • December 2011 (1)
  • November 2011 (2)
  • October 2011 (2)
  • September 2011 (1)
  • July 2011 (1)
  • June 2011 (2)
  • April 2011 (1)
  • March 2011 (1)
  • February 2011 (1)
  • January 2011 (2)
  • November 2010 (2)
  • September 2010 (1)
  • August 2010 (1)
  • July 2010 (1)
  • June 2010 (1)
  • May 2010 (1)
  • April 2010 (1)
  • March 2010 (1)
  • February 2010 (1)
  • December 2009 (1)
  • November 2009 (1)
  • October 2009 (2)
  • September 2009 (2)
  • August 2009 (3)
  • July 2009 (1)
  • June 2009 (2)
Follow me on Twitter
Follow me on Linkedin
Follow me on Stackoverflow
Follow me on Rss
Link to my Contact
Follow me on Github
 
Fabian Piau | © 2009 - 2021
All Rights Reserved | Top ↑