Seeking best approach to styling dynamic CSS content
I'm designing a website in Webflow. The site has card elements that each have assigned colors that correspond to their "rating". The current colors, however, aren't color-blind friendly.
I'd like to add patterns to each card to fix this: zig-zags, Xs, Os, things like that, such that the texture can provide some context.
I'd like to code this in CSS using gradient patterns, but I'm not clear on the best approach to accomplish this other than creating the illustrations and loading those in. My hunch is to do something like
But I suspect that this is incorrect for a number of reasons.
5 Replies
I wish we could do that... Though we do have style queries that would work very much like that, afaik browser support is spotty atm
How are the backgrounds being applied right now? Like, what would be applying those colors your specifying in your example?
As it's through Webflow, the color is being applied via the CMS. The styles then propagate out onto each card from there.
I could (and, likely, will have to) upload the patterns in the CMS and then style them. Although my concern is that adding more assets to the site would affect performance compared to just coding them in with css. (However, this site has around 75-80 for mobile performance on pagespeed. I suspect I should be fine, especially if it makes the site more accessible).
If you inspect the page, you should be able to see what we flow is doing, and maybe hook into that
Will circle back on this later today
I’m thinking my best bet in this case might be to have the images in the CMS
Here are two takes on the solution I came up with: I'm not sure if I should go with either the higher or lower opacity patterns.
