Schedule > 9. 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 (Wednesday, 10/04)
• Lecture 13: Pseudo-Classes, Transitions, & Keyframes (Wednesday, 10/11)

Videos

Videos will be published after class on Google Drive

Activities

• Lecture 12 (Wednesday, 10/04): Background Images & Media Activity
• Lecture 13 (Wednesday, 10/11):
  • Transitions Activity: Starter Files • Instructions
  • Keyframes Activity: Starter Files • Instructions