CSS Disco Text
Tags: css
Published: 2020-08-14 06:32:28

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

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

## 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:

```css
.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](https://daily-dev-tips.com/posts/css-flexbox-most-easy-center-vertical-and-horizontal/).

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

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

```css
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:

```css
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:

```css
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:

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

There we go, this results in the following Codepen.

{% codepen https://codepen.io/rebelchris/pen/JjXGOMv default-tab=css,result %}

## Browser Support

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

There is a [polyfill](https://github.com/Schepp/CSS-Filters-Polyfill), but also limited.

![CSS Filter support](https://caniuse.bitsofco.de/image/css-filters.png)

### 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](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)