The "photo album stuff" is not difficult. It's more-or-less a default installation of Gallery 2, integrated into WordPress via an iframe (no misbehaving plug-ins required). And the photos get into Gallery direct from iPhoto like this.

I was recommended your site after I pleaded for help on the K2 forum. I needed some advice on rounded CSS box corners and this chap sent me your links.

Just been fiddling for a few hours as it's all new to me and finally, after some unexpected issues, finally have it working.

I used your first example actually, but it works a treat for my purposes. So thanks very much for a great article and whilst I was here, I have been checking out your other stuff so much to read. It all looks great! :)

Especially liking the photo album stuff, but that looks a bit involved for me right now.

Thanks again, Graham

the Gravatars all

All? I only see yours on black (mine also uses alpha-transparency but is unaffected). I tried refreshing my Gravatar cache but yours is still black.

Update: No, you're right. Bugger.

I am trying to eliminate them now

Why is that David? Something against PNG or design reasons?

[quote post="809"]I don't actually know how well it works, as I haven't looked through a Windows machine running IE.

I just fired up Parallels (with multiple IEs as here) and checked out your site: the WebFX .htc file isn't working. I also installed it, and tried setting the full path to blank.gif but no go. I suspect that catch is "[blank.gif] should be placed in the same directory as the web page using the behavior". As it was developed during 2001-2004 I'm guessing it's only suited to sites with static HTML. I use an image-specific fix as here.

However, much as I have used transparent pngs in the past (full 24 bit gloriousness), I am trying to eliminate them now. Still, for the moment I have the pngbehaviour.htc file from here to make Explorer behave a bit better. (I don't actually know how well it works, as I haven't looked through a Windows machine running IE.)

My ie6.css file has the following in: img { behavior: url("pngbehavior.htc"); }

As for transparent overlays at one point I did use opacity: 0.8; on my tabs in the header. I recently realized I could achieve the same effect and validate by creating a 1px black image in Photoshop and setting transparency to 65%. I just repeat this with background: url('opacity65.png') center repeat; and use conditional CSS to set background: none; for IE6.

I love the drop shadow Brent is showing to WebKit browsers here. It works really well on my page too, but I've turned it off (as with text-shadow in the header). I have allowed myself one non-valid indulgence: the welcome box here is CSS 3 draft (using -webkit-box-shadow and -webkit-border-radius and because this CSS is inline it should be the only page on my site that doesn't validate!

Just 2% of visitors to my site use Opera, so I don't both testing with it (although for all I know that 2% might represent my 2 regular readers!).

SVG? Yeah, I tried Googling for info on corners and gradients with SVG and found so little in the way of real-world use I didn't think it worth pursuing.

Update 08.02.08: SVG test cases added.