Jquery Dense Text Shadow And Blurred Background Color

I am looking for a way/demo to make extra dense thick text shadow by jquery (cross browser compatible as jquery is.) that might not be possible by simple css. with IE support mul

Solution 1:

Here is a more cross-browser implementation of the CSS with stacked shadows!

.blur { 
    color: black;

    /* Chrome, Firefox 3.5+, IE 10+, Opera 9+, Safari 1+ */
    text-shadow: 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1);

   /* The webkit implementations to support more SOME older browsers */
   -moz-text-shadow: 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1);
   -webkit-text-shadow: 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1);
   -khtml-text-shadow: 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1);
}

You can use a comma delimited list for text shadows to achieve what you need.

REGARDING THE BLURRING OF A DIV

FOUND SOMETHING AWESOME!

http://www.blurjs.com/

If that doesn't work, here is a stack overflow answer.

Blur background of a div

This method uses HTML5, and unfortunately won't be compatible with super old browsers. Esentially the div needs to be aware of the background and overlay a blurred version of that background on top.

Solution 2:

This is apparently possible, but only on WebKit browsers, through

-webkit-filter: blur(123px);
filter: blur(123px);

See this demo and adjust the blur property.

Solution 3:

Actually, this is easy to do using simple CSS3, just stack up the shadows to make them more intense. Might be a better solution somewhere, but this works well and is easy to do. Also, if you use Less/Stylus you can make a function out of it to control text shadow intensity even better.

.blur { color: black; text-shadow: 0 0 5pt black, 0 0 10pt black, 0 0 15pt black; }

As for the blurred background, I see another answer has already solved that :)