CollyLogic: Colly’s CSS rollover generator

Colly’s CSS rollover generator

4th December 2004

Further to the previous post detailing multi-element rollovers, incorporating background color and XHTML text with images, I have created a pretty sturdy thing called Colly’s advanced rollover generator.

By removing the advanced fields, you can simply create a standard “sliding doors” rollover, or use the extra fields to create an advanced rollover with background and text elements. The CSS produced is lean and clean, and I’ve included a few extra fields to help you tighten your design further.

Step one - define the CSS

By using Malarkey’s excellent Trimming form fields tutorial, it is easy to get rid of the fields required to create advanced rollovers, leaving basic fields to power the rollover. Otherwise, to create a more advanced rollover, you just follow the basic instructions. It pays to create a “sliding doors” image first of all, though. A sliding doors image consists of the two image states side-by-side, equal in width. So, a 200px width image would sit next to a rollover version - also 200px, creating a sliding door image of 400px. Sliding doors remove the need for two images, and reduce flickering in some browsers. I have coded in a reference to one of my images in the image field for you to try.

Step two - complete CSS, XHTML and example

The generator produces simple, lean CSS, and successfully removes unwanted styles from the CSS. Not quite what you wanted? No problem - hit the back button and keep defining the CSS until you are happy with the image.

Let me know what you think

This is my first CSS generator - and I’d like to make more. The PHP did give me a headache, but I’m alright now. Maybe I’ll make an other for the ticked-off links technique. Anyway, any opinions welcome.

Colly’s advanced rollover generator.

Simon Collison published this on 04/12/04, at 3:14 PM

Comments

I think it’s fab!

04/12 at 21:54 from Malarkey

i love you Simon!
very nice idea.

05/12 at 16:36 from Jay

Ha! I just spent an afternoon configuring my rollovers based on your previous post… and then you go and make a bloody generator that does all the work for me. Great.

Thanks tho. More generators please!

05/12 at 19:02 from James

Neat as hell!

06/12 at 14:14 from Blair Millen

This is a great tool. Nice job, and thanks!

06/12 at 18:33 from Christian Watson

Nice work Colly you boffin, this must’ve taken a wee while! I now picture you in a lab coat, toiling over bubbling test tubes and a powerbook.

07/12 at 15:40 from Jon Hicks

Wow that’s incredible. Very cool.
The one thing that I noticed that was wrong was that it’s escaping the quotations (with a slash) in the font section of the CSS. Like this:

font:normal 8px \’Lucida Grande\’;

Other than that slight issue, this is an incredible tool!

08/12 at 01:22 from Adrian Kostrubiak

Hey-hey, thanks all for the positive feedback. I’ve already got two more generators on the go, which I’ll flag up soon. Anyone want to suggest generators?

Adrian: Well spotted. I’ll escape those slashes as soon as I get a chance.

Hicks: Since we met, I have undergone transmogrification, and I now resemble Beeker from the Muppets.

08/12 at 11:46 from Simon Collison

This is a brilliant tool. Just used it and it worked a treat. Thanks.

13/12 at 20:33 from Carlo

Nice stuff, Simon… I’m now actively looking for ways to use this in for a project or two…

16/12 at 21:32 from Derek Featherstone

give me a shout next time PHP gives you a headache ... more than glad to help.

12/01 at 11:05 from patrick h. lauke

Thanks Patrick - I just might take you up on that!

Derek, let me know if you do use it.

12/01 at 11:06 from Simon Collison