I'm Motyar, an entrepreneur and API developer from India

Creating value through Programming

FREE VPS for 2 months
Cloud hosting for developers
20GB SSD, 512MB RAM - only $5 per month

Apr 24, 2010

Text Blur effect with CSS and JQuery

How you would write code if you need to make a text blur on hover?? I had the same question and i am sharing what i got as a solution. The filter blur Just work for IE. I am changing a little bit in text-shadow to create the effect.


I Got idea from the shadow created with the text-shadow property of CSS, That was blurry as i needed so i made the text transparent. What i got was the thing i was searching for. Yes the magic is in the third parameter of text-shadow: 0px 0px 10px #FF33FF;
I have added some JQuery to make it more cool, When you move your mouse far from text the effect works.


This is the code for effect with Just CSS

    font:  100px Georgiasans-serif;
    letter-spacing: -5px;  
    //these two lines do the magic
    text-shadow0px 0px 1px #FF33FF;

   text-shadow0px 0px 10px #FF33FF;

Here the code that makes it live. This code updates the third parameter on mousemove.
$(document).ready(function() {
    $(document).mousemove(function(e) {
         $("#blur").css({'text-shadow''0px 0px '+(( e.pageY 230) / 18)+'px #FF33FF'})
         $("#blur").css({'text-shadow''0px 0px 0px #FF33FF'});



<a href="http://motyar.blogspot.com" id="blur">With JQuery</a>

<a href="http://motyar.blogspot.com" class="blur">Pure CSS Hover me )</a>


You can see this code working well here.

Labels: , ,

By :