One of the big advantages of CSS3 is that it allows us to create stunning text effects through some of its properties. Although text-shadow property has been present for some time, it can be enhanced by using the animation property.
The following example will create text with a neon effect and the addition of a glowing effect on hover.
As you might know the syntax for text-shadow is: offset-x offset-y radius color, where offset-x is the horizontal offset of the shadow from text, offset-y its vertical offset, radius is the distance by which the blur of the shadow is calculated and color is the CSS color of the shadow. The result will change the shadow on hover, add animation, thereby creating a more realistic effect. It is given the following markup:
<div id="container"> <p><span class="blue">We are</span><span class="red"> OPEN</span></p> </div>
We can write the following CSS:
#container {background-color: #222; padding:2em 1em;}
p {font-family:Codystar; font-size:5em; font-weight:bold; }
p .red {color:#ff0000;}
p:hover .red {-webkit-animation: neon1 1.5s ease-in-out infinite alternate;
-moz-animation: neon1 1.5s ease-in-out infinite alternate;
animation: neon1 1.5s ease-in-out infinite alternate; }
p .blue {color:#228DFF;}
p:hover .blue {color:#6cd7ff;
-webkit-animation: neon2 1.5s ease-in-out infinite alternate;
-moz-animation: neon2 1.5s ease-in-out infinite alternate;
animation: neon2 1.5s ease-in-out infinite alternate;}
@-webkit-keyframes neon1 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff0000,
0 0 70px #ff0000,
0 0 80px #ff0000,
0 0 100px #ff0000,
0 0 150px #ff0000;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #ff0000,
0 0 35px #ff0000,
0 0 40px #ff0000,
0 0 50px #ff0000,
0 0 75px #ff0000;
}
}
@-webkit-keyframes neon2 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #228DFF,
0 0 70px #228DFF,
0 0 80px #228DFF,
0 0 100px #228DFF,
0 0 150px #228DFF;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #228DFF,
0 0 35px #228DFF,
0 0 40px #228DFF,
0 0 50px #228DFF,
0 0 75px #228DFF;
}
}
@-moz-keyframes neon1 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff0000,
0 0 70px #ff0000,
0 0 80px #ff0000,
0 0 100px #ff0000,
0 0 150px #ff0000;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #ff0000,
0 0 35px #ff0000,
0 0 40px #ff0000,
0 0 50px #ff0000,
0 0 75px #ff0000;
}
}
@-moz-keyframes neon2 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #228DFF,
0 0 70px #228DFF,
0 0 80px #228DFF,
0 0 100px #228DFF,
0 0 150px #228DFF;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #228DFF,
0 0 35px #228DFF,
0 0 40px #228DFF,
0 0 50px #228DFF,
0 0 75px #228DFF;
}
}
@keyframes neon1 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff0000,
0 0 70px #ff0000,
0 0 80px #ff0000,
0 0 100px #ff0000,
0 0 150px #ff0000;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #ff0000,
0 0 35px #ff0000,
0 0 40px #ff0000,
0 0 50px #ff0000,
0 0 75px #ff0000;
}
}
@keyframes neon2 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #228DFF,
0 0 70px #228DFF,
0 0 80px #228DFF,
0 0 100px #228DFF,
0 0 150px #228DFF;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #228DFF,
0 0 35px #228DFF,
0 0 40px #228DFF,
0 0 50px #228DFF,
0 0 75px #228DFF;
}
}
Demo: