This Loom code-along exercise will involve CSS Blend Modes, CSS Transitions, CSS Animation (just a bit), Advanced Form Styling, and a bunch of JavaScript.
The Loom video series can be found here.
In this series, we will making a page to demonstrate the effects of CSS Blend Modes. A more complex but similar example is here.
CSS Blend Modes were developed at Adobe, which makes sense because they behave like the blend modes in Photoshop. They allow us to change how elements will composite with other elements.
There are no files to download for the exercise. However, you will need to know the CSS Blend Mode names:
- Normal
- Multiply
- Color
- Screen
- Overlay
- Darken
- Lighten
- Color-Dodge
- Color-Burn
- Soft-Light
- Hard-Light
- Exclusion
- Saturation
- Luminosity
When done the exercise, please make sure that your project folder is named firstname-lastname-cssblendmodes
The marking metric:
For .9/1, hand in a project that works exactly like the project at the end of Video 15 in the Loom series.
For 1/1, make the mode & color picker area work as a sidebar, in the way that is demonstrated in Appendix 2 of the video series.
Note: you do not need to do anything with grid-areas, or the layout of Video Appendix 1. Grid-areas are discussed in that video for your interest only.