
CSS3 Patterns Gallery - Chairmonkey
http://lea.verou.me/css3patterns/
======
ux-app
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
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
"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
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
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.

~~~
saturdayplace
I acknowledge the performance issues. I was responding, however, to a comment
about what these make the site look like.

------
scotch_drinker
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
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
This site completely borked by firefox. Had to close and restart my browser to
get out of it.

------
degenerate
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
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
A lot of these look great :-) If only they worked in IE 7, 8 and 9 they could
be used in real projects...

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

------
__herson__
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
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
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
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
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
These look great, but performance is really poor.

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

~~~
ux-app
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.

~~~
rimantas
One interesting thing is done while building iOS app: png images are reencoded
to make them more efficient. What is done, that alpha value is premultiplied,
but the more interesting thins is that bytes are rearranged from RGB to BGR .
This is done to match the layout of the iPhone display, so mapping from image
is even faster.

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

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

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

------
zhangtai
It looks good, until you apply to background.

------
slapresta
Why exploiting CSS3 when SVG will do?

------
dave_sid
not working for me with css supplied.

------
vicky_rockstar
need to improve performance...

