CSS Disco Text

Today, something completely useless, but oh, so fun! A Disco text, mainly because I wanted to explore the hue-rotate function and really didn't have a good use case for it.

If you have a nice use-case drop me a message!

HTML Structure

<div class="container">
  <input type="checkbox" />
  <div>D I S C O</div>
  <i>click above</i>
  <span></span>
</div>

I'm going with a very lazy solution today, and we'll use an invisible checkbox to get the party started 🥳. Then we have our word which will be the star of the show. And a span for the background effect.

CSS Hue-rotate

For this whole assignment, the major element is showcasing the power of the hue-rotate filter in CSS.

But let's start with some of the more basic styling:

.container {
  position: relative;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

The most important part here is the relative position. The other is just basic centering with flex.

.container span {
  width: 100%;
  height: 100%;
  background: #efefef;
  position: absolute;
  z-index: -1;
  transition: all 0.5s ease;
}

As mentioned this span will be our virtual background, so we give it a starting color that's grey and position it absolute on the whole background. We then add a transition on all effects.

.container div {
  position: relative;
  width: auto;
  background: #1d1e21;
  color: #555;
  padding: 20px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 46px;
  cursor: pointer;
  margin: 0 4px;
  border-radius: 25px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  transition: all 0.5s ease;
}

Now for our main div, nothing fancy, some general styling to make it look nice.

As mentioned this article uses a checkbox to turn our disco on/off, we'll make the checkbox invisible and across our whole page for ease.

input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  z-index: 100;
}

Ok, on to the magic part, what happens if we actually click this checkbox:

input[type='checkbox']:checked ~ span {
  background: #333;
}

First, we make our background span a darker color to "turn the lights off"

And then we turn the actually disco effect on:

input[type='checkbox']:checked ~ div {
  box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
  color: yellow;
  text-shadow: 0 0 15px yellow, 0 0 25px yellow;
  animation: glow 5s linear infinite;
}

The glow animation is where the cool effect takes place:

@keyframes glow {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

There we go, this results in the following Codepen.

Browser Support

As you can imagine, such cool support comes at the price of not supporting every browser :(.

There is a polyfill, but also limited.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter