[css-color] Add opacity specific parameters for control of a specific element's opacity #10677
Description
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).