In this chapter, we learned about some of the new CSS3 features that can be used to make your applications pop and provide a lot of visual feedback to the user. We updated our tasklist application by adding rounded corners and shadows to the task elements, and adding images to the task tool buttons. We added a gradient to the background and a theme selector to allow the user to change the color scheme. We also added some transitions to make changes look more natural.
We covered the following concepts in this chapter.
- How to define colors with transparencies in CSS3
- How to give elements rounded corners
- How to add shadows to elements and text
- How to create linear and radial gradients
- How to use CSS3 transitions and transforms to create visual effects
- How to use CSS sprites to reduce the network footprint of your applications
- How to dynamically load stylesheets
- How to make your application fill the entire window
One last thing before we go on. Let me leave you with a word of warning. Just because CSS3 has all of these great effects, it doesn't mean you have to use them all in your application. Every text doesn't need a shadow, you don't need to make your backgrounds have rainbow-colored gradients, and every element doesn't need to be rotated 30 degrees. Judicious use of these effects will make your application look professional; overuse will make them look comical.
In the next chapter, we will take our task list application to the next level by adding a details section to each task that uses some of the new HTML5 input types. We will also learn how to use custom data attributes to bind the data model to input elements.