Skip to content

Instantly share code, notes, and snippets.

@danburzo
Last active September 11, 2019 13:06
Show Gist options
  • Save danburzo/cc321d725c707ebce115808bdd470014 to your computer and use it in GitHub Desktop.
Save danburzo/cc321d725c707ebce115808bdd470014 to your computer and use it in GitHub Desktop.
Hover-aware CSS debug styles.
/*
Hue rotaton based on the DOM element depth.
*/
* { --hue: 0; }
* * { --hue: 60; }
* * * { --hue: 120; }
* * * * { --hue: 180; }
* * * * * { --hue: 240; }
* * * * * * { --hue: 300; }
* * * * * * * { --hue: 0; }
* * * * * * * * { --hue: 60; }
* * * * * * * * * { --hue: 120; }
* * * * * * * * * * { --hue: 180; }
* * * * * * * * * * * { --hue: 240; }
* * * * * * * * * * * * { --hue: 300; }
body :hover, body :hover > * {
/* Outline the element */
outline: 1px solid hsl(var(--hue), 100%, 50%);
background:
/* content-box color */
linear-gradient(
hsl(var(--hue), 100%, 50%, 0.1),
hsl(var(--hue), 100%, 50%, 0.1)
),
/* content-box white undercoat */
linear-gradient(white, white),
/* padding-box stripes */
repeating-linear-gradient(
45deg,
hsl(var(--hue), 100%, 50%, 0.3) 0,
hsl(var(--hue), 100%, 50%, 0.3) 1px,
transparent 1px,
transparent 3px
);
background-origin:
content-box,
content-box,
padding-box;
background-repeat: no-repeat;
}
/*
Show hovered element class
*/
body [class]:hover:before {
content: attr(class);
position: absolute;
z-index: 9999;
font-family: sans-serif;
font-size: 0.8rem;
padding: 0.5em;
background: #000;
color: hsl(var(--hue), 100%, 75%);
transform: translate(-100%, -100%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment