Schedule > 8. Advanced CSS Techniques
To round out our HTML & CSS instruction, we’ll be going over some advanced CSS techniques – to further enhance your visual designs.
References
Image Filters
- Image Background Walkthrough (Free Code Camp)
Really nice walkthrough of the various CSS properties - Image Backgrounds: Examples (W3Schools)
- background-image property (W3Schools)
- background-attachment property (W3Schools)
- Image filters (W3Schools)
Transitions & Pseudoclasses
- What are pseudoclasses?
- CSS link hover effects + CodePen
- CSS link hover effects: animated underline
- CSS link hover effects: getting creative with text shadows + CodePen
- The transform property
Keyframes
- CSS animation for beginners Thoughtbot
Slides
- Lecture 12: Image Effects & HTML5 (Friday, 3/01)
- Lecture 13: Pseudo-Classes, Transitions, & Keyframes (Wednesday, 3/04)
Videos
Videos will be published after class on Google Drive
Activities
- Lecture 12 (Friday, 3/01): Background Images & Media Activity
- Lecture 13 (Monday, 3/14):
- Transitions Activity: Starter Files • Instructions
- Keyframes Activity: Starter Files • Instructions