Today’s goals:

• Finish practicing the CSS filter property
• Practice using the filter property and flexbox layout

 CSS Filter Property

• The filter property lets you add similar effects to elements (often images) that were once only accomplished with image editors like Photoshop.
• Let’s have a look at the different values here.
• Let’s create a class in our style sheet called .imgfilter so we can practice applying the filter property to one of our mug photos.
• We’ll try each filter value by applying it to our image and changing the values
• Try:
  1. filter: grayscale(100%); and also try different percentages to see what happens
  2. filter: blur(5px); and try different numerical values
  3. filter: brightness(200%); and try different percentages (what does 100% do? how about a number smaller than 100?)
  4. filter: contrast(200%); and try different percentages (what does 100% do? how about a number smaller than 100?)
  5. filter: drop-shadow(8px 8px 10px gray); what other CSS properties can be used to add a shadow to elements?
  6. filter: hue-rotate(90deg); and try different numerical values (The value defines the number of degrees around the color circle the image samples will be adjusted. 0deg is default, and represents the original image. Max value is 360deg and would do what?)
  7. filter: invert(100%); inverts the colors (0% (0) is default and represents the original image. 100% will make the image completely inverted); try different percentages
  8. filter: opacity(30%); what other CSS property is used to set an element’s opacity?
  9. filter: saturate(800%); values over 100% make the image super-saturated; 100% is normal; 0% will make image grayscale (remove color saturation)
  10. filter: sepia(100%); and try different percentages
  11. Multiple filters You can use more than one filter at a time!

 Practice the Filter Property and Flexbox Layout

1. Download this practice code and copy/paste into a NEW Notepad++ file. Save as flexbox_filter.html
2. You will layout 4 photos using flexbox and will edit them with the filter property
3. Follow the instructions inside the code by reading the comments. Find and fill in the ????
4. Use W3School’s Filter reference page to get the different values you will need to add to your code
5. Go to Pixlr, download this photo, and open it in Pixlr. You’ll find many of the filter property values under Adjustment and Filter from the top menu. Check some of these out and try them on your photo. How are they different and how are they similar to what you just did with the CSS filter property?