Apply for the next session

Cascade and blend modes intro

Last updated: June 18, 2023

There are a bunch of things that need to come together! So, you’ll see a lot of medleys this week.

You can always work on other things, you know. Practice practice practice.

The goals

  1. Get a quick introduction to the Cascade

    Cascading Style Sheets! You’ve been using them – and the cascade already, but we haven’t talked about it.

  2. Plan to get a github account

    Pick out a user name! It really doesn’t matter, as long as you can remember it. ; )

  3. Start thinking about how we'll tune up the alpha-net

    It’s a blank canvas, so – how could we combine the challenges and the practice and turn them into a portfolio earlier than later?

  4. Get a quick overview of blend modes in Affinity designer

    There are a few quick tricks to get some texture and mood for background images.

Resets

We use Eric Meyer’s reset, but there are many different ones. Do they make sense? They aren’t a full “reset” because you can’t just take away all of the properties. The intention is to remove any styles that are added by the various browser creators.

If you were to bleach your hair to reset it – you would still have hair. Let us know if you need any other weird metaphors.

Setup

The reset removes most of the browser styles and gets us a clean slate, but there are a bunch of settings we can put in place to make life easier. Have you had a chance to look over all of these examples?

Spend some time with those. If they don’t make sense yet, let’s talk about it.

These site-wide settings will make everything easier to reason about. However, if you don’t fully understand them – they could be an even bigger source of confusion.

Key
concept

Blend modes

Digital imaging and graphics editing software often come with a set of layer blending options. Depending on the assets, order, and blend mode selected – the layers will visually blend in unique ways.

We’re trying to track down what inspired these…

Wikipedia

In our case, we’re using multiply to blend some bunnies with a color field.

Guess what! You can do this right in CSS now! WHAT?!

Blend modes with CSS

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Go on – and give this a try.

Change the picture background color to see how the blend-mode is applied to the image.

Exercises

  1. Go though those Pens again

    Makes sure you have these down. The box-sizing, the images, and the links. Talk to someone about them and explain them. Ask for help if they are still confusing. Try and use them in one of your projects.
    30 minutes suggested

  2. Make sure your Github is setup and connected

    We’re here to help!
    25 minutes suggested

  3. Make some blended background images

    Try it out in our graphics program. Set some images to black and white. Apply some blend modes. Share them with the group. Try out the CSS version. What about this?
    40 minutes suggested

In conclusion

There are some more tools for your toolbox!

Update your boilerplate and commit your changes in Tower. Ask any questions you have.

Checklist

  1. You understand why we set the box-model to border-box.

  2. You understand why we need links to be display: block when they are parent elements.

  3. You know how to set images to respond to their parent element’s size.

  4. You updated your boilerplate code and committed the changes with Git.

  5. You’re starting to think of ideas for your website.

  6. You played with blend modes in the graphics program.

Questions

  1. Where might you use blend modes in a real project?

  2. What do I want people to think when they visit my website?

Deliverables
Apply for the next session