Hadashboard V2 Css frosted widget effect

Third party integrations HADashboard
1

Hi I’m using Hadashboard V2 now and i love it. Big thanks to the developers and contributors.!
I am experimenting a little bit with creating a frosted widget effect like this. It mostly depends on the blur filter value. But i tried using blur in different places in my skin and dash file, but it blurs the whole widget(including text and icon) and not just the background of the widget.

Maybe someone can tell me if it is not possible or that it requires to split the widget up or something? Or that i need to do something else of course :slight_smile:

2

Try using a pseudo selector like .widget:after and apply the effect there.

3

Thanks for the fast respond. I now tried using after and before and that isn’t changing anything. But when i use .widget:hover it does the blur effect. Unfortunately it again blurs the whole widget and not the background.

4

I’m in the middle of a config issue at the moment, but I’ll take a look and see what I can come up with based on the source you listed.

5

oké thanks that would be awesome. Good luck!

6

OK, this one was hard because of the way that Dash does CSS, but I came up with a close approximation of the effect:

I’d like to release it as a skin and give you credit for the inspiration. What do you think? The reload widget shows the action when a widget is hovered.

1 Like
7

Here it is as a Winter theme. I could do one for each season.

3 Likes
8

Yeah that’s indeed real close. i’m okay with you releasing the skin. I’m quite curious how you managed to get it that close :slight_smile: Winter theme is looking nice as well. Great job!

1 Like
9

Here’s what I came up with:

.widget {
  padding: 0px 0px;
  text-align: center;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  background: hsla(33, 12%, 67%, 0.41);
  border: 2px groove gold;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  box-shadow: 5px 3px 30px black;
}

.widget:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -15;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0 / cover fixed;
  
  filter: blur(20px);
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
}

.widget:hover {
  background: hsla(40, 69%, 40%, 0.81);
}

Though after thinking about this awhile, it may have been easier to create a transparent gif or png with a blur filter in Photoshop and use that as an overlay. I may try that and see how it goes. I’ll let you know.

1 Like
10

Hey wanted to let you know that i made a little bit of progress with the skin.

I kind of cheated by enabling experimental-web-platform-features in chrome like explained here

This is the code:

.widget {
  padding: 0px 0px;
  text-align: center;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  background: hsla(0,0%,100%,.4);
  backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow: 2px 1px 2px black;
}

But there is still a problem with some flashing white lines especially when having an or multiple iframes on your dashboard. Or when you click an icon. I don’t know if we can do something about it or that the reason of this is happening because of the experimental part of the feature.

image.jpg976×608 149 KB

This is with blur at 30px:

3 Likes
11

I messed around with the blur effect as well and also saw the flashing white lines in Chrome while scrolling. Unfortunately it doesn’t look like it’s scheduled to be available in Chrome outside of an experimental feature for at least the next several versions based on the info [here] (http://caniuse.com/#feat=css-backdrop-filter). If you have Safari you might want to try it there. Safari has had full support for this filter for a while. I’m very interested in getting this effect working as well!

12

Your post here was the inspiration to try to make it in HAdashboard, because i really want to have my home-assistant to look like yours, but i don’t know what to change there.
So did you already try it in Safari?; is there also the flashing white lines?

13

I haven’t tried it in Safari yet, it’ll try it out and let you know how it looks. I reverted my styling unfortunately because i wasn’t happy with how it was working in Chrome. It could also be that some other CSS on the page is causing the issue. I’m glad that other people are interested it getting this to work because i think the blur effect looks awesome and really takes the UI to a new level.

14

i still haven’t tried in safari, but i just tried enabling the flag on my android phone and when i visit the dashboard i have the frosted effect and no more flickering lines :slight_smile:.

So it might just be that there is a bug in the desktop version of chrome. so i hope that it will get fixed soon, because i like this theme on desktop.

15

Nice! I never checked it on mobile but it’s awesome that it works without issues. If you want to make things even more frosty you can combine the blur with opacity like backdrop-filter: opacity(70%) blur(30px);

Man I really need to get HADashboard running!

16

Yes i know, i like it both can’t choose yet heheh. luckily we can have unlimited themes.:slight_smile: