Light up letter sign for error page using CSS3 animation
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:
On mobile device:
HTML structure
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
Continue reading here: Query UI. Widgets. Dialog Windows
Was this article helpful?