Archive for September, 2009

Recently, one of the websites I work on was given a makeover and I was asked to implement the design. One of the features it called for was rounded-cornered gradient backgrounds. Rather than turning the design down, I took up the challenge to try to implement it.

Looking around on the internet, there’s a little bit about how to go about that in a cross-browser way, but I thought I’d document it here.

The basic idea I took is to use an SVG as the background. Unfortunately, IE doesn’t support SVG’s and most of the browsers that do support them didn’t support them as backgrounds at time of writing. Fortunately, we can mess with CSS and HTML to display the SVG as an image behind the content, while at the same time providing a fallback for IE.

The basic idea, is to show the SVG after the content, then push it up behind the content with some absolute/relative positioning, so we write code similar to:

Give the outside div a “position:relative” and the background div “position:absolute” and you’re all set. Put whatever you want for a background in the background div and your content in the content div (funnily enough).

While this doesn’t look nearly as clean as having just a single div with the background set to the svg, it does allow us a lot of flexibility to deal with IE. Since IE can’t natively handle SVG’s (yet), we can use a gradient filter on the background div. Alternatively, we could use some VML. You could even use a video as a background if you so felt like it 🙂

Facebook have recently posted on their blog that it is now possible to log into Facebook using your Facebook username.

I’ve just had a check and it’s possible to do the same with the Pidgin/Adium Facebook plugin. Not much of an issue if you’ve already got your account set up in Pidgin/Adium already, but hey, might save you a few keypresses next time you do set up an account 🙂