Closed francescorn closed 3 weeks ago
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?
A few related notes:
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.
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;
}
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
@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;
}
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
It would be nice to have
opacity
parameters specific to other elements with the syntax being the same asopacity
, affecting a specific element for finer control. These would be alternatives to usingrgba
controls, especially when wanting to include anopacity
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
, andtext-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:border-opacity
: Control the transparency of borders without affecting the entire element. This would be useful for creating subtle, semi-transparent border effects. Example:disabled-opacity
: Sets the opacity for all elements in a disabled state, helping to visually distinguish disabled items while maintaining their overall layout. Example: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:focus-opacity
: Modify the opacity of an element when it receives focus, which can help with accessibility and visual cues for user interactions. Example:gradient-opacity
: Provide control over the opacity of gradient colors, which would be useful for creating complex visual effects with gradients. Example:hover-opacity
: Provide a way to change the opacity of an element on hover, which can enhance user interactions and provide visual feedback. Example:outline-opacity
:Control the transparency of outlines, which can be useful for focusing or highlighting elements with a semi-transparent outline. Example: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:shadow-opacity
: Manage the transparency of shadows, which could enhance the appearance of depth and layering in designs. Example:text-opacity
: Control the opacity of text separately from other styles, which is helpful for creating layered designs or faded text effects. Example:If someone were to write something like this then one of the specific opacities would be overwritten or not be allowed to write both:
When calculating a combined opacity, the calculation would either be: Combined Opacity =
opacity
×(specific-opacity)
, oropacity
would be overridden by(specific-opacity)
.