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

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.

By Harry Roberts on Sunday, January 23rd, 2011 in Web Development. Tags: , , | 2 Comments »

+

2 Responses to ‘Link: Recreating the Luke’s Beard social icons with CSS3’

  1. Bo said on 24 January, 2011 at 12:57 pm

    “view source” link doesn’t work for me.

  2. Nick said on 24 January, 2011 at 6:44 pm

    Awesome example!
    I wonder how well it degrades in older browsers, though, using opacity.

Leave a Reply

Respond to Link: Recreating the Luke’s Beard social icons with CSS3

Hi there, I am Harry Roberts. I am a 21 year old web developer from the UK. I Tweet and write about web standards, typography, best practices and everything in between. You should browse and search my archives and follow me on Twitter, 7,791 people do.

via Ad Packs