Multiple Backgrounds: SVG pattern fade + CSS3 Gradient

[maskedwallaby]

Basically, I am trying to do this…

http://i5.photobucket.com/albums/y153/MaskedWallaby/pattern-home-02.jpg

in the most efficient way possible.

(Having a two borders to a photo, both of which fade in from 0% opacity, using both a color and a pattern)

I’m trying to figure out the most effective way of implementing this in my client’s website. I’ve considered a few different methods:

• Just an image overlay for the pattern/color (results in a large PNG; 153Kb after ImageAlpha/ImageOptim)
• Use a faded-edge photo in the center (not ideal; client will be able to upload new photos via WordPress posts and is not a Photoshop user)
• Multiple Backgrounds: one SVG for the pattern, one css3 gradient (But I don’t know how to fade an SVG pattern to 0% opacity)
• Use CSS image masking to fade the edges of the photo in the center (This would be an elegantly simple solution if only IE had any support for it whatsoever)
• Use an SVG blur filter of some sort on the pattern in combination with the css3 gradient (I’ve never messed with SVG effects so I honestly don’t know how effective this would be)

Can anyone offer any advice?

[maskedwallaby]

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

[Shikkediel]

I’d go for a stacked background – svg with a CSS gradient on top…

how to fade an SVG pattern to 0% opacity

Why would you need to set opacity on the svg pattern (or blur it) though?

[maskedwallaby]

If the gradient is on top, it’s just going to cover the SVG pattern, no? The reason I’d like to fade the SVG is so that the pattern doesn’t suddenly stop at the edge of the :before element. I want it to fade into the image.

For now I’m using a couple of PNGs laid atop the image with a @2x retina version in a media query. I don’t like how the pattern edges fail to line up on either side of the image, but the size is less than using my complicated SVG pattern.

[Shikkediel]

I didn’t read anything about a pseudo element… so I guess only seeing the underlying code could give rise to a reasonable reply on that.

[Casey Jacobson]

“Multiple Backgrounds: one SVG for the pattern, one css3 gradient (But I don’t know how to fade an SVG pattern to 0% opacity)”

The svg won’t fade to 0 opacity. The css gradient, with the same color as your background, will just cover it up.

[Author]

Posts