“Bokeh” play with pure CSS gradients
It never ceases to amaze me what people can do with pure CSS. My buddy James pointed me to these lovely CSS experiments made by Román Cortés. The newly released Firefox 3.6, with its much longed-for and refined CSS gradient syntax, opens up even more possibilities.
Gradients of course have been around for a while now, but available only in WebKit browsers, using WebKit’s own, slightly more verbose syntax. I played around with radial gradients and managed to create a “bokeh” style effect with a flurry of absolutely positioned elements styled with radial gradient backgrounds. View the CSS gradient demo.
This particular page works in FF3.6 only (I was feeling lazy). It’s worth noting that instead of the reusable CSS classes used to apply the gradients, I could have stacked multiple gradients onto a single background-image declaration. Which means the same example could have been created on a single element with multiple, differently-positioned radial gradients. So obviously this is just one way of doing things – in either case you still have to juggle loads of positioning values.
A couple of gripes: firstly, because gradients are effectively a background (or border) image property, their values don’t seem to be available for DOM manipulation. Imagine the fun of being able to transition color stops! I’m sure someone more clever than me will figure out how to get at the color and color stop values and tweak them. Secondly, I imagined being able to create perfectly circular objects with gradients by creating really tight color stops. Unfortunately this seems to create rather jagged edges, at least for me.
I really think SVG, CSS gradients and rounded corners are going to change the way front-end developers designers work. We can slowly start saying goodbye to the wretched work of slicing and dicing tiny GIFs and PNGs!
That looks more like flare than bokeh???
LOL, fair point! I was inspired by some of these: http://www.inspiks.com/brilliant-bokeh-wallpapers/