Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Edit] CSS [Edit] CSS: Filter Functions .saturate() #4876

Merged
merged 9 commits into from
Jul 4, 2024
27 changes: 17 additions & 10 deletions content/css/concepts/filter-functions/terms/saturate/saturate.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
Title: 'saturate()'
Description: 'Increase or decrease the intensity of the color of the element it is applied to.'
Description: 'Increase or decrease the color intensity of an element.'
Subjects:
- 'Web Development'
- 'Web Design'
Expand All @@ -14,27 +14,34 @@ CatalogContent:
- 'paths/full-stack-engineer-career-path'
---

Increase or decrease the intensity of the color of the element it is applied to.
Increase or decrease the color intensity of an element.

## Syntax

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

where a required `<value>` can be one of the following:
where a required `<value>` can be either a positive decimal number or 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 element unchanged. Higher values will increase the saturation. A value of `0` and `0%` will remove all color leaving the element completely unsaturated. Negative values are not allowed.

## Example 1
## Example

Set the saturation of a color to `25%`:
Set the saturation of a color to `50%`and `150%`:

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

![CSS saturate filter example](https://raw.githubusercontent.com/Codecademy/docs/main/media/css-filterfunctions-saturate-example.png)

Here, the first image shows the original saturation at `saturate(100%)`. The second image is less saturated with `saturate(50%)`, and the last image is more saturated with `saturate(1.5)`.
100 changes: 0 additions & 100 deletions content/postgresql/concepts/operators/operators.md

This file was deleted.

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.