23 January, 2011

Link: Recreating the Luke's Beard social icons with CSS3

Written by Harry Roberts on CSS Wizardry.

Table of Contents

Independent writing is brought to you via my wonderful Supporters.

1. Demo

I was browsing Dribbble this afternoon when I came across Luke’s Beard profile and then, in turn, his website. I noticed some pretty cool hover effects going on with his social icons which I decided to recreate without JavaScript and using some progressive CSS.

Demo

I won’t write everything up because a view of the source and CSS should explain everything.

Luke did not commission this work, so please don’t reuse the icons or copy this without permission from the respective people. I allow full use of my code (with attribution) but please don’t copy Luke’s format for social icons–the code is mine but its implementation on social icons is Luke’s.

In short, you can have my code but it was Luke’s idea.