Home / Articles / Programming languages / Markup languages / HTML & CSS / Light up letter sign for error page using CSS3 animation

Light up letter sign for error page using CSS3 animation

Light up letter sign for error page using CSS3 animation
 
Light up letter sign for error page using CSS3 animation
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


Over the last few years of surfing the Internet, we can observe more and more websites which have well-designed and creative error pages. This article proposes an idea how to do it using simple animation in CSS3.

Here is how it's going to look like at the end of the article after all steps performed.

On desktop computer:

Light up letter sign in operation on desktop computer

On mobile device:

Light up letter sign in operation on mobile device

HTML structure

<div class="light-up-letters">40<span class="fade">4</span> err<span class="flicker">o</span>r p<span class="sparkle">a</span>ge</div>

Special font for light up letters

For light up letters we are going to use a free font called "Budmo Jigglish". But first, it must be converted into a web font via a web font online generator.

Once the web font is generated, a @font-face rule has to be used to load the font on a webpage.

Here are CSS styles for that:

@font-face {
  font-family: 'budmojigglish';
  src: url('fonts/budmo-jigglish.eot');
  src: url('fonts/budmo-jigglish.eot?#iefix') format('embedded-opentype'),
    url('fonts/budmo-jigglish.woff2') format('woff2'),
    url('fonts/budmo-jigglish.woff') format('woff'),
    url('fonts/budmo-jigglish.ttf') format('truetype'),
    url('fonts/budmo-jigglish.svg#budmojigglish') format('svg');
  font-weight: normal;
  font-style: normal;
}

Light up letters by CSS

The following text is going to be used for our sign: "404 error page". It should be big enough to look like a sign with "Budmo Jigglish" font applied and colored red.

The following styles can do this:

.light-up-letters {
  display: inline-block;
  font-family: 'budmojigglish';
  font-size: 80px;
  font-weight: 100;
  color: red;
}

Live demo

Now it's time to light up our letters of the sign. For this purpose, a text-shadow CSS property comes to the rescue:

.light-up-letters {
  text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
}

Live demo

Previously we have already used a text-shadow CSS property to create a pseudo 3D text with explanations of how it works.

Flicker animation

The effect of animation can be achieved by changing two CSS properties: text-shadow and opacity.

To turn off the light for one letter we change:

  • text-shadow value to none in order to remove a glow around a letter;
  • opacity value to 0.6 in order to make a letter dim.

A periodical value changing an infinite number of times is only possible by using @keyframes rule in CSS3.

There is no need to explain its syntax and working principle, as it has already been revealed in the following article: Animation in CSS3.

Here are CSS styles for our animation:

.light-up-letters .fade {
  animation: fade 5s linear infinite;
}

.light-up-letters .flicker {
  animation: flicker 6s 1s linear infinite;
}

.light-up-letters .sparkle {
  animation: sparkle 3s 3s linear infinite;
}

@keyframes fade {
  0%,9%,11%,13%,15%,41%,43%,45% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  10%,12%,14%,42%,44% {
    opacity: 0.6;
    text-shadow: none; 
  }
}

@keyframes flicker {
  51% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  0%,50%,52%,100% {
    opacity: 0.6;
    text-shadow: none; 
  }
}

@keyframes sparkle {
  0%,9%,11%,13%,15%,41%,43%,45% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  10%,12%,14%,42%,44% {
    opacity: 0.6;
    text-shadow: none; 
  }
}

Live demo

If we want to cover old versions of browsers, we need to supplement our styles with vendor prefixes like this:

.light-up-letters .fade {
  -webkit-animation: fade 5s linear infinite;
  animation: fade 5s linear infinite;
}

.light-up-letters .flicker {
  -webkit-animation: flicker 6s 1s linear infinite;
  animation: flicker 6s 1s linear infinite;
}

.light-up-letters .sparkle {
  -webkit-animation: sparkle 3s 3s linear infinite;
  animation: sparkle 3s 3s linear infinite;
}

@-webkit-keyframes fade {
  0%,9%,11%,13%,15%,41%,43%,45% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  10%,12%,14%,42%,44% {
    opacity: 0.6;
    text-shadow: none; 
  }
}

@keyframes fade {
  0%,9%,11%,13%,15%,41%,43%,45% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  10%,12%,14%,42%,44% {
    opacity: 0.6;
    text-shadow: none; 
  }
}

@-webkit-keyframes flicker {
  51% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  0%,50%,52%,100% {
    opacity: 0.6;
    text-shadow: none; 
  }
}

@keyframes flicker {
  51% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  0%,50%,52%,100% {
    opacity: 0.6;
    text-shadow: none; 
  }
}

@-webkit-keyframes sparkle {
  0%,9%,11%,13%,15%,41%,43%,45% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  10%,12%,14%,42%,44% {
    opacity: 0.6;
    text-shadow: none; 
  }
}

@keyframes sparkle {
  0%,9%,11%,13%,15%,41%,43%,45% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  10%,12%,14%,42%,44% {
    opacity: 0.6;
    text-shadow: none; 
  }
}

Live demo

The following archive contains the example above:


 

Read also

Discussion (total 1 comments)

yash gohel
November 22, 2016 at 09:22 am
<b>Best</b>

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation