Week 10
11/1
CSS3 part 2. More CSS3 properties: 2-D transforms, transitions, animations, multicolumn layout and Compositing and Blending properties.
Activity: Use these properties in class.
Activity: In-class Workshop.
Homework
1) For class: Use the new CSS3 properties to create a simple animatic for your final project. Animate elements created in the previous homework. 2) For final: Finish wireframe and Photoshop Comp for Final. Read chapter 14. Due: The following week.
Materials
Additional materials for this unit can be found by following these links (14 pages):
- Transitions
- 2D & 3D Transforms
- Animation
- Compositing and Blending
- Responsive Images and Video
- CSS Variables
- CSS Calculations
- Clip Paths Article and Clippy. Custom generator for CSS shapes.
- CSS Doodle Cool web component for drawing CSS patterns. Check out polygon shapes.
- canned CSS Effeckts
- CSS replacement for jQuerys
- Smooth Scrolling Sticky ScrollSpy Navigation
- CodePens using CSS3
- In Class Demonstration
- In Class Exercise
- Homework
Goal
The goal of this unit is to:
- Master the new CSS3 properties and use them.
Outcomes
At the end of this unit, students will have:
- Been exposed to how these new properties work
- Have practiced using these properties and are able to apply them to their own projects.
- Have an understanding of sprites to more efficiently use images.
Step-by-Step
| 20 | Review homework and answer questions. |
| 30 | Demo: 2D Transforms with a quick look at 3D transforms. |
| 30 | Demo: Transitions |
| 30 | Demo: Animation |
| 10 | Break |
| 60 | In-class Workshop & Review. |
News and External Resources
Sources of information that will enrich your knowledge about web design and will help you to stay current:
- Pentagram A Seminal Design Agency. Look through their web portfolio for web design inspiration.
- Happy CogJeff Zeldman’s Design Company. The design agency of a well known standards compliant web design advocate.
- Webby Awardsaward for excellence on the Internet.