Using CSS to Manage the Graphical Interface in HTML5

Introduction

The Using CSS to Manage the Graphical Interface in HTML5 module provides you with the instructions and devices to develop your hands on skills in the following topics.

• Creating a box with rounded edges, shadow and transparency
• Applying background gradient to a box
• Translating and scaling a 2D shape
• Rotating and skewing a 2D shape
• Creating transitions using CSS
• Creating animations using CSS
• Applying SVG filter effects
• Using canvas for enhancing the user interface

Exercise 1 - Formatting the Graphical Interface using CSS

In this exercise, you will learn to enhance the graphical user interface in HTML5 page using CSS3. First, you will create a box with rounded corners, add shadow to the box, and apply transparency to the box. You will write CSS code to apply gradient to the box and differentiate between linear and radial gradient. You will write CSS code to translate, scale, rotate and skew a two-dimensional (2D) shape. You will write CSS code to create transition and animation effect. Finally, you will write CSS code to apply SVG filter effect and to use canvas to enhance the user interface.