Filter Property with the Flexbox Layout

Posted on by tchastkavich

Shape of the Day:

  • Practice using the filter property and flexbox layout

Website of the Day:

https://www.supremo.co.uk/designers-eye/ – Try this challenge, can you tell if it’s centered?

1. Practice the Filter Property and Flexbox Layout

  • Download this practice code and paste it into a new Brackets file. Save this file as flexbox_filter.html
  • The code is going to get you to layout 4 photos using flexbox and then you will edit them with the filter property.
  • Follow the instructions inside the code by reading the comments and filling out the “????”
  • Use the w3schools CSS filter Property reference page for any help with the values in your code.
  • Re-vist Pixlr and upload the pineapple photo. Check out the different filter property values under Adjust and Filter from the side menu.