Learn how to use CSS functions to make page styling easy and expansive.

CSS Functions

Performing dynamic mathematical calculations to set property values might sound difficult, but the `calc()` function makes handling mathematical expressions simple. The `calc()` function takes a mathematical expression as its argument and returns the calculated value. We can use the `calc()` function as a value of CSS properties that expect numeric values.

The `calc()` function can be used to perform mathematical operations on a mix of units (`rem`, `vw`, `px`, etc). When performing addition (`+`) or subtraction (`-`), both numbers being operated on must have specified units. Division (`/`) requires the divisor (second operand) to be a unit-less number, and multiplication (`*`) requires one of the operands to be unit-less. Keep in mind that the `calc()` function requires whitespace between the operator and the numbers in the expression. The function can also be used as one of the multiple values for a property or argument in another function. 

For example, what if we wanted to dynamically change the left and right `margin` of an element to be 1.5 percent of the viewport width added with `5px`?

```css
.item {
  margin: 15px calc(1.5vw + 5px);
}
```

Above, we set the top and bottom margins of the `.item` selector to be `15px` and use the `calc()` function to set the left and right margin values by adding `1.5vw` and `5px`. Notice the whitespace on either side of the `+`&mdash;it is required to add whitespace between operators and operands in the function.

A full list of operators, expression types, and use cases for `calc()` can be found on the [Mozilla Developer Page](https://developer.mozilla.org/en-US/docs/Web/CSS/calc()).


Calculating Values

Like color functions, there are CSS functions specifically for the `filter` and `backdrop-filter` properties. These functions create a variety of visual effects for desired elements.

We can use the `brightness()` function for the `filter` and `backdrop-filter` property to affect an element's overall brightness by applying a linear multiplier to it. The `brightness()` function takes a single argument for the amount, which can be either a number or percentage. Any value under 100% or 1.0 darkens the element, and any value over 100% or 1.0 will brighten the element. The default value of brightness is 100% or 1.0.

The `blur()` function applies a [Gaussian blur](https://en.wikipedia.org/wiki/Gaussian_blur) to a specified element. The `blur()` function takes a single argument for the radius of the blur specified as a length. The argument of this function cannot be unitless unless a blur amount of 0 is being set.

The last filter function we are going to learn about is `drop-shadow()`. This function applies a drop shadow effect to the desired element. Take a look at the syntax below:

```css
drop-shadow(offset-x offset-y blur-radius color)
``` 

Both `offset-x` and `offset-y` are required arguments that determine the horizontal and vertical offset respectively. While `blur-radius` is an optional argument that determines the shadow's blur radius&mdash;the larger the value, the more blurred the shadow. Finally, the `color` argument is also optional and determines the shadow's color. Notice that it is not necessary to separate each of the function's arguments with commas.

Say we want to add a drop shadow to a `<button>` element. In the below code example, the horizontal offset is set to `-10px` and the vertical offset to `5px`. It has a blur radius of `0.2rem` and has a color of `rgba(50, 200, 210, 0.6)`.

```css
button {
  filter: drop-shadow(-10px 5px 0.2rem rgba(50, 200, 210, 0.6));
}
```

The drop shadow created on the button is offset vertically to the bottom and to the left. It also has a light blue color with 60% opacity.

There are more CSS functions that can be used with the `filter` and `backdrop-filter` properties&mdash;take a look at [the full list](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) to learn more!


Filter Functions

At this point in our CSS journey, we've already been exposed to a few CSS functions&mdash;for example the `var()` and `repeat()` functions. But the possibilities and usefulness that CSS functions bring are much farther reaching.

In a broad sense, functions are blocks of organized and reusable code that help to perform a single, related action. Functions have the benefit of keeping code modular and allowing for a high degree of reusability.

Functions in CSS are a little more limiting than most programming languages. We cannot create our own functions in CSS but instead have access to a wide variety of predefined functions, which allow for expansive page styling. 

To use a function in CSS, follow the standard functional notation syntax:

```css
h1 {
  property: function-name(argument);
}  
```
Functions are a type of CSS value that is inserted in the place of a hardcoded value of a CSS declaration. Some functions can even take multiple arguments, generally each of which must be separated by a comma.
    
By the end of this lesson, you will be able to use some of the most common and beneficial CSS functions. You will also feel comfortable enough to try out [the whole spectrum of CSS functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions) available!

Functions in CSS

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.


Review

Some CSS functions are used specifically for certain properties. The first of these functions we will learn about are color functions. These functions can only be used as values for color properties.

The main color functions are:
* The [`rgb()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb()) which defines color using the standard RGB (red, green, and blue) model. 
* The [`rgba()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgba()), which is similar to the `rgb()` function except it also defines an alpha channel to specify the color's opacity level.
* The [`hsl()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl()). This function defines color using hue, saturation and lightness.
* The [`hsla()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla()). Again, this function is similar to the `hsl()` function except it also defines an alpha channel that specifies the color's opacity level.

While each of the color functions has been covered extensively in the [Learn CSS Colors](https://www.codecademy.com/courses/learn-css/lessons/color) lesson, by seeing them in the context of functions, we can get a feel for using property-specific CSS functions!

Color Functions

Sometimes we will want to design elements to dynamically scale but also stay confined between an upper and lower bound. The `clamp()` function is ideal for achieving this! 

As its name suggests, the [`clamp()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()) enables a specified value to be kept within an upper and lower bound.

```css
.main-text{
  font-size: clamp(12px, 1.5vw, 48px);
}

```
The `clamp()` function takes three parameters in a specific order:
1. The first argument specifies the minimum value. If the preferred value, given as the second argument, is less than this value, then the minimum value will be used. In the code snippet above, `12px` is given as the minimum value of the `font-size` property.
2. The second argument specifies the preferred value. This value is used as long as it is greater than the value of the first argument (lower bound) and less than the value of the third argument (upper bound). In the code snippet above, `1.5vw` is given as the preferred value of the `font-size` property.
3. The third argument specifies the maximum value. This value is the largest value that the property will be set to. In the code snippet above, `48px` is given as the maximum value of the `font-size` property.

clamp()

If we want to create responsive elements, the `min()` and `max()` functions are great solutions for setting case-specific design constraints. The [`min()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/min()) will select the smallest value from a range of values and set that as the associated property's value. The [`max()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/max()) will select the largest value from a range of values, which will be used as the associated property's value.

In the code snippet below, the width of the `.content` class is set to be `50vw`. If the viewport width is greater than 1000 pixels (meaning that 50vw will be greater than `500px`), the `width` of the `content` class will be set to a maximum width of `500px`.

```css
.content {
  width: 50vw;
  max-width: 500px;
}
```
We can simplify the above code using the `min()` function and passing both values for the `width` and `max-width` property as the function's arguments as follows:

```css
.content {
  width: min(500px, 50vw);
}
```

Now the `min()` function chooses the smaller value of two values given as arguments&mdash;in other words, the `min()` function defines the _maximum_ width the `content` class can have. When the viewport width is smaller than 1000 pixels, the maximum width of the `content` class is `50vw`. When the viewport width is greater than 1000 pixels, the maximum width is `500px`. 


If we were to replace the `min()` function in the above example with the `max()` function, then the width of the `content` class would be `500px` if the viewport with is smaller than 1000 pixels. If the viewport width is greater than 1000 pixels, the width of the `.content` class will take up a _minimum_ of `50vw`.
```css
.content {
  width: max(500px, 50vw);
}
```

Both functions follow a similar syntax&mdash;you can pass more than one argument, separated by commas, in no specific order, and each argument can be in different units. The arguments of the functions can be other functions, math expressions, and literal values.


min() and max()

We can transform any HTML element using the `transform` property combined with CSS functions that scale, rotate, and even distort. These functions apply both 2D and 3D transformations to elements. 

The `scale()` function resizes an element, both horizontally and vertically, on a 2D plane. It can take either one or two parameters. If only one argument is given, `scale(2)` for instance, then the element will grow proportionally on both the x and y-axis. When two arguments are provided, the first argument scales along the x-axis, and the second scales along the y-axis. If you only want to scale an element on one of the two axes, either the `scaleX()` or the `scaleY()` function can be used.

The `rotate()` function can be used for the `transform` property to rotate an element around a fixed point on a given 2D plane. The function accepts a single argument for the angle, which must be in degrees specified with the `deg` unit. Any positive angle means clockwise rotation, and a negative angle means counter-clockwise rotation. It is important to note that the origin of rotation defaults to the center of the element being rotated. For example, using `rotate(180deg)` as the value of `transform` property would rotate an element at its center, 180 degrees clockwise.

Lastly, the `translate()` function moves an element from its initial position to another position on the page specified as the function's arguments. The function can accept either one or two arguments&mdash;if one argument is provided, then the function will translate the element along the only x-axis by the specified amount. If two arguments are given, the element translates along the x-axis by the amount specified by the first argument and along the y-axis by the amount specified as the second argument.

```css
.shifted {
  transform: translate(0px, 100px);
}
```

In the code example above, we wanted to shift the `shifted` element down the screen by `100px`, so we used the `transform` property and set the `translate()` function as its value. The function's x-axis argument was then set to be `0px` and the y-axis to be `100px`.

Transform Functions

The first CSS function we are going to learn about is the `url()` function. This function is used to link to external resources and load them into the stylesheet. These resources can be images, fonts, other stylesheets, and more. The `url()` function takes a single argument: the location of the resource in string format. The location of the linked resource can be provided as absolute or relative paths.

If we were to want to set an image that has a relative path of __images/bg-image.jpg__ as a background, we would need to load the path to that image as the argument for the `url()` function as a string.

```css
.main-banner {
  background: url('images/bg-image.jpg'); 
  background-repeat: no-repeat;
  background-position: right;
}
```

Above we set the background of our `.main-banner` selector ruleset to be `images/bg-image.jpg`. The background was set to not repeat and be placed on the right side of the banner. Notice how a relative path was used as the argument.

Background images set using the `url()` function may not always fill the background in the specific way we want. For instance, if the background image is smaller than the container area, the image will repeat in a tile pattern by default. There are [various properties](https://developer.mozilla.org/en-US/docs/Web/CSS/background) that allow us to set the background image in the manner we want, such as `background-repeat`, `background-size`, and `background-position`, to name a few.
