#CodepenChallenge 100 Horizontal Rules! Interactive Pattern

Description

This is a no Javascript pick-up sticks, that when a stick is clicked, it will become a dialog box, shows the hex code of its color. But because the text is inside an :after pseudo-element, the text can't be copied.

I produced these colors randomly, by setting 6 random hex codes into string, then set the color as the background-color of these sticks.

Rendering, and operations might be slow in some devices. Especially, when you adjust the size of the window. Maybe because there are lots of elements (Exactly 100) to be transitioned, during the adjustment of the window size. Also, I used cubic-bezier for transition time, which is I believe also a cause in performance issue.

There is no single Javascript source code in this pen, except for the comment. All of the interactions here is made by CSS. HTML code have a Javascript code in it, but it is the rendering logic with Pug.

How I did it

First of all, I put all of the required CSS variables in HTML code, so that, the CSS properties of these are "dynamic", which is rendered dynamically by Pug.

Below is the compiled HTML code. (Figure 1)

<hr style="--background-color: #aa8ad5; --top: 38.54%; --left: 45.07%; --angle: 161deg; --content: &quot;This color is '#aa8ad5'&quot;;" title="aa8ad5" tabindex="0"/>

As you noticed, I used background-image, top, left, transition (I used "angle" as variable), content as a dynamic CSS properties.

In the CSS code, I just set all of these variables into the property. (Figure 2)

hr {
  background-color: var(--background-color);
  top: var(--top);
  left: calc(var(--left) - 30vmin); /* The main formula to put the element to the center is "50% - (width of element / 2)" if you know the width of the element */
  transform: rotate(var(--angle)); /* I used angle, for easy reading */
}

Normally, you can't focus on an <ht /> element, but the hack is, you need to put the tabindex="0" attribute, to allow focusing on it (Look at Figure 1).

for these elements to become a dialog box when clicked (focused), I did it in CSS, by using the :focus pseudo-class. Then, place the element into the center of the page.

Below is the CSS code for focus. (Figure 3)

hr:focus {
  width: 50vw;
  height: 50vh;
  top: calc(50% - 25vh); /* This is the same formula as Figure 1 */
  left: calc(50% - 25vw); /* This is the same formula as Figure 1 */
  transform: rotate(0deg); /* Override the transform */
  z-index: 2; /* To place the element above all these sticks */
  box-shadow: 0 2vmin 4vmin rgba(0, 0, 0, 0.5);
}

hr:focus:before {
  content: var(--content); /* Set the content of <hr /> tag by placing on the content property */
}

As you can see, I overridden the existing CSS elements that I set before. It is because I have to make the &lr;hr /> tag looks like a dialog box.

Also, as you can see in Figure 3, I used the --content variable to set the content of the &lr;hr /> tag. Note that you can only set the content property on the pseudo-element

The remaining uncited codes are not part of the "hack". I just added them to have more flavours of style.

Live demo

Below is the live demo I embedded using Codepen.