- Many are completely broken in FF
- Crashed my FF (19.0.2) and strangely sent my GPU fan into overdrive
- These techniques hurt performance badly. In the case of gradients
the browser has to first generate the bitmaps
from the gradient definitions, apply any clipping/masks
and then composite any other overlaying elements.
This is far more taxing than simply grabbing a
bitmap and painting into a region.Neat that it's done with CSS3, not practical for any real purpose though.
[1] http://subtlepatterns.com/
EDIT: Or at least it seems. Maybe rendering as much details in the background with CSS is worse than just displaying repetitively a simple png.
Some numbers:
The one with hearts is 944 bytes (css file), 232 bytes gzipped (with 7zip), 304 bytes as gif (Photoshop. Can be smaller with hand optimizations. Need extra css code to tile as bg)
Just a tech demo IMO.
1. Give a content block a raster background with a pattern including lots of pixel-perfect high-contrast edges (precisely the thing there are lots of in these demos!)
2. Visit the page on a mobile device, and tap to fit.
3. Horrible antialiasing ensues. (Not to mention what happens when you zoom in further.)
"CSS (vector) backgrounds" do have their use, and it's pretty much the same use as "vector icons"/"icon fonts" have: making things that look good at arbitrary scale+DPI.
Did you measure the compressed size on its own or as a delta inside a larger CSS file? The pattern is going to share at least a part of its dictionary with the rest of the CSS file if sent deflated.
I prefer these http://subtlepatterns.com/ ...I know they are just png, but works and look better.
With a definition such as:
- radial-gradient(closest-side, transparent 0%, transparent 75%, #...
Then there is the issue of dynamic CSS which may cause reflow which will in turn probably require more dynamic bitmap generation.