Learn

In this lesson, we learned about how CSS functions can be used to set background images, perform mathematical calculations, and dynamically set values between minimum and maximum ranges. We also learned about property-specific functions used to set colors, create filters, and transform elements!

Let’s review some of the main point covered in this lesson:

  • Functions are a type of CSS value that is inserted in place of a hardcoded value on a CSS property
  • The url() function is used to load resources into the stylesheet.
  • You can use the calc() function to perform simple mathematical operations on elements.
  • The min() function can be used to select the smallest value from a range of values and set that value on a property.
  • The max() function can be used to select the largest value from a range of values and set that value on a property.
  • You can use the clamp() function to ensure property value scales up and down while staying between an upper and lower bound.
  • Color values that are fully opaque can be set using the rgb() and hsl() functions.
  • Color values that need a varying level of alpha can be set using the rgba() and hsla() functions.
  • You can use filter functions to change the appearance of input images and elements.
  • The drop-shadow(), blur(), and brightness() functions each perform different kinds of element filtering.
  • You can use transformation functions to manipulate image positioning, scale, rotation, and more.
  • The scale(), rotate() and translate() functions each allow for specific kinds of transformation.

Instructions

Optionally, Feel free to review the Mozilla CSS function documentation page and try modifying elements on the postcard webpage using other functions. A few functions which could be interesting to try out are:

  • Try applying the linear-gradient() function to the background color of the webpage.
  • Use the blur() function to blur out and distort the background.
  • Try using the skew() function to skew the word “Argentina” when you hover over it with your mouse.

When you are done, feel free to move on to the next lesson.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?