HTML5 Tutorial: CSS3 is not part of HTML5,
but is closely related

As noted earlier, many of the examples labeled as HTML5 are a combination of the HTML5 technologies described above and JavaScript or CSS. CSS is an evolving language identified by version numbers, and the latest version of CSS (3.0) has evolved alongside the HTML5 specification. Some components of CSS3 are frequently mistaken as components of HTML5, such as animation or transitions. The confusion is understandable but it is important for professional designers and developers to understand the distinction. Below is a brief description of some of the most interesting CSS3 features.

CSS animations

Technologies such as Flash have traditionally been used to animate objects in the browser. You can now create some of the same functionality using CSS rules and properties. In the future, the HTML5 Canvas element and CSS3 transitions can help designers create interactive and animated elements on the page.

Image

Animations in a Webkit browser, such as Chrome or Safari, allow you to see CSS animation in action.

CSS transitions

CSS transitions are closely related to animation, but fundamentally different. A transition allows property changes in CSS values to occur smoothly over a specified duration. For example, a button that has a background color of green can smoothly animate to a different background color when the user rolls over the button. You can currently perform this type of animation with JavaScript and Flash, but as with much of CSS3, transitions give designers a tool to use without becoming a scripting expert.

Image

Visit http://daftpunk.themaninblue.com/ to see an example of CSS transitions in action.

CSS 2D- and 3D-transformations

The CSS transform property allows you to rotate, scale, or skew an element on your page. An example is the ability to rotate an image on the page slightly to one side for aesthetic effect. You can also animate transforms; for example, animating the scale property lets you create an enlarging or minimizing effect on an image or other element. You can also add the perspective property to the transformation effect to simulate an object positioned or animated in 3D space.

Image

An example of a 3D-CSS transformation that is also animated.

CSS3 backgrounds, borders, RGBa colors, gradients, drop shadows, and rounded corners

There are several enhancements to the visual style of the page that are now possible with CSS3. A simple example is the border-radius property which allows you to add rounded corners to your boxes, but there are many other new effects you can create, such as native gradients and drop shadows. Traditional effects, such as the background-image and the border property, are improved in CSS3. For example, you can use the border-image property to apply images to style a border, or add multiple background images to a single container; this removes the current limitation of a single background-image.

@font-face web fonts

There is increasing support for the ability to add custom fonts to page designs using the @font-face property, which lets the designer specify a particular font and provide a source link for the font to allow the browser to download it. This feature could dramatically transform the appearance of web pages worldwide, but it has many of the same browser support issues as the various HTML5 features.

Continue to the next HTML5 Tutorial: HTML5 is in a state of transition >