CSS Disco Text

CSS Disco Text

Today, we show you how to create something completely useless, but fun! A Disco text, mainly because we want you to know more about explore the hue-rotate function.

So, Let’s get started.

01. HTML

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

02. CSS

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);  }}

Finally, the result output is below

Fancy you stumbling on my piece of the internet. Bonjour!

My name is Anmol and I'm the Blogger-In-Chief of this joint & working as the Chief Technology Officer at Azoora, Inc. I'm putting up my views here trying to help creative solopreneurs, developers & designers build their business using the power of websites, apps & social media, this, is, my jam.

If you're looking to start your own online business with a professional high quality website or mobile app, just get in touch. I'd be more than happy to assist.


Leave a Comment

Your email address will not be published. Required fields are marked *