"I've recently refreshed the animated graphics on my website with a new theme and a group of pioneering characters, putting into practice plenty of the techniques I shared in this series. A few of my animations change appearance when someone interacts with them or at different times of day. The colours in the graphic atop my blog pages change from morning until night every day."
"While working on this, I started to wonder whether CSS relative colour values could give me more control while also simplifying the process. Note: In this tutorial, I'll focus on relative colour values and the OKLCH colour space for theming graphics and animations. If you want to dive deep into relative colour, Ahmad Shadeed created a superb interactive guide. As for colour spaces, gamuts, and OKLCH, our own Geoff Graham wrote about them."
"The Hanna-Barbera animated series I grew up watching had budgets far lower than those available when William Hanna and Joseph Barbera produced Tom and Jerry shorts at MGM Cartoons. This meant the animators needed to develop techniques to work around their cost restrictions. Repeated use of elements was key. Backgrounds were reused whenever possible, with zooms and overlays helping construct new scenes from the same artwork."
CSS relative colour values are now widely supported and can be used to theme and animate SVG graphics using the OKLCH colour space. Animated website graphics can change appearance based on user interaction and time of day; for example, blog-page colours shift from morning to night daily, and a snow mode applies chilly colours and a wintery theme via an overlay layer with a blending mode. Relative colour values can simplify palette control while increasing precision. Historical animation practices from Hanna-Barbera show the value of reusing backgrounds and overlays to create series continuity under budget constraints. Manual palette updates remain a challenge for limited colour sets.
Read at Smashing Magazine
Unable to calculate read time
Collection
[
|
...
]