This is sort of a quirky but interesting style I made a couple days ago.  All it does is make the background of dA fuzzy, darker, and less saturated whenever you get one of those message modals (the window in the middle of the page with the light green background).

/* the geeky bits */

---

I'm submitting this mostly since I think it's a good way to develop a webpage modal that blurs the background.  I've researched how to do this before (for way too many hours…), but most involve only adding a text shadow to the text or using images.  I saw one once that used the -moz-element(); background, but then they used some JavaScript to offset multiple copies of that and change the opacity.  Needless to say, all of that doesn't do the simple task of taking the background div and making all the things behind it blurry

But thanks to the CSS3 filter property, you're now able to rather easily blur things without needing an image of what you're blurring (which often changes) and to manually blur it yourself.  And by using -prefix-element(); background value, you can easily copy elements of things already on the page (ID selectors) and slap them into another element.

The only caveats, it seems, is that (at least in Firefox) you get some banding with the blur, and the edges don't exactly fall off well, at least for my intentions.

---

But it's sorta cool, and I was happy when I discovered this combination of CSS properties to do what I had wanted to do years ago but couldn't.  Feel more than free to take any of the CSS and use it on your site, or styles, or scripts, or whatever.  Also note, I inserted the SVG filter as a UTF-8 text string (it's usually added to the page its self, not built into the style).  This way it's easy for you to adjust the numbers and things to modify it.

To install:

Stylish for Firefox required.
Install here: userstyles.org/styles/107512/f…
You can see the full CSS here (built for Firefox—I wasn't able to test this in Chrome's Stylish, since I really just don't understand how building a style for it works And I'm not even sure Chrome allows for SVG filter values):



@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("deviantart.com"), domain("sta.sh") {

div#modalfade {
    background:-moz-element(#deviantART-v7)!important;
/*    background:-webkit-element(#deviantART-v7)!important; --- for chrome */
    filter:url("data:image/svg+xml;UTF8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='4'/><feColorMatrix type='saturate' values='.08'/><feComponentTransfer><feFuncR type='linear' slope='.09'/><feFuncG type='linear' slope='.092'/><feFuncB type='linear' slope='.08'/></feComponentTransfer></filter></svg>#blur")!important;
/*    filter:blur(3px) brightness(.1) grayscale(.8); --- for chrome, if it doesn't do SVG filters. needs testing and adjusting */
    position:absolute!important;
    opacity:1!important;
    box-shadow:0px 0px 15px 10px rgba(0,0,0,.2) inset, 0px 0px 5px 10px rgba(0,0,0,1)!important;
}
}