Whenever I sit down to do a website, I want to make it look good. I have a strong grasp on white space, design concepts, CSS, HTML and graphics design in general. But one thing I am not, is an artist.

With today's modern websites, lots of shadows and gradients are needed at different sizes and colours. I get fed up constantly tweaking my graphical layers and exporting - after listening to Ken Treis's success using CairoGraphics as a backend PNG generator for his Seaside websites, I decided to hook CairoGraphics in as a WAFileLibrary subclass.

You can load up Seaside-CairoGraphics which prereqs in Seaside and CairoGraphics. You'll need the CairoGraphics libraries setup on your machine for this to work. You then subclass CairoGraphicsLibrary which is a subclass of WAFileLibrary.

Your subclass can now generate (and cache) PNGs from Smalltalk code using a CairoGraphics render context. You set up resources like so:

headerShadow: cr
	<resource: 'afterHeader.png' width: 800 height: 16>
	<scale>
	cr source:
		((RadialGradient from: 0.5@0 radius: 0 to: 0.5@0 radius: 0.5)
			addStopAt: 0 colorValue: (ColorValue hex: 16r777777);
			addStopAt: 1 colorValue: ColorValue white;
			yourself).
	cr paint

This generate a nice shadow radial gradient as an 'under a visual lip' effect. Notice the pragmas. The first pragma <resource> tells us that we can be read from the internet and what the images extent will be - in this case 800x16.

The second pragma is special, <scale> will automatically scale the cairo context by the specified width@height so that your rendering area is between 0@0 .. 1@1 - this is quite common for many kinds of gradients and it means you don't have to hard code the width/height in to your rendering code. This <scale> pragma is optional.

You can also load up Pango from public store and use it with this library too to render high quality blended fonts.

The caching mechanism will keep the PNGs it generates in memory as bytes and release when you modify any method on your class.