Day 92: relative color syntax
source link: https://www.matuzo.at/blog/2023/100daysof-day92/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Day 92: relative color syntax
posted on January 31., 2023
It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
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.
Further reading
Want more?
Overview: 100 Days Of More Or Less Modern CSS
My blog doesn't support comments yet, but you can reply via e-mail.
Recommend
-
4
I was reading Dave’s post “Alpha Painlet” when I first learned about CSS relative colors. CSS relative colors enable the dynamic color manipulation I’ve always wanted in van...
-
2
www.colorsandfonts.com Color and typography for Web Developers and Digital Designers. From today, I will sharing 1 Color palette a day as I did before, wh...
-
3
This week in KDE: day color Nate
-
3
Day 11: space-separated functional color notations posted on October 10., 2022 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little abo...
-
4
Day 23: the lab() color function posted on October 26., 2022 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. T...
-
4
Day 30: the hwb() color function posted on November 4., 2022 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. T...
-
2
Day 39: comma-separated functional color notations posted on November 17., 2022 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know...
-
4
Day 57: media queries: range syntax posted on December 13., 2022 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little abou...
-
2
Day 61: color-scheme posted on December 19., 2022 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change th...
-
2
Day 93: the lch() color function posted on February 1., 2023 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. T...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK