Monday, May 21, 2012

Glowing text effect using CSS3

We have seen websites containing texts which glows on hovering over it.
In this post,we will take a quick look on how this effect is achieved.
For this technique to see in action, you need a modern browser which supports CSS3.
We will be using CSS3 shadows for this effect.
  • Create an html file and name it as glow.html
  • Create an anchor with class name glow-text inside a div with id container .
<div id="container">
<a href="#" class="glow-text">I'm glowing</a>
Now its time to add some styles.
#container {
a.glow-text {
 font-size: 3em;
 line-height: 1.4em;
 color: white;
 font-style: italic;
 font-family: Georgia, times, serif;
 color: #fff;
 text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
 text-decoration: none;
  padding: 10px 15px;
a.glow-text:hover {
 text-shadow: 0px 0px 10px #fff;
 What is text-shadow

A CSS2 property (dropped in 2.1 then reintroduced in CSS3)
that adds a shadow to hypertext, with options for the direction,
amount of blur, and color of the shadow.
 text-shadow: 0px 0px 10px #fff;
What is RGBA

Not a CSS property, but rather a new color model introduced
in CSS3, adding the ability to specify a level of opacity along
with an RGB color value.
rgba(0, 0, 0, 0.5) /* black at 50% opacity */
Enjoy using glowing text-effect in your website.

Download glow.html


Post a Comment