need to improve performance...
CSS3 Patterns Gallery
11–20 of 39 posts
Re: CSS3 Patterns Gallery
#12As a technical demo they're great. In practice though, I wouldn't recommend using these techniques because: - 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 overlayi…
Agree, they're great for mockups though as it's really easy to change the colours rapidly. Also good for doing things like animation of gradients.
Re: CSS3 Patterns Gallery
#13Nice, but oh my poor Firefox. What's wrong with images as bg?
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.
Re: CSS3 Patterns Gallery
#14"amazing"? These look terrible and would make any website look like a throwback from Geocities.
Neat that it's done with CSS3, not practical for any real purpose though.
Re: CSS3 Patterns Gallery
#15Is it trivial to animate these? For example how easy would it be to have one of the rainbow-bokeh bubbles slowly move upward ?
Yes, it would be trivial. In most cases though (including your example) you could achieve the same effect by simply animating a 32-bit PNG.
Re: CSS3 Patterns Gallery
#16"amazing"? These look terrible and would make any website look like a throwback from Geocities. Neat that it's done with CSS3, not practical for any real purpose though.
Notice how the site uses a png noise image as background and none of the css3 backgrounds.
Re: CSS3 Patterns Gallery
#17"amazing"? These look terrible and would make any website look like a throwback from Geocities. Neat that it's done with CSS3, not practical for any real purpose though.
I can see this being used: http://lea.verou.me/css3patterns/#lined-paper
Re: CSS3 Patterns Gallery
#18Nice, but oh my poor Firefox. What's wrong with images as bg? 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.
> What's wrong with images as bg?
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.
Re: CSS3 Patterns Gallery
#19I do not like theese backgrounds, some of them really hurt my eyes.
I prefer these http://subtlepatterns.com/ ...I know they are just png, but works and look better.
Re: CSS3 Patterns Gallery
#20Nice, but oh my poor Firefox. What's wrong with images as bg? 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.
"The one with hearts is 944 bytes (css file), 232 bytes gzipped (with 7zip)"
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.