Create Social Media Icons in Pure CSS
09. Mar, 2010 
67 Comments
Today I am experimenting with CSS3. I decide to recreate some of the social media icons using only CSS and HTML markup. Nothing is new here actually, except I’m having fun in doing the icons. And I will share to you the result.
And please not this is only tested in latest version of Webkit and Mozilla (v3.6).
View the Demo
The sample markup used in creating the NetVibes icon.
<div id="netvibes"> <div class="netvibes s128 fl"> <span>+</span> </div> <div class="netvibes s64 fl"> <span>+</span> </div> <div class="netvibes s32 fl"> <span>+</span> </div> </div>
The CSS used to style the icon
.netvibes {
background: rgba(104,219,33,1);
background : -webkit-gradient(linear, left top, left bottom, from(rgba(104,219,33,1)), to(rgba(19,130,16,1)));
background : -moz-linear-gradient(top, rgba(104,219,33,1), rgba(19,130,16,1));
color: #fff;
text-align: center;
border-color: #0c5f0c;
border-style: solid;
font-weight: bold;
font-size: 178px;
box-shadow: 0 0 4px rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
#netvibes .s64 span{
font-size: 88px;
}
#netvibes .s32 span{
font-size: 42px;
}
.s128 {
width: 128px;
height: 128px;
border-width: 3px;
line-height: 128px;
text-shadow: 0 -2px 0 rgba(0,0,0,0.5);
border-radius: 10px;
-moz-border-radius: 10px;
}
.s64 {
width: 64px;
height: 64px;
border-width: 1px;
line-height: 64px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
border-radius: 5px;
-moz-border-radius: 5px;
}
.s32 {
width: 32px;
height: 32px;
border-width: 1px;
line-height: 32px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
border-radius: 3px;
-moz-border-radius: 3px;
}
I also created linkedin, urkot, delicious, flickr and google. Check the demo and tell me what you want to add.
View the Demo
I am using the new CSS properties like border-radius, text-shadow, box-shadow and gradients in creating the icons.
A Great tutorial about CSS3 gradients and the benefit of using it, are well explained by Chris Coyier in this post (Speed Up with CSS3 Gradients).
Related Post
Wordpress Themes
I’m a Web Developer and Designer from Cebu City, Philippines. I am good at Wordpress, CodeIgniter, PHP, mySQL, jQuery and a standard compliant XHTML and CSS.
I would never have thought to do that.. nicely done!
Wow.. this is cool…. CSS is slowly becoming my new favorite
CSS3?
Right on!!
Very cool, hoping the other browsers catch on soon with the nice css3 features.
Thanks Soh, yes lets all hope.
I wish the vast majority of Internet users would have had the chance to see those beauties. Let’s pray together for Internet Explorer to lose its #1 position in the market.
yes, your prayer answered. firefox is the #1 browser already not IE. see it here http://www.w3schools.com/browsers/browsers_stats.asp
From your link:
“W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to use Internet Explorer, since it comes preinstalled with Windows. Most do not seek out other browsers.
These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is used by at least 80% of the users.”
@stan Good point and its true. But at this rate soon IE lose its place, plus chrome users are increasing. And considering the fact that IE is pre-installed in windows this is a good thing when IE9 released.
Try this stats: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0
>60% for IE, while FF ‘only’ 24%.
While I don’t know the validity this stats, it’s sad but true. Developers still need to count IE, while I think most developers avoid IE.
@waro yes all developers counting IE. But in this post, it is experimental so I don’t test it in IE as I have mentioned above.
CSS3 properties like Gradient can be achieve in IE also using this syntax.
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#eee, endColorstr=#000);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#eee, endColorstr=#000)”;
IE still has a 35.3% hold on w3! that’s mental.
Thanks for this eye opener – this is a great way to show off the power of CSS3. Keep up the great work!
whts the diference? CSS to CSS3?
CSS is the blanket name for Cascading Style-sheets. Within CSS (like HTML) there are different levels.
The most used and supported CSS level today is possibly CSS 2.1. CSS 3 is the new standard but has not yet been adopted by the largest browser Internet Explorer. Even version 8 (the latest at this time) falls flat on this example.
This being said, CSS 3 is a work in progress and as such could change – this is why there are proprietry versions e.g. -webkit- or -moz-
This is an excellent tutorial and use of new CSS3 capabilites.
Great new idea. Keep it up dear friend
Interesting idea, but not the ideal use of CSS, IMHO. Vector graphics should prolly be done in SVG…
yeah SVG is the most applicable. Thanks.
These look great. The day CSS3 – HTML5 becomes the standard is really exciting.
Very nice tutorial! I think it offers a lot of eye opening options that could be done with CSS3. Aside from the browser issue on most of my sites like http://theeasyapi.com we have Twitter, Facebook, StumbleUpon, Delicious, Digg, and Reddit. It’s a great start with what you have going.
Nice work!
Does this work in IE6? Just kidding, great idea!
Nice solution. Thanks
Wow and nobody else thought about this.. great find.. thanks
This is totally unnecessary.
Tons of code, it just doesn´t work for me.
Nice. But it seems you forgot -webkit-radius!
Also you should add the original fonts via @font-face!
Good going as always.I find it cool.
Great and very informatice blog. Thank you for really good job. Greetings:)
ck ck ck…
its a great
Wow, it’s unbelievable. The icons look beautiful, like images. I love it.
So it will save our hostings resource, am i right?
nice work..