IT Skills Web Development and Graphic Design Scripting HTML and DHTML
CSS3 provides a rich environment for manipulating images and text using animation and transforms. CSS3 with HTML5 can accomplish many graphical transforms and animations that used to require Javascript or other third party libraries. In this course, you'll learn to work with different transforms and animations provided by CSS3; for example, to rotate, skew, and scale HTML5 objects.
| Objectives |
The CSS3 Transform Property - start the course
- apply a transform to rotate an object in an HTML5 document
- distort an object using the transform matrix in an HTML5 document
- describe how to apply a 3D transformation to an object in an HTML5 document
- use a transform to position an object in HTML5
- add scaling to an object using a transform in HTML5
- apply a transform to skew an object in HTML5
- use a transform to add a perspective to an object in an HTML5 document
Animating with CSS3 - describe how to use CSS3 to create an animation in HTML5
- create an animated picture using CSS3 in an HTML5 document
- describe how CSS3 animation keyframes are used in HTML5
- cycle the color of a div using CSS3 animation in an HTML5 document
- rotate objects using CSS3 animation in an HTML5 document
- describe some of the advanced CSS3 animation techniques available in HTML5
Modifying a Document Using CSS3 - use CSS3 to change a web site's background color in an HTML5 document
- use CSS3 to change a web site's background image in an HTML5 document
- describe how to use CSS3 styles to modify background images in an HTML5 document
Columns and Image Alignment - apply CSS3 styles to create columns and flow text in an HTML5 document
- describe how and when to use image alignment in HTML5
Advanced CSS3 Techniques - describe CSS3 pseudo selectors in HTML5
- apply CSS3 pseudo selectors to an HTML5 document
- use CSS3 drop shadows in an HTML5 document
- apply CSS3 linear gradients in an HTML5 document
- create radial gradients in CSS3 in an HTML5 document
- create gradient text using CSS3 in an HTML5 document
- add transparency to objects in HTML5 using CSS3
- use CSS3 to change the range slider style in an HTML5 document
- draw triangles using CSS3 in HTML5
Practice: HTML5 and Advanced CSS3 - demonstrate how to programmatically apply CSS3 transitions and animations, 2D and 3D transforms
|
