Custom accordion slider for your iWeb all in CSS3

Continuing in the vain of adding CSS3 bits n’ pieces to iWeb in an effort to bring it up to date I have been working on something that uses the new ‘transition’ elements taken from the new version.
This week I would like to show you how to insert a custom accordion style slider into your iWeb sites. These are becoming particularly popular at the moment as they are something that you can place on your homepage, without taking up too much space, but it still allows you to give a bit of information about your other pages.

The full code is attached at the bottom of this post and, as with all of the other CSS3 posts I have produced so far it is fully customizable. I picked the gray gradient because I thought it looked ‘Appley’ but you can use anything you want. You don’t even have to use a gradient if you don’t want to.
Of course the font can be changed to fit your site too as can the number of different elements. You can see from the image below that I have chosen 4, but with a bit of copy/pasting within the code you can have as many as you like.

And as you can also see from the image above, you can do all this with a HTML Snippet; I told you you can do pretty much anything.
So what does this accordion slider do?
As you slide your mouse cursor over each gray element a box slides down from underneath it giving your visitor a bit more information about the subject heading. Take a look at the screenshots below to see what I mean.


All you have to do is download the code from the link below, paste it into a HTML Snippet within iWeb and click ‘Apply’. You will have to make sure that you drag the bottom-middle handle down so that the scroll action will fit, it is trial and error, but it does work.
I have commented up the css explaining a little bit about which bit does what and helping you to change elements. You may even want to refer to my previous post about on-line CSS3 tools to help you pick new gradients or borders to suit your site (or even match your CSS3 buttons….)
Download the css3slider file
Have you used this or other CSS3 elements in your iWeb site? Leave a comment and let us take a look.