rixx on Nostr: TIL: relative colours in #CSS. You define an origin colour, and then modify (with the ...
TIL: relative colours in #CSS. You define an origin colour, and then modify (with the magic r/g/b/alpha variables for rgb) or override the values. Supported in all major browsers now (except Firefox for Android):
https://caniuse.com/css-relative-colorsExample: Use the primary colour, but make it transparent and reduce how green it is:
rgb(from var(--primary-colour) r calc(g/2) b / calc(alpha * 0.5))
Published at
2024-08-22 08:21:15Event JSON
{
"id": "1d0bd4c9e90afb3e93090b3685bb4db33b64f378ff91abd7bd04c838fd6647ba",
"pubkey": "0f0ce59a08967d93037a8cd08fc8a69863bf755a92cb84247a7f5143bc27fbfb",
"created_at": 1724314875,
"kind": 1,
"tags": [
[
"t",
"css"
],
[
"proxy",
"https://chaos.social/@rixx/113004699674404868",
"web"
],
[
"proxy",
"https://chaos.social/users/rixx/statuses/113004699674404868",
"activitypub"
],
[
"L",
"pink.momostr"
],
[
"l",
"pink.momostr.activitypub:https://chaos.social/users/rixx/statuses/113004699674404868",
"pink.momostr"
],
[
"-"
]
],
"content": "TIL: relative colours in #CSS. You define an origin colour, and then modify (with the magic r/g/b/alpha variables for rgb) or override the values. Supported in all major browsers now (except Firefox for Android): https://caniuse.com/css-relative-colors\n\nExample: Use the primary colour, but make it transparent and reduce how green it is:\n\nrgb(from var(--primary-colour) r calc(g/2) b / calc(alpha * 0.5))",
"sig": "c8d70522ccd54e831bfc7f40213460871d373084f63570095fdaba40d9af83d2bad2a11c887092d33d96d4553df11ef115b03c840e2ae976681a8c15aa03eaa4"
}