Lessons > 9. CSS Fun

Slides

• CSS Flourishes

Lecture Video(s)

• Recorded Lecture Video (48:08)

Today will be our last day of CSS formal instruction, though you will still get a lot more practice in HW2. I was thinking of just showing you some options and talking through how you might approach incorporating some of these flourishes into your website.

Try to have fun with these ideas – even if you don’t really understand the syntax yet. Some interesting links and resources I found online:

Image Backgrounds

• background-attachment
• CSS filters

Parallax

Some of these require JavaScript, so

• https://github.com/dixonandmoe/rellax
• https://alexfox.dev/lax.js/
• https://github.com/electerious/basicScroll#demos
• https://bashooka.com/coding/parallax-animation-javascript-libraries-2019/
• https://chriscavs.github.io/rallax-demo/
• https://github.com/geosigno/simpleParallax.js

Other Animation Libraries and Tutorials

• AnimeJS
• Some interesting CSS Shorts on LinkedIn learning, which deconstruct various design techniques / flourishes.