Border-radius & Filter

Posted on by tchastkavich

Shape of the Day:

  • Learn about border-radius and filter properties

Website of the Day:

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

https://www.smashingmagazine.com/2019/10/desktop-wallpaper-calendars-november-2019/ – Scroll through this page to find a new wallpaper for November if you like.

1. CSS Border-Radius property

  • The border-radius property gives borders a rounded corner.
  • Try playing with some values in this example – what happens when you make the numbers larger or smaller?
  • Border-radius is a short-hand property to make all the corners of an element the same. You may also utilize:
    • border-top-left-radius
    • border-top-right-radius
    • border-bottom-left-radius
    • border-bottom-left-radius
  • Download this code and paste it into Brackets. Save this file as cssimages.html – make sure you read the comments for directions.

2. CSS Filter Property

  • The filter property allows you to add similar effects to elements (usually images) that were once only accomplished with programs like photoshop.
  • Check out some different values here
  • Create a class in your style sheet called .imgfilter so you can practice applying the filter property to the extra mug photo that was left in your code.
  • Apply each filter value to your image and change the value
    • filter:grayscale(100%); try different percentages
    • filter: blur(5px); try some different numerical values
    • filter: brightness(200%); and try 100% or a smaller number than 100%
    • filter: contrast (200%); try 100% or a smaller number than 100%
    • filter: drop-shadow (8px 8px 10px gray); What else can add a shadow to elements?
    • filter: hue-rotate (90deg); try different numerical values (0-360deg) It difines the number around the colour circle and the image samples will be adjusted.
    • filter: invert (100%); inverts the colors (0% (0) is default while it also represents the original image. 100% would then make the image completely inverted) – try different percentages!
    • filter: opacity (30%); was there another property used to set an element’s opacity?
    • filter: saturate (800%); values over 100% will make the image super-saturated with colour. 100% is normal while 0% will make the image grayscale (removing colour saturation)
    • filter: sepia (100%); try different percentages
    • Multiple filters – can be used more than one at a time!