{"id":5143,"date":"2020-07-14T13:48:00","date_gmt":"2020-07-14T13:48:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5143"},"modified":"2020-08-21T13:55:20","modified_gmt":"2020-08-21T13:55:20","slug":"css-disco-text","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/css-disco-text\/","title":{"rendered":"CSS Disco Text"},"content":{"rendered":"\n

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<\/code>\u00a0function.<\/p>\n\n\n\n

So, Let’s get started<\/strong>.<\/p>\n\n\n\n

01. HTML<\/h2>\n\n\n\n
<div class=\"container\">  <input type=\"checkbox\" \/>  <div>D I S C O<\/div>  <i>click above<\/i>  <span><\/span><\/div><\/code><\/pre>\n\n\n\n
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.<\/p>\n\n\n\n
02. CSS<\/h2>\n\n\n\n
For this whole assignment, the major element is showcasing the power of the hue-rotate<\/code> filter in CSS<\/code>.<\/p>\n\n\n\n
But let’s start with some of the more basic styling:<\/p>\n\n\n\n
.container {  position: relative;  display: flex;  height: 100vh;  align-items: center;  justify-content: center;  flex-direction: column;}<\/code><\/pre>\n\n\n\n
The most important part here is the\u00a0relative<\/code>\u00a0position. The other is just basic\u00a0centering with flex.<\/p>\n\n\n\n
.container span {  width: 100%;  height: 100%;  background: #efefef;  position: absolute;  z-index: -1;  transition: all 0.5s ease;}<\/code><\/pre>\n\n\n\n
As mentioned this span will be our virtual background, so we give it a starting color that’s grey and position it absolute<\/code> on the whole background. We then add a transition on all effects.<\/p>\n\n\n\n
.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;}<\/code><\/pre>\n\n\n\n
Now for our main div, nothing fancy, some general styling to make it look nice.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
input[type='checkbox'] {  position: absolute;  opacity: 0;  cursor: pointer;  height: 100%;  width: 100%;  z-index: 100;}<\/code><\/pre>\n\n\n\n
Ok, on to the magic part, what happens if we actually click this checkbox:<\/p>\n\n\n\n
input[type='checkbox']:checked ~ span {  background: #333;}<\/code><\/pre>\n\n\n\n
First, we make our background span a darker color to “turn the lights off”<\/p>\n\n\n\n
And then we turn the actually disco effect on:<\/p>\n\n\n\n
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;}<\/code><\/pre>\n\n\n\n
The glow animation<\/strong> is where the cool effect<\/strong> takes place:<\/p>\n\n\n\n
@keyframes glow {  0% {    filter: hue-rotate(0deg);  }  100% {    filter: hue-rotate(360deg);  }}<\/code><\/pre>\n\n\n\n
Finally, the result output is below<\/h4>\n\n\n\n
\n