DEV Community

Cover image for CSS Disco Text
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

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

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;
}
Enter fullscreen mode Exit fullscreen mode

The glow animation is where the cool effect takes place:

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

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.

CSS Filter support

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

Discussion (4)

Collapse
ljnce profile image
Luca

That's awesome!! I Will l try It!

Collapse
dailydevtips1 profile image
Chris Bongers Author

Nice, If you want show me what you made, looking forward too seeing more of this! 🤟

Collapse
artydev profile image
artydev

I really love it, thanks :-)

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thanks, glad you like it!