CSS Help: Blurred Background behind Category/Topic Lists

[LilTrashPanda (Anna)]

Hello!

I’m currently building a forum that is intended to encompass multiple brands; each brand has a very specific color scheme, which can make it a bit difficult to go with a dark or light theme (one brand is great for the dark theme, but the other brand is much better suited to the light one).

To try and get around this (as I’m not sure how to do category-specific CSS styling yet), I wanted to attempt a more agnostic solution with doing a “blurry” background behind the category and topic lists, using:

-webkit-filter: blur

I’ve seen this used elsewhere (quick example):

…And I got pretty close to it working, but need a few extra pointers to getting the blur behind the list instead of in front of them (see my attempt below where I’ve applied the filter to the Categories list but not the Topics list):

Here’s the current CSS I’m using as well (please note that the base of the CSS is to add a shadow behind the list of topics… I Frankenstein things a lot):

//add shadow behind the list of topics, but not categories
.topic-list{
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  background-color: rgba(34, 34, 34, 0.95);
  border-collapse: collapse;
}
.category-list{
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  background-color: rgba(34, 34, 34, 0.95);
  border-collapse: collapse;
  -webkit-filter: blur(10px);
}

Any help would be super appreciated; thanks!

[Falco]

For blurred backgrounds you can use:

body::after {
    content: "";
    background-size: cover;
    background-image: url(imageurl);
    opacity: 0.3;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    filter: blur(10px);
}

[LilTrashPanda (Anna)]

@LilTrashPanda

-webkit-filter: blur(10px)

Sorry, my photo example wasn’t very helpful; I’ve found a better one that explains what I’m looking for:

What I’d like to achieve is that only the background of the category-list or the topic-list is blurred and the text and everything else “on top” is not affected by the blur. Imagine, for example, if the blurred area in the photo was like the topic-list and could scroll up and down, but would only blur out the background behind the topic-list (and for that matter, not on the sides; you’d be able to see the background clearly there).

Here are links to a couple other examples; there’s CSS included in these, but I just can’t wrap my head around it (and I’m sure my explanation is a bit convoluted as well):

• Frosting Glass with CSS Filters | CSS-Tricks - CSS-Tricks
• http://jsfiddle.net/peterbenoit/EppdS/
• blurred glass | CSSDeck (pretty close to what I’m attempting, just imagine wherever those bars go have a blurred background, but it’s only behind the bar)
• http://www.webdirections.org/demos/translucency/index.html (the best one I can find that replicates what I’m attempting, found the write-up here: Creating iOS 7 effects with CSS3: translucency and transparency - Web Directions)

And to be honest, the more I investigate, the more it seems like I’d need to delve into HTML to achieve this affect or have duplicate images (a clear one and a blurred one), and it may not be supported across all browsers. Nonetheless, if there’s a solution to this, I’d love to give it a go!

[barryvan (Barry van Oudtshoorn)]

There are ways to do this in a cross-browser fashion, but they’re generally quite hacky and rely on multiple images and/or elements. Safari supports a backdrop-filter property (prefixed with -webkit-) – but that’s only on Safari, so no dice for Firefox, Chrome, Edge, etc.

If you want to be cross-browser, and don’t want to have to delve into multiple images/elements and lots of JS running on scroll (which will often result in “janky” behaviour and visuals), you really have two choices: blur the whole image, or, well don’t blur the whole image.

If you do blur the whole image (which I’d recommend to aid legibility), it’s often a good idea to do this in the image itself, rather than using CSS – blurred images compress down better than highly-detailed images in JPEG, and you can also use a smaller image and scale it up without compromising on the look.

[LilTrashPanda (Anna)]

Oof, yeah. Thanks for the confirmation!

On the note of adding the blur to the background image, do you know if there’s a way to always align the blur to appear behind the main row? I gave that a shot, but due to different screen resolutions and whatnot, sometimes the blurred area appears too far to the right or left. Since the background image and the foreground elements seem to be separate, gonna guess that the answer is “nope”, but doesn’t hurt to ask.

Thanks again, everyone, for your assistance and input!

[terraboss (Markus)]

@LilTrashPanda

-webkit-filter: blur

I‘m currently trying to replace the white title bar (.d-header) with a blured one. Unfortunately, my code snippet is also bluring all the buttons and text elements. How can I do it the right way?

.d-header{
    background: none;
    box-shadow: none;
    filter: blur(10px);
}

Thanks in advance!