HTML5 Tutorial: CSS3 is not part of HTML5, but is closely related
What you’ll learn in this HTML5 Tutorial:
This tutorial provides you with a foundation for working with HTML5 and CSS3. It is the first lesson in the HTML5 Digital Classroom Book book. For more HTML5 training options, visit AGI’s HTML5 Classes.
HTML5 Tutorial: CSS3 is not part of HTML5,
but is closely related
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.
Animations in a Webkit browser, such as Chrome or Safari, allow you to see CSS animation in action.
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.
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 >