Home › Forums › CSS › Multiple Backgrounds: SVG pattern fade + CSS3 Gradient › Reply To: Multiple Backgrounds: SVG pattern fade + CSS3 Gradient
April 9, 2015 at 1:00 pm
#200084
maskedwallaby
Participant
I found this page on SVG masking and gradients and got excited: http://tutorials.jenkov.com/svg/mask.html
Current issues, though:
- The examples in this article use simple SVG objects like rectangles and circles for their masks. I’m not sure how to turn my leaf into a useable SVG mask.
- Just looking back at my files, even the leaf pattern SVG is 246 KB. Maybe it isn’t worthwhile to try to do this.
Sure, using an SVG pattern+gradient will result in a nicer-looking end result (will go edge-to-edge rather than the hard edge I’ll get from my PNG). But I don’t want to tax my users’ bandwidth.
I haven’t really considered what this will look like in mobile, but I expect to eschew the gradient/pattern altogether.
Opinions still appreciated,
Chris