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.

Sign up for GitHub

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

Jump to bottom

Update the mix-blend-mode CSS property page: add plus-darker and plus-lighter values #31095

Merged
merged 4 commits into from
Dec 27, 2023
Merged

Update the mix-blend-mode CSS property page: add plus-darker and plus-lighter values #31095

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5f00569
Add `plus-darker` and `plus-lighter` values to the "Values" section
SelenIT Dec 18, 2023
f3d345a
fix a typo
SelenIT Dec 18, 2023
f5e03e8
Add plus-darker and plus-lighter to the example section
SelenIT Dec 19, 2023
a547620
Add links to the spec as suggested in code review
SelenIT Dec 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions files/en-us/web/css/mix-blend-mode/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
mix-blend-mode: plus-darker;
mix-blend-mode: plus-lighter;

/* Global values */
mix-blend-mode: inherit;
Expand All @@ -44,6 +46,10 @@ mix-blend-mode: unset;

- {{cssxref("<blend-mode>")}}
- : The blending mode that should be applied.
- `plus-darker`
- : Blending using the [_plus-darker_ compositing operator](https://drafts.fxtf.org/compositing/#porterduffcompositingoperators_plus_darker).
- `plus-lighter`
- : Blending using the [_plus-lighter_ compositing operator](https://drafts.fxtf.org/compositing/#porterduffcompositingoperators_plus_lighter). Useful for cross-fade effects (prevents unwanted blinking when two overlaying elements animate their opacity in opposite directions).

## Formal definition

Expand Down Expand Up @@ -286,6 +292,32 @@ mix-blend-mode: unset;
</div>
</div>
</div>
<div class="cell">
plus-darker
<div class="container plus-darker">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
plus-lighter
<div class="container plus-lighter">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
</div>

<div class="note">Blending globally (blend with the background)</div>
Expand Down Expand Up @@ -498,6 +530,32 @@ mix-blend-mode: unset;
</div>
</div>
</div>
<div class="cell">
plus-darker
<div class="container plus-darker">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell">
plus-lighter
<div class="container plus-lighter">
<div class="group">
<div class="item firefox"></div>
<svg class="item" viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -632,6 +690,12 @@ body {
.luminosity .item {
mix-blend-mode: luminosity;
}
.plus-darker .item {
mix-blend-mode: plus-darker;
}
.plus-lighter .item {
mix-blend-mode: plus-lighter;
}
```

{{EmbedLiveSample("Effect_of_different_mix-blend-mode_values", "100%", "1600px")}}
Expand Down