26 August 2011

Add Glow Text in CSS3

Add Glow Text in CSS3
Puts Glow Hover Effect in Text
Learn how to add Glow Text Effect while Hovering it in CSS3. Easy and Straightforward Adding of Glow Text to your website. It is a useful feature in CSS3 and you dont need to add Javascript just to achieve this effect. Well, Thanks for the information in Create Glowing Effect of Text

How to create Glowing Text?
First of all you may want to see it in action
A Sample Output

Ok lets put the codes in tag
ADD THESE code to your Head Tag




.my-text-glow {
   font-size:12px;
   color: #ff0000;
   }
.my-text-glow:hover, .my-text-glow:focus, .my-text-glow:active {
   -webkit-stroke-width: 5.3px;
   -webkit-stroke-color: #ccc;
   -webkit-fill-color: #ccc;
   text-shadow: 1px 0px 20px blue;
   -webkit-transition: width 0.1s; /*Safari & Chrome*/
   transition: width 0.1s;
   -moz-transition: width 0.1s; /* Firefox 4 */
   -o-transition: width 0.1s; /* Opera */
   }




Then In your Body Tab put this code anywhere you want
<div class="my-text-glow">
   <a href="#">
     This Text Glows In Mouse Over
   </a>
</div>


Learn more about HTML in W3Schools
Advertisement


Featured Offers:
Advertisement