This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
With the relative color syntax we can modify existing colors using color functions. If an origin color is specified, each color channel can either be directly specified, or taken from the origin color and modified.
For example, we can take a HEX color and add opacity using the rgb() color function and the from keyword.
div {
--color: #FF0000;
}
div {
background-color: rgb(from var(--color) r g b / 50%);
}Or we can take the color and replace a specific channel.
div {
background-color: rgb(from var(--color) r g 150);
}We can even use the calc() function.
div {
background-color: hsl(from var(--color) h s calc(l - 10%));
}We can use channel keywords in their corresponding argument, but we don't have to. We can use them in any position.
div {
background-color: rgb(from var(--color)
calc(r * .3 + g * .59 + b * .11)
calc(r * .3 + g * .59 + b * .11)
calc(r * .3 + g * .59 + b * .11));
}How cool is that!? Is there a catch? Well, yeah, it's currently only supported in Safari behind a flag.
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-01-31T09:38:54+00:00) Day 92: relative color syntax. Retrieved from https://www.scien.cx/2023/01/31/day-92-relative-color-syntax/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.