In the following exercise, you will explore the following areas.
- css blend modes
- css variables (also known as custom properties)
- advanced form styling
- transitions
- javascript change event
- javascript input event
- changing css properties (including custom properties) with javascript
- arrow functions, traditional functions
- custom folder elements, custom form styling
- object-fit
- container queries
- srcset attribute (responsible responsive design)
- sizes attribute (responsible responsive design)
- visual studio selection efficiencies
- batch processing of images with XnConvert
In the project, you will make a CSS Blend Modes Tester: a tool that will allow you to investigate the visual effects that can be created using CSS Blend Modes, which are very much like the Blend Modes you might know from using Photoshop.
The Exercise
First, please download the starter content. When you unzip it, you’ll see a folder called images, inside of which is another folder called originals-from-unsplash.
In this exercise, you will make the project described here: exercise description video.
Make a new folder. Call it YourName-BlendModesTester, then open it as a new project in Visual Studio Code. Put the downloaded images folder inside your project folder.
Make three files: index.html, style.css, and main.js.
Now make three folders inside the images folder. Name them 2560, 1600, 900, and 600.
Now, to create this layout, click the screenshot below. This will take you to Loom.com. Please follow along with the video series found there:
In one video, I ask you to copy this list of blend modes:
- Normal
- Multiply
- Color
- Screen
- Overlay
- Darken
- Lighten
- Color-Dodge
- Color-Burn
- Soft-Light
- Hard-Light
- Exclusion
- Saturation
- Luminosity
When you are done, zip up your project folder (making sure you named it as described at the start of this exercise), then hand it in to Brightspace.