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

francescorn has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-color-3] add `opacity` specific parameters for control of a specific element's opacity ==
It would be nice to have [`opacity`](https://www.w3.org/TR/css-color-3/#transparency) 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](https://www.w3.org/TR/css-color-3/#rgba-color), 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)`.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10677 using your GitHub account


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

Received on Friday, 2 August 2024 19:51:48 UTC