[css-color] Add `opacity` specific parameters for control of a specific element's opacity

[francescorn]

It would be nice to have opacity parameters specific to other elements with the syntax being the same as opacity, affecting a specific element for finer control. These would be alternatives to using rgba controls, especially when wanting to include an opacity parameter to control all elements.

Summary: background-opacity, border-opacity, disabled-opacity, filter-opacity, focus-opacity, gradient-opacity, hover-opacity, outline-opacity, overlay-opacity, shadow-opacity, and text-opacity.

background-opacity: Adjust the opacity of the background color independently of the content, which can simplify the styling of elements overlaid on backgrounds. Example:

.card { 
    background-color: green;
    background-opacity: 0.5;
    opacity: 0.1;
    text-color: pink;
}

border-opacity: Control the transparency of borders without affecting the entire element. This would be useful for creating subtle, semi-transparent border effects. Example:

.card {
    border: 2px solid blue;
    border-opacity: 0.5;
    opacity: 0.3;
    text-color: yellow;
}

disabled-opacity: Sets the opacity for all elements in a disabled state, helping to visually distinguish disabled items while maintaining their overall layout. Example:

.button:disabled {
    background-color: gray;
    disabled-opacity: 0.5;
    opacity: 0.4;
    text-color: purple;
}

filter-opacity: Manage the opacity of CSS filter effects, which could be useful for creating various visual effects like blurred backgrounds with specific transparency. Example:

.blurred {
    background-color: green;
    filter: blur(5px);
    filter-opacity: 0.5;
    opacity: 0.1;
}

focus-opacity: Modify the opacity of an element when it receives focus, which can help with accessibility and visual cues for user interactions. Example:

.input-field {
    background-color: yellow;
    color: white;
    focus-opacity: 0.8;
    opacity: 0.1;
}

gradient-opacity: Provide control over the opacity of gradient colors, which would be useful for creating complex visual effects with gradients. Example:

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

hover-opacity: Provide a way to change the opacity of an element on hover, which can enhance user interactions and provide visual feedback. Example:

.button {
    background-color: green;
    text-color: green;
    transition: background-opacity 0.3s;
}
.button:hover {
    background-opacity: 0.7;
}

outline-opacity:Control the transparency of outlines, which can be useful for focusing or highlighting elements with a semi-transparent outline. Example:

.focus-element {
    outline: 2px solid green;
    background-color: red;
    opacity: 0.7;
    outline-opacity: 0.5;
}

overlay-opacity: Adjust the opacity of overlay elements, which is useful for modals or other UI elements that need to partially obscure the background. Example:

.modal-overlay {
    background-color: black;
    opacity: 0.9;
    overlay-opacity: 0.7;
    text-color: pink;
}

shadow-opacity: Manage the transparency of shadows, which could enhance the appearance of depth and layering in designs. Example:

.card {
    box-shadow: 0 4px 8px green;
    opacity: 0.8;
    shadow-opacity: 0.3;
}

text-opacity: Control the opacity of text separately from other styles, which is helpful for creating layered designs or faded text effects. Example:

.muted-text {
    color: red;
    opacity: 0.7;
    text-opacity: 0.5;
}

If someone were to write something like this then one of the specific opacities would be overwritten or not be allowed to write both:

.muted-text {
    color: rgba(0, 1, 1, 0.5);
    opacity: 0.7;
    text-opacity: 0.5;
}

When calculating a combined opacity, the calculation would either be: Combined Opacity = opacity × (specific-opacity), or opacity would be overridden by (specific-opacity).

[tabatkins]

What is the advantage of this over just using the opacity parameter in the color syntax, perhaps abstracted out into a variable so it's independently controllable?

Several of your suggestions are state-specific controls, for things that are already selectable via Selectors. What's wrong with setting opacity according to the appropriate selector?

[SebastianZ]

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 specification being worked on, while level 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:

.card {
    border: 2px solid rgb(from blue r g b / 0.5);
    opacity: 0.3;
    text-color: yellow;
}

and your gradient example like this:

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

   @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:

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

Sebastian

[francescorn]

@SebastianZ Thank you. I will reference the editor's drafts and not the recommendations.

I am okay with the syntax:

.card {
    border: 2px solid rgb(from blue r g b / 0.5);
    opacity: 0.3;
    text-color: yellow;
}

[SebastianZ]

Ok, so I am going to close this issue.

---

One more note: Please make sure you reference the right people. You @-mentioned an unrelated person. I've changed your comment so it references me.

Sebastian