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
url()function is used to load resources into the stylesheet.
- You can use the
calc()function to perform simple mathematical operations on elements.
min()function can be used to select the smallest value from a range of values and set that value on a property.
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
- Color values that need a varying level of alpha can be set using the
- You can use filter functions to change the appearance of input images and elements.
brightness()functions each perform different kinds of element filtering.
- You can use transformation functions to manipulate image positioning, scale, rotation, and more.
translate()functions each allow for specific kinds of transformation.
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.