Discussion
Loading...

Post

Log in
  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
Christian Alder
Christian Alder
@hejchristian@mastodon.social  路  activity timestamp 2 hours ago

I'm really liking relative colours in CSS!

In this demo I'm changing a base colour variable, and then playing with the step size for the L in HSL. Each SVG layer ends up with its own shade 馃コ

(please ignore the unfinished design, this was just a quick test to see how the layers fit on the page 馃ズ)

#CSS

Your browser does not support the video tag.
This video cannot be previewed
Open original
Silent screenrecording of Polypane on macOS, with the dev tools inspector in its own small window (undocked). On the page is an SVG consisting of 5 layers, and I am changing a CSS variable for the base color, along with the step size between lightness values. This reveals the design with each layer being a slightly different brightness from the other.
  • Copy link
  • Flag this post
  • Block

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About 路 Code of conduct 路 Privacy 路 Users 路 Instances
Bonfire social 路 1.0.2-alpha.7 no JS en
Automatic federation enabled
Log in
  • Explore
  • About
  • Members
  • Code of Conduct