I actually just made a comment explaining how I managed to get a CSS gradient in the background and not just the margins, but I’m still not quite where I want to be. I’m working on a vertical display board for the side of my fridge instead of a mirror, and it would be absolutely killer to have a slowly scrolling gradient, like the ones generated here and here (along with, I’m sure, a ton of other places!).
My issue is though, while I can generate a static gradient that looks nice enough, I cannot for the life of me get it to animate. I have no idea why. Is this type of CSS animation just not doable in the MM framework, do I have to put it in its own <div> or something? I have no idea.
Here’s the relevant part of my custom.css file:
.region.fullscreen.below {
background: linear-gradient(208deg, #235182, #196586);
-webkit-animation: gradient 30s ease infinite;
animation: gradient 30s ease infinite;
@-webkit-keyframes gradient {
0%{background-position:25% 0%}
50%{background-position:76% 100%}
100%{background-position:25% 0%}
}
@keyframes gradient {
0%{background-position:25% 0%}
50%{background-position:76% 100%}
100%{background-position:25% 0%}
}
}
I’m not entirely sure what they do or what they’re called, but I’ve tried this with the @keyframes part inside and outside the .region element, above and below. Still nothing. :shruggie:
If it’s possible, it seems like it’d be super cool. Maybe I could try and put it in a module based on the MMM-ProfilePicture module that I’ve been using until recently?
Sorry if this is a dumb and obvious question, and also thanks!
