Re: [csswg-drafts] [css-color] Add `opacity` specific parameters for control of a specific element's opacity (#10677)

A few related notes:

1. The CSS Color 3 specification is already a recommendation, meaning it won't get any new features. There are already three other levels of this specifiation being worked on, while [level 4](https://www.w3.org/TR/css-color-4/) is closest to being a recommendation. Any suggestions for new features should target level 5 or 6. See also https://drafts.csswg.org for an overview of all the specification drafts.
2. Tab refers to the relative color syntax introduced in level 5 of the spec. With that e.g. your border example may look like this:
```css
.card {
    border: 2px solid rgb(from blue r g b / 0.5);
    opacity: 0.3;
    text-color: yellow;
}
```
and your gradient example like this:
```css
.header {
    background: linear-gradient(to right, from(red r g b / 0.5), from(blue r g b / 0.5));
    background-color: white;
    opacity: 0.9;
}
```
3. Regarding images like gradients, the working group also [resolved on adding an `@image` rule](https://github.com/w3c/csswg-drafts/issues/6807#issuecomment-1248380039). This at-rule is not specified yet and the final syntax not yet set in stone, though that might look like this for your gradient example:

 ```css
@image --semi-transparent {
    opacity: 0.5;
}
.header {
    background: image(linear-gradient(to right, red, blue), --semi-transparent);
    background-color: white;
    opacity: 0.9;
}
```

And yes, that's an overhead to write, therefore there's also a functional approach discussed, which might look like this:

```css
.header {
    background: image(linear-gradient(to right, red, blue), opacity(0.5));
    background-color: white;
    opacity: 0.9;
}
```

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10677#issuecomment-2282642259 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 11 August 2024 06:28:11 UTC