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 to make images fit containers without distortion
- container queries
- srcset attribute (responsible responsive design)
- sizes attribute (responsible responsive design)
- visual studio selection efficiencies
- batch processing of images with XnConvert
- Visual Studio Code selection efficiencies
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
In this exercise, you will make the project described here: exercise description video.
You will need to follow all the steps in this Loom video series. Note: this is a longer series than usual, so get started early.
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.
There are an additional three folders inside the images folder. These additional folders are named 2560, 1600, 900, and 600. As part of the Loom video series, you will use XNConvert software to automate the creation of new image widths corresponding to these folder names.
If you are not on a computer you can install XNConvert on, use Photoshop Actions or some other way to batch process this task.
Project Setup
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.
The Look Of The Project
Here, we see the images with a Normal blend mode.
Here, we see them with the Luminosity blend mode.
In one video, I ask you to copy this list of blend modes. You can also copy them from here.
- 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.