-
Notifications
You must be signed in to change notification settings - Fork 3.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Edit] CSS Filter Functions: saturate()
* 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
1 parent
ecebb73
commit 6f0c4ff
Showing
2 changed files
with
22 additions
and
12 deletions.
There are no files selected for viewing
34 changes: 22 additions & 12 deletions
34
content/css/concepts/filter-functions/terms/saturate/saturate.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)`. |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.