Skip to content

Commit

Permalink
[Edit] CSS Filter Functions: saturate()
Browse files Browse the repository at this point in the history
* Added output image for CSS Saturate terms, with minor changes to content

* Added output image for CSS Saturate terms, with minor changes to content

* Revised explanation for <value> in .saturate() from CSS

* Removed operators.md

* Minor changes

---------
  • Loading branch information
chrisleond11 committed Jul 4, 2024
1 parent ecebb73 commit 6f0c4ff
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 12 deletions.
34 changes: 22 additions & 12 deletions content/css/concepts/filter-functions/terms/saturate/saturate.md
Original file line number Diff line number Diff line change
@@ -1,40 +1,50 @@
---
Title: 'saturate()'
Description: 'Increase or decrease the intensity of the color of the element it is applied to.'
Description: 'Increases or decreases the color intensity of an element.'
Subjects:
- 'Web Development'
- 'Web Design'
Tags:
- 'Images'
- 'Functions'
- 'Colors'
- 'Elements'
CatalogContent:
- 'learn-css'
- 'paths/front-end-engineer-career-path'
- 'paths/full-stack-engineer-career-path'
---

Increase or decrease the intensity of the color of the element it is applied to.
In CSS, the `saturate()` function increases or decreases the [color](https://www.codecademy.com/resources/docs/css/colors) intensity of an element.

## Syntax

```css
```pseudo
filter: saturate(<value>);
```

where a required `<value>` can be one of the following:
The required `<value>` can either be a positive decimal number or a positive percentage number, such as (but not limited to):

- Number value: `0`, `1.5`
- Percentage value: `100%`, `50%`
- Decimal value: `0`, `0.5`, `1.0`, `1.5`, ...
- Percentage value: `0%`, `50%`, `100%`, `150%`, ...

**Note:** Value defaults to `1` or `100%` leaving element unchanged. Higher values will increase saturation. A value of `0` and `0%` will remove all color leaving the element completely unsaturated. Negative values are not allowed.
> Note: The value defaults to `1` or `100%`, leaving the target element unchanged. Higher values will increase the saturation. A value of `0` or `0%` will remove all the colors, leaving the element completely unsaturated. Negative values are not allowed.
## Example 1
## Example

Set the saturation of a color to `25%`:
The following example sets the saturation of a color to `50%` and `1.5` (or `150%`):

```css
.banner-image {
filter: saturate(25%);
.logo-image-2 {
filter: saturate(50%);
}

.logo-image-3 {
filter: saturate(1.5);
}
```

Here is the output for the above example:

![Output for the above example on saturate()](https://raw.githubusercontent.com/Codecademy/docs/main/media/css-filterfunction-saturate-example.png)

Here, the first image shows the original saturation at `saturate(100%)`, the second image is less saturated at `saturate(50%)`, and the last image is more saturated with `saturate(1.5)`.
Binary file added media/css-filterfunction-saturate-example.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 6f0c4ff

Please sign in to comment.