This content originally appeared on Bram.us and was authored by Bramus!
In Michelle’s excellent Guide To Modern CSS Colors, I only found one thing missing: CSS Relative Colors. Plugging that hole is this post by Jim Nielsen.
CSS relative colors enable the dynamic color manipulation I’ve always wanted in vanilla CSS since Sass’ color functions first came on the scene (
darken(),lighten(), etc.).Allow me to explain a bit more about why I’m so excited.
:root {
--color: #ff0000;
}
.selector {
/* syntax: hsl(from var() h s l / alpha) */
/* change the transparency */
color: hsl(from var(--color) h s l / .5);
/* change the hue */
color: hsl(from var(--color) calc(h + 180deg) s l);
/* change the saturation */
color: hsl(from var(--color) h calc(s + 5%) l);
/* change all of them */
color: hsl(
from var(--color)
calc(h + 10deg)
calc(s + 5%)
calc(l - 10%)
/
calc(alpha - 15%)
);
}The CSS Relative Color Syntax is available in Safari ever since TP 122. Other vendors are still working on it. Relevant issues to follow:
- Blink/Chromium: Issue #1274133
- Firefox: Issue #1701488
- WebKit/Safari: Issue #221880 (RESOLVED FIXED)
Dynamic Color Manipulation with CSS Relative Colors →
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-11-26T14:25:34+00:00) Dynamic Color Manipulation with CSS Relative Colors. Retrieved from https://www.scien.cx/2021/11/26/dynamic-color-manipulation-with-css-relative-colors/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.