CSS3 Patterns Gallery

by Chairmonkeyon 3/12/2013, 9:42:28 AM with 19 comments
  • by ux-appon 3/12/2013, 11:37:59 AM

    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.

  • by sergiotapiaon 3/12/2013, 12:39:01 PM

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

  • by scotch_drinkeron 3/12/2013, 3:09:05 PM

    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.

  • by gokhanon 3/12/2013, 12:18:02 PM

    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.

  • by degenerateon 3/12/2013, 10:59:24 AM

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

  • by flexieon 3/12/2013, 11:36:55 AM

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

  • by __herson__on 3/12/2013, 1:16:33 PM

    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.

  • by mnicoleon 3/12/2013, 3:33:09 PM

    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.

  • by omegoteon 3/12/2013, 3:01:13 PM

    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.

  • by mtgxon 3/12/2013, 4:08:30 PM

    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.

  • by planetjoneson 3/12/2013, 3:03:18 PM

    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.

  • by deanclatworthyon 3/12/2013, 11:21:52 AM

    These look great, but performance is really poor.

  • by pacomerhon 3/12/2013, 3:06:29 PM

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

  • by nodataon 3/12/2013, 1:51:23 PM

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

  • by lttlrckon 3/12/2013, 3:50:21 PM

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

  • by zhangtaion 3/12/2013, 2:23:17 PM

    It looks good, until you apply to background.

  • by slaprestaon 3/12/2013, 3:01:11 PM

    Why exploiting CSS3 when SVG will do?

  • by dave_sidon 3/12/2013, 11:44:56 AM

    not working for me with css supplied.

  • by vicky_rockstaron 3/12/2013, 12:03:00 PM

    need to improve performance...