#CodepenChallenge 100 Horizontal Rules! Interactive Pattern
Tags: codepen, beginners, css, html
Published: 2020-09-29 15:09:24

## Description

<p>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 <code>:after</code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a>, the text can't be copied.</p>

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

<p>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 <code>cubic-bezier</code> for transition time, which is I believe also a cause in performance issue.</p>

<p>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.</p>

## How I did it

<p>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.</p>

<p>Below is the compiled HTML code. (Figure 1)</p>

```HTML

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

```

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

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

```CSS

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 */
}

```

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

<p>for these elements to become a dialog box when clicked (focused), I did it in CSS, by using the <code>:focus</code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a>. Then, place the element into the center of the page.</p>

<p>Below is the CSS code for focus. (Figure 3)</p>

```CSS

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 */
}

```

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

<p>Also, as you can see in Figure 3, I used the <code>--content</code> variable to set the content of the <code>&lr;hr /&gt;</code> tag. Note that you can only set the <code>content</code> property on the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a></p>

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

## Live demo

<p>Below is the live demo I embedded using Codepen.</p>

{% codepen https://codepen.io/takaneichinose/pen/gOryEow %}