More css I can't do - adding blur

[arrbee99 1712]

Me again. Have css coming out of my ears trying to get blur, well more blur and darkening to work where I want it.

It seems that these two narrow lists are the same thing on different pages (Collections and TV Guide in this case) -

 

            

 

and these two options are the same on different pages

 

would anyone know how to separate the css for them so I can apply different effects (mostly make one darker than the other) to them ?

My latest attempt at css (if I've copied the right bit) is

div.formDialogContent:not{div.focuscontainer.dialog) {background-color: rgba(0, 0, 0, 0.4);}

Think that was aimed at the later (wide) images above

Got lots of other bits but I'm getting lost in it all...

 

 

 

[visproduction 280]

There are many different ways:
Blurred image on top and remove it:
Look up CSS animation to find ways to animate opacity on click, so you can fade out the blurred image and reveal the non-blurred image below.  That's easier to do in javascript, but possible with CSS using transition, :before, imput:checked + .someclass:before.  The trick is to pick what gets clicked to remove the blur and something else needs to be clicked to add the blur.  You can also use a click to change a class or div for a specific area.  Look up CSS animation toggle and CSS class change. See: https://stackoverflow.com/search?q=-ms-transform%3A+opacity+CSS

CSS blur is known to have performance issues and I think it may be more CPU intensive and slower: Look up CSS blur: example: https://stackoverflow.com/questions/31713468/css-blur-filter-performance

Finally an easier way which is very fast and easy on the CPU is to add a mask and give it opacity and color.  Then remove it.  The mask is just height, width, background-color,  border radius, and mabe a border, then animate the opacity to 0 to get rid of it.

Hope that helps.

Edited January 12, 2022 by visproduction

[arrbee99 1712]

Thanks for the info. You obviously know what you're talking about, which I sure don't. It was mostly trying to apply effects to only some of the things that seemed to use the same code. I think I've got more or less what I want though and posted it. At least its available and people can modify / go urrrgh as the fancy takes them.

[arrbee99 1712]

And now I see beta .20 has ruined my blur stuff, must have lasted about 3 days...

[arrbee99 1712]

Don't suppose anyone has any thoughts on how to fix up the blur that got broke.

I had stuff like this

/* Make WIDE list items e.g. Three Dots Menu, Filters, TV guide items transparent and blurry */

div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.opened {background-color: rgba(0, 0, 0, 0.3);}

div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.opened {backdrop-filter: saturate(1.8) blur(1.5em);}

but its like the first bit works but the backdrop-filter does nothing (unless it's nothing to do with that I suppose...)

[Happy2Play 9441]

18 hours ago, arrbee99 said:

Don't suppose anyone has any thoughts on how to fix up the blur that got broke.

I had stuff like this

/* Make WIDE list items e.g. Three Dots Menu, Filters, TV guide items transparent and blurry */

 

div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.opened {background-color: rgba(0, 0, 0, 0.3);}

 

div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.opened {backdrop-filter: saturate(1.8) blur(1.5em);}

 

but its like the first bit works but the backdrop-filter does nothing (unless it's nothing to do with that I suppose...)

May need more info as it works on the elements you have applied

 

 

 

 

[arrbee99 1712]

Thats weird. Just occurred to try in Chrome, and it seems fine in Chrome but doesn't work in Firefox, but it used to work in Firefox, which I use 95% of the time...

Fine in Edge as well.

I could try going back to .19, but family are using Emby at the mo.

[arrbee99 1712]

looks like its a Firefox thing -

https://stackoverflow.com/questions/63789769/why-backdrop-filter-in-firefox-dont-work

Something to do with version 96.

[Happy2Play 9441]

11 minutes ago, arrbee99 said:

Thats weird. Just occurred to try in Chrome, and it seems fine in Chrome but doesn't work in Firefox, but it used to work in Firefox, which I use 95% of the time...

Fine in Edge as well.

I could try going back to .19, but family are using Emby at the mo.

Will do some research but FireFox shows "invalid property name"

 

[arrbee99 1712]

and -

https://bugzilla.mozilla.org/show_bug.cgi?id=1749625

I saw that Invalid Property Name. Surprisingly, didn't know what it meant

Edit - and this -

https://bugzilla.mozilla.org/show_bug.cgi?id=1741779

Edited January 15, 2022 by arrbee99

[Happy2Play 9441]

Note applying the about:config options shown in stackoverflow topic removes the error but is not applied.

[arrbee99 1712]

Slightly interesting is when I click on say Filter in Emby the Filter item appears with a nice blurry background nice and smoothly, whereas in Chrome it judders into view.

[arrbee99 1712]

I guess I just have to be patient and hope it reappears then ?...

[Luke 40065]

Firefox does not support the blur at all unless you active the experimental flag in browser options.

[arrbee99 1712]

True, but I had / have them enabled, thats were I got the images in the first post from, except now its disappeared, temporarily I hope.

[visproduction 280]

Arrbee,

You might be experiencing cache issues.  Firefox may start showing the blur feature when you adjust the setting, but if it sees a page that was previously cached, then it may serve that copy of the page before the blur feature started to work.  I hope that makes sense.  Try clearing the Firefox cache.

[arrbee99 1712]

Thanks. I've tried that, but I also came across this -

https://bugzilla.mozilla.org/show_bug.cgi?id=1741779

so seems its just a Firefox thing, temporary for who knows how long...

[visproduction 280]

Arrbee,  I think for E-Commerce online this type of effect is probably often made with a second blurred image that matches the background image below it.  Then some click removes the blurred copy image, if needed.  That should work for all browsers.  In Emby's case, doing it all only from tweaking the CSS means adding the image to :before and then assigning a click on the same blurred background to remove it.  You can do that in pure CSS.  But finding a way to click something else and causing a different class to remove an image, seems like you need .js to do that.  If you wanted to click some link or button and blur goes away.  The challenge is you are clicking one CSS element and trying to affect a different CSS element.  Hmmmm.  I don't know how to do that in pure CSS.  Does someone reading this know a way to make that happen?  The normal way would be to add a.js event in a function, but that would mean you need to customize the .js or create your own custom .js and load on every page.  Otherwise, tweaking any .js on your server will probably disappear with the next server upgrade.

Adding your own custom .js is a little extreme.  I have not seen anyone even talk about doing that.  You easily get into a lot of trouble with conflicting .js names and functions.  It would be messy, which is certainly why the customizing is limited to the css file in settings.

On the Firefox not working unless you change a setting... What about trying to make a swirl effect graphics with a some pastle colors like chalk type paintshop swirls?  Then make it opacity:0.8; or so. I would make the swirl graphic large and fade and blur the colors a little. Do not reduce it to fit any box, rather adjust the crop for X and Y position.  That way all your blurred areas will have the same affect inside different box areas and you can CSS push the X and Y around, so each box looks different.  If you let the box size auto change size to fit, then the effect will change too much.   This would allow the image below to show through and color swirls would immatate a type of blur.  You may want to pick colors that match your other theme color choices.  Firefox should be able to show that without any settings change. I would also limit the large master image to something under about 200K.  It doesn't need to be that huge.  Photoshop people tend to make their images that have to be 30 MB because of the quality.  That's silly.

I hope that makes sense.  I am confused, if I read it again.  Ha!

Edited January 31, 2022 by visproduction

[arrbee99 1712]

Thanks. I think I understood, well a fair bit of that. Doesn't mean I could actually do any of it though. Hopefully I'll try over the weekend, but most of its just guess work / give it a go stuff...

[visproduction 280]

Here is an example background that you can add to the boxes and give it an opacity:0.4; to start.  The problem becomes that if you include the background in the box div, then the box also gets the transparency.  You would have to create a new div class inside all the boxes, which is an edit to the DOM and not possible... Or if this doesn't work, then make a png or gif with transparency areas.  In that case, you probably want to have a much more subtle background image with just faint color.  You can also cause a background to have a transparent color by using RGB color and a 4th parameter for the opacity.  You can also do a fade between different RGB colors and add an opacity.  Then only the background would get the opacity change and not the whole box.  All these options should work immediately on all browsers.

Rather than auto fit this same image in all boxes, do a X, Y crop of some part of the image that fits the boxes.  That way the one image can do mulitple boxes and have different color areas with the same quality no matter the box size.