jquery dense text shadow and blurred background color

Question

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

multiple shadows cover it a bit though. but the problem is I think old browser compatibility issue. and jQuery covers it. thats why wanting a jQuery way.
Simple background transparency is easy and simple in css, but making the background color also with a transparent and blurry effect so that the picture (or anything) at the back most is not clearly visible

Important:

I need cross browser compatibility and support for some old browsers, so thats why I choosed jQuery over css

May be just like in windows 7 title bar?

I saw both of the above in the past but unfortunately I cant remember where.

If anyone knows a way or demo, I will be grateful.

Note: I do NOT want the css based background or text shadow. sample text shadow that i found a bit close to what i want. its minimum dense though of what i wanted.

enter image description here

I know you don't want text-shadow, but this works alright: `.blur { color: black; text-shadow: 0 0 15px rgba(0,0,0,1); }` — Kirk Backus, Jul 25 '13 at 22:23
no no. this has css limits on shadow intensity. thats what my problem is — Masood Ahmad, Jul 25 '13 at 22:31
[You can apply multiple text-shadows](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow). — André Dion, Jul 25 '13 at 22:59
I'd skip the "old browsers": just build for the new ones with CSS3, it's not often that you've got time working on your side. Otherwise, in 2-3 years, you're going to have old useless code that you'll have to remove. — frenchie, Jul 26 '13 at 01:55
I think you are missing the point, jQuery uses CSS to do such things. So if an old browser doesn't support a specific feature in CSS, jQuery probably won't have a way around it. — putvande, Jul 27 '13 at 16:59

score 1 · Accepted Answer · edited May 23 '17 at 11:49

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.

As far as IE goes, it likely won't work for <= IE9, but give it a try! — Kirk Backus, Jul 26 '13 at 14:00
yes. thanks for the nice answer, some answers already stated it. but the main problem I have is the blur div one now — Masood Ahmad, Jul 26 '13 at 15:24
Plus one for nice answer but it has some problem . thats actually the one i took the image from :) earlier. http://blurjs.com/simpledemo.html — Masood Ahmad, Jul 27 '13 at 16:34

score 0 · Answer 2 · answered Jul 25 '13 at 22:56

0

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.

answered Jul 25 '13 at 22:56

Brian

7,394
3
25
46

here is a question about support for other browsers: http://stackoverflow.com/questions/15803122/filter-blur1px-doesnt-work-in-firefox-ie-and-opera – e382df99a7950919789725ceeec126 Jul 27 '13 at 16:49

score 0 · Answer 3 · answered Jul 25 '13 at 22:57

0

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 :)

answered Jul 25 '13 at 22:57

Michael Johansen

4,688
5
29
47

very true, but the problem is I think old browser compatibility issue. and jQuery covers it. thats why wanting a jQuery way. – Masood Ahmad Jul 26 '13 at 01:05

jquery dense text shadow and blurred background color

3 Answers3

Linked