CODEWITHSUNDEEP
javascriptjquery
Masood Ahmad
Masood Ahmad

Reputation: 741

jquery dense text shadow and blurred background color

  1. 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.

  2. 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

enter image description here

enter image description here

enter image description here

Upvotes: 2

Views: 1996

Answers (3)

Kirk Backus
Kirk Backus

Reputation: 4866

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.

Upvotes: 1

Michael Johansen
Michael Johansen

Reputation: 5096

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

Upvotes: 0

Brian
Brian

Reputation: 7654

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.

Upvotes: 0

Related Questions