How To Create Glowing Text Using CSS3.

This article will show you exactly how to make your text glow upon mouse over using nothing but CSS3. It’s a pretty cool effect, how you implement it is up to you, and feel free to experiment with the code to make it fit your site.

I originally found this code on the HTML5 Community site  and was rather impressed with it. However, there’s only a block of code listed in that forum. I will attempt to break down the code and explain the different parts.

Glowing CSS3 Text Explanation

First, you start basic enough by defining your font:

.text-glow {

   font-size:4em;

   color: #FFFFFF;

   font-family:Arial;

   }

The second part becomes more complicated by defining the hover, focus and active attributes all at once:

.text-glow:hover, .text-glow:focus, .text-glow:active {

   -webkit-stroke-width: 5.3px;

   -webkit-stroke-color: #FFFFFF;

   -webkit-fill-color: #FFFFFF;

   text-shadow: 1px 0px 20px yellow;

   -webkit-transition: width 0.3s; /*Safari & Chrome*/

   transition: width 0.3s;

   -moz-transition: width 0.3s; /* Firefox 4 */

   -o-transition: width 0.3s; /* Opera */

   }

CSS3 Hover, Focus and Active Attributes

Let’s break this one down. The hover attribute should be self-explanatory in that this effect will take place when the visitor hovers their mouse over the text.

The focus attribute is a little less clear here. W3Schools.com defines it as follows, “the :focus selector is allowed on elements that accept keyboard events or other user inputs.” However, the demo associated with the code does not use events or other user inputs. So, you can most likely do away with it. However, it appears that you can use it if needed.

The :active attribute is more necessary here in that it is used to select and style the active link. This code is based on making links glow in a very cool way, and thus the :active attribute is necessary.

The -webkit-stroke- part of the code is new to me. In this code example, it is used for width, color and fill. You can use it to set the color and width of the text’s outline.

Most people are probably more familiar with the transition attributes, especially if you are a regular reader of HTMLgoodies. The transition does exactly as it states: it sets the amount of time it takes for the transition (the glow effect) to happen. In this case, it’s .3 seconds. So, it’s very quick.

CSS3 Link Attributes

That’s the first half of the code. The second half defines the link attributes like this:

   .text-glow a {

   -webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/

   transition: all 0.3s ease-in;

   -moz-transition: all 0.3s ease-in; /* Firefox 4 */

   -o-transition: all 0.3s ease-in; /* Opera */

   text-decoration:none;

   color:white;

   }

Again, this code mostly uses the transition effect, which is very popular with CSS3 designers.

To implement this effect on your page, simply set the div class and add an href tag around the text that you want to link and glow.

<div class=”text-glow”>

   <a href=”#”>

     This Text Glows In Mouse Over

   </a>

</div>

You can find a demo of the glowing CSS3 text here.