Skip to content

Instantly share code, notes, and snippets.

@adamschwartz

adamschwartz/--color-rgb-varying-opacity-example.html

Created June 16, 2020 07:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adamschwartz/067bf09fc380379f52708db1a7d94383 to your computer and use it in GitHub Desktop.
Save adamschwartz/067bf09fc380379f52708db1a7d94383 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
--color-rgb-varying-opacity-example.html
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<style visible>
:root { --color-rgb: 8, 10, 60 }
</style>
<style>
:root {
font-family: monospace;
}
head, style[visible] { display: block }
style[visible] {
white-space: pre;
width: 30em;
}
body { margin: 1em }
div {
background: currentColor;
height: 2em;
width: 2em;
margin: .5em;
}
div::after {
content: "rgba(var(--color-rgb), ." attr(o) ")";
display: block;
width: 16em;
padding: .5em 3.5em;
color: rgb(var(--color-rgb));
}
[o="1"] { color: rgba(var(--color-rgb), .1) }
[o="2"] { color: rgba(var(--color-rgb), .2) }
[o="3"] { color: rgba(var(--color-rgb), .3) }
[o="4"] { color: rgba(var(--color-rgb), .4) }
[o="5"] { color: rgba(var(--color-rgb), .5) }
[o="6"] { color: rgba(var(--color-rgb), .6) }
[o="7"] { color: rgba(var(--color-rgb), .7) }
[o="8"] { color: rgba(var(--color-rgb), .8) }
[o="9"] { color: rgba(var(--color-rgb), .9) }
</style>
<div o=1></div>
<div o=2></div>
<div o=3></div>
<div o=4></div>
<div o=5></div>
<div o=6></div>
<div o=7></div>
<div o=8></div>
<div o=9></div>
@adamschwartz
Copy link
Author

Demo →

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment