CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-07-13 21:15:35 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat(curriculum): add interactive examples to css filter lesson (#63015)

Browse Source
This commit is contained in:
Diem-Trang Pham 2025-10-24 04:26:03 -05:00 committed by GitHub
parent 72eb4fffc5
commit 11b93bb17e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 61 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md
View File

@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-is-the-css-filter-property
---
# --description--
# --interactive--
The CSS `filter` property is a powerful tool that allows you to apply graphical effects to elements on a web page. It's particularly useful for adjusting the visual presentation of images, backgrounds and even text without modifying the original asset.
@ -19,62 +19,116 @@ selector {
Here `function` represents the specific filter effect you want to apply, and `amount` is typically a value that determines the intensity of the effect. Now let's look at some common filter functions and their uses.
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
```
```css
img {
filter: blur(5px);
filter: blur(2px);
}
```
:::
The `blur` function applies a gaussian blur to the element, the amount is specified in pixels and represents the radius of the blur. This CSS rule will apply a 5 pixel blur to all images on the page. The `blur` effect can be useful for creating depth in your design or for obscuring parts of an image.
The `brightness` function adjusts the brightness of the element. A value of `0%` will make the element completely black, while values over `100%` will increase the brightness.
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
```
```css
.bright-image {
img {
filter: brightness(150%);
}
```
:::
This CSS rule increases the brightness of elements with the class `bright-image` by `50%`. Brightness adjustments can be used to make images pop or create a washed-out effect.
The `grayscale` function converts the element to grayscale. The amount is defined as a percentage, where `100%` is completely grayscale and `0%` leaves the image unchanged.
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
```
```css
.gray-image {
img {
filter: grayscale(100%);
}
```
:::
This rule will convert elements with the class `gray-image` to complete grayscale. `grayscale` can be used to create a vintage look or de-emphasize certain elements on a page.
The `sepia` function applies a sepia tone to the element. Like grayscale, it uses a percentage value:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
```
```css
.old-photo {
img {
filter: sepia(80%);
}
```
:::
This rule applies an `80%` sepia effect to elements with the class `old-photo`. The sepia effect is great for creating a vintage or old-timey look.
The `hue-rotate` function applies the hue rotation to the element. The value is defined in degrees, and represents a rotation around the color circle.
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
```
```css
.color-shift {
img {
filter: hue-rotate(90deg);
}
```
:::
This rule rotates the hue of elements with the class `color-shift` by `90` degrees. Hue rotation can be used to create psychedelic effects or to adjust the overall color scheme of an image.
One of the most powerful aspects of the `filter` property is the ability to combine multiple effects. You can apply several filters to the same element by separating them with spaces:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
```
```css
.multi-filter {
img {
filter: contrast(150%) brightness(110%) sepia(30%);
}
```
:::
This rule applies increased contrast, slightly increased brightness, and a subtle sepia effect to elements with the class `multi-filter`.
By combining filters you can create complex and unique visual effects tailored to your design needs. The CSS filter property is a versatile tool that allows for creative visual manipulation of web elements.