CSS3 Patterns Gallery

84 points by Chairmonkey 13 years ago | 37 comments

ux-app 13 years ago |

As 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 overlaying elements. 
    This is far more taxing than simply grabbing a 
    bitmap and painting into a region.

dan15 13 years ago | |

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.

sergiotapia 13 years ago |

"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.

saturdayplace 13 years ago | |

All it'd take to make most of these usable is finessing the colors a bit so they don't jump off the page like they do here. It's definitely possible to make the patterns more subtle while retaining the shape effects. I viewed the page as a nifty demonstration of CSS-based patterns. Actually implementing the appropriate colors with these is left as an exercise for the reader.

knieveltech 13 years ago | | |

According to my laptop's cooling fan color palette is the least of the issues here. I'm pretty sure that roasting your users' CPUs to render a background texture is considered poor form.

hmottestad 13 years ago | |

Notice how the site uses a png noise image as background and none of the css3 backgrounds.

baby 13 years ago | |

Most are bad yes, but what if you could successfully replace one of those[1] in CSS. That would be a very good optimization hack.

[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.

manojlds 13 years ago | |

I can see this being used: http://lea.verou.me/css3patterns/#lined-paper

inafield 13 years ago | |

I agree that they look terrible. It felt like I was thrown back to Windows 3.1 and Windows 95 tiled backgrounds. Trippy.

scotch_drinker 13 years ago |

To me, these are amazing in the same way fingernails on chalkboard are amazing. Every time someone nicked the chalkboard with their fingernail in school, I felt as if someone was ripping my spine out. And every time I clicked one of those circles, I felt like someone was ripping my eyes out.

gokhan 13 years ago |

Nice, 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.

jstalin 13 years ago | |

This site completely borked by firefox. Had to close and restart my browser to get out of it.

derefr 13 years ago | |

> 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.

gngeal 13 years ago | |

"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.

degenerate 13 years ago |

Is it trivial to animate these? For example how easy would it be to have one of the rainbow-bokeh bubbles slowly move upward ?

davej 13 years ago | |

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.

flexie 13 years ago |

A lot of these look great :-) If only they worked in IE 7, 8 and 9 they could be used in real projects...

sil3ntmac 13 years ago | |

I guess gmail isn't a "real project" then...

retube 13 years ago | |

Yup - just blocks of color for me :)

__herson__ 13 years ago |

I 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.

mnicole 13 years ago |

Calm down, guys. As stated on her site, these are purely experimental. This page has also been up for a few years at this point.

omegote 13 years ago |

They look like crap (not only the color, but also the jagged edges), the performance is also crap... I don't know, sometimes I think these hipster web devs are getting too much attention nowadays for things that aren't that complicated or innovative in comparison to, say, many things c++ programmers face on daily basis.

mtgx 13 years ago |

Only IE+? No doubt because IE is so ridiculous behind the other browsers in HTML5 support. I can't believe even Firefox 3.6 which was released in like 2010 had proper support for CSS3 that only IE10 has now, from all the IE versions.

planetjones 13 years ago |

Bad performance and support only for IE10+ will put these out of consideration for many. I think the real world appeal of these will be limited to say the least.

deanclatworthy 13 years ago |

These look great, but performance is really poor.

tokenizer 13 years ago | |

Could you explain this? I'd figure the performance would be greater than using an repeating image for a background.

ux-app 13 years ago | | |

Performance is far worse because this is the equivalent of a procedural texture. With a tiling bitmap the computer simply fetches the file, then paints the pixels into a region.

With a definition such as:

  - radial-gradient(closest-side, transparent 0%, transparent 75%, #...

The browser first parses the CSS, then generates the actual bitmap data for this definition in memory then finally paints the pixels into the correct places. The in-memory bitmap generation is far more taxing than simply tiling an existing bitmap.

Then there is the issue of dynamic CSS which may cause reflow which will in turn probably require more dynamic bitmap generation.

pacomerh 13 years ago |

Good as an experiment, but I honestly wouldn't use any of these backgrounds.

nodata 13 years ago |

Nice. Please make the Escape key work to close the pattern popup!

lttlrck 13 years ago |

Real tartan doesn't have diagonal lines like that. Sorry :)

zhangtai 13 years ago |

It looks good, until you apply to background.

slapresta 13 years ago |

Why exploiting CSS3 when SVG will do?

dave_sid 13 years ago |

not working for me with css supplied.

vicky_rockstar 13 years ago |

need to improve performance...

- 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.