CSS3 Patterns Gallery

#1

Post by Chairmonkey » Tue, Mar 12, 2013, 9:42 AM UTC

Re: CSS3 Patterns Gallery

#2

Post by degenerate » Tue, Mar 12, 2013, 10:59 AM UTC

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

Re: CSS3 Patterns Gallery

#3

Post by deanclatworthy » Tue, Mar 12, 2013, 11:21 AM UTC

These look great, but performance is really poor.

Re: CSS3 Patterns Gallery

#4

Post by tokenizer » Tue, Mar 12, 2013, 11:33 AM UTC

deanclatworthy wrote: post #3

These look great, but performance is really poor.

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

Re: CSS3 Patterns Gallery

#5

Post by flexie » Tue, Mar 12, 2013, 11:36 AM UTC

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

Re: CSS3 Patterns Gallery

#6

Post by retube » Tue, Mar 12, 2013, 11:37 AM UTC

flexie wrote: post #5

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

Yup - just blocks of color for me :)

Re: CSS3 Patterns Gallery

#7

Post by ux-app » Tue, Mar 12, 2013, 11:37 AM UTC

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.

Re: CSS3 Patterns Gallery

#8

Post by dave_sid » Tue, Mar 12, 2013, 11:44 AM UTC

not working for me with css supplied.

Re: CSS3 Patterns Gallery

#9

Post by ux-app » Tue, Mar 12, 2013, 11:45 AM UTC

tokenizer wrote: post #4

deanclatworthy wrote: post #3

These look great, but performance is really poor.

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

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.

Re: CSS3 Patterns Gallery

#10

Post by rimantas » Tue, Mar 12, 2013, 11:53 AM UTC

ux-app wrote: post #9

tokenizer wrote: post #4

Earlier quoted context omitted.

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

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 cor…

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.