Social media icon dock at page edge

I love the idea of a social media icon dock at the edge of the page, like the one here at Elated.

I've searched the forums, but can't find any reference to how this was built. Any suggestions?

Thanks,

b

@bsmale: See here

http://www.elated.com/articles/css3-floating-follow-tab-with-rollover-effects/

Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Hi Matt,
Thanks VERY much for posting this article.
I'm having a bit of trouble following along (I'm new at this), so I have a few questions if you don't mind me asking...

1- In Step 2, Creating the basic markup, you save this page as "index.html" inside the Images folder. Is it necessary to call it 'index' ? I'm just concerned that somewhere along the way there may be a conflict with the actual 'index.html' page of my website.

2- In Step 4, section #6, 'Adding the semi-transparent gradient background'... is this gradient background another file that we need to create in PS, that you discuss in the next info box, about accommodating IE9, or it some piece of magic that is generated by Mozilla/Webkit? It's a bit unclear.
If these are separate issues, and we don't really give a hoot about folks who are using IE9, can I just eliminate this section?
--> Your sample .PSD file doesn't include any gradient background, so I assume that it is Mozilla Magic that is at play here, but just thought I'd ask.

3- In your sample folder there is no .css file... so where does one place all the CSS codes?


Thanks again!

Brian

@bsmale:

1. No, call it whatever you like. It's just an example.

2. No, the gradient is CSS-generated using the linear-gradient property, as explained in Step 6. IE9 has its own issues as described in the boxout - see the link in the boxout for details.

3. Wherever you like! In the demo I included the CSS in the HTML document, but you can instead put it in a separate CSS file and link to it.

Cheers,
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/