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
Prev Previous commit
Minor changes
  • Loading branch information
Sriparno08 committed Jul 4, 2024
commit 3905687b9101b90de2e353b0983d07cf2a6f537d
21 changes: 12 additions & 9 deletions content/css/concepts/filter-functions/terms/saturate/saturate.md
Original file line number Diff line number Diff line change
@@ -1,47 +1,50 @@
---
Title: 'saturate()'
Description: 'Increase or decrease the color intensity of an element.'
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 color intensity of an element.
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 either a positive decimal number or positive percentage number, such as (but not limited to):
The required `<value>` can either be a positive decimal number or a positive percentage number, such as (but not limited to):

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

**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.
> 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

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

```css
.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 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 with `saturate(50%)`, and the last image is more saturated with `saturate(1.5)`.
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)`.
100 changes: 100 additions & 0 deletions content/postgresql/concepts/operators/operators.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
---
Title: 'Operators'
Description: 'Enable users to perform different operations on the data.'
Subjects:
- 'Computer Science'
- 'Data Science'
Tags:
- 'Data'
- 'Database'
- 'Operators'
- 'PostgreSQL'
CatalogContent:
- 'learn-sql'
- 'paths/analyze-data-with-sql'
---

In PostgreSQL, **operators** enable users to perform different operations on the data in one or multiple tables in a [database](https://www.codecademy.com/resources/docs/general/database). They can be used for calculations, comparisons, joining, filtering, etc.

## Syntax

There are many operators that can be used in PostgreSQL. Here are some common ones:

### Comparison Operators

The following operators can be categorized as comparison operators:

```pseudo
// Equal to
SELECT * FROM table_name
WHERE column1 = 'North';

// Not Equal to
SELECT * FROM table_name
WHERE column1 != column2;

// Greater than
SELECT * FROM table_name
WHERE column1 > 10;

// Less than
SELECT * FROM table_name
WHERE column1 < 1000;
```

### Logical Operators

The following operators can be categorized as logical operators:

```pseudo
// AND
SELECT * FROM table_name
WHERE column1 >= 10 AND column1 <= 1000;

// OR
SELECT * FROM table_name
WHERE column1 = 'NORTH' OR 'WEST';

// NOT
SELECT * FROM table_name
WHERE NOT column1 = 'SOUTH';
```

## Examples

The following examples demonstrate the usage of operators in PostgreSQL.

Here's a table named `animals` to be used for the examples:

| `id` | `name` | `species` | `gender` | `age` |
| ---- | ------ | --------- | -------- | ----- |
| 01 | Niko | monkey | female | 3 |
| 02 | Frank | giraffe | male | 4 |
| 03 | Lyn | lion | female | 6 |
| 04 | Tom | elephant | male | 7 |

Here's a query that invokes some of the operators mentioned above:

```sql
SELECT * FROM animals WHERE gender = 'female' AND age >= 4;
```

The above query results in the following output:

| `id` | `name` | `species` | `gender` | `age` |
| ---- | ------ | --------- | -------- | ----- |
| 03 | Lyn | lion | female | 6 |

Here's another query that invokes some operators:

```sql
SELECT * FROM animals WHERE NOT species = 'lion';
```

The above query produces the following output:

| `id` | `name` | `species` | `gender` | `age` |
| ---- | ------ | --------- | -------- | ----- |
| 01 | Niko | monkey | female | 3 |
| 02 | Frank | giraffe | male | 4 |
| 04 | Tom | elephant | male | 7 |
Loading