Today’s goal:

• Learn about 2 new CSS properties: border-radius and filter

 Today’s featured website:

• https://trends.google.com/trends/yis/2018/GLOBAL/– Find out what dominated Google in 2018

Monthly Desktop Wallpaper

• Freshen up your computer desktop with some new monthly wallpaper from Smashing Magazine

  CSS Border-Radius Property

• The border-radius property lets you give elements rounded corners.
• Let’s play with the values in this example to see what smaller and larger numbers do to the corners.
• The border-radius property can take numbers (in pixels) or a percentage for its value (50% will create a circle).
• Border-radius is actually a short-hand property that will make all of the corners of an element the same. You can also use border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.
• Download this practice code. Copy and paste into Notepad++ and save it as cssimages.html. Read the comments for directions.

 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!