Cloudscape is a series of icons I originally made for my site Thirty-Fivethousandfeet.com. They originated as just social media icons, and have evolved into an all out navigation for that site.
Since I think they look so damn good, I'm gonna let the world have them to play with. Right now they are in one whole image, using the CSS sprite method to display each one. But since I'm such a nice guy, I'm gonna include the PSDs so you can crop them up individually if you want.
Well, since I'm such a nice person, I'm including a sample html page that has all the markup needed to get all the current Cloudscape icons working in their proper ways.
ul#share3 { list-style-type:none; display:inline-block; }
ul#share3 li { padding:5px; float:left; }
ul#share3 li a { display:block; color:#000; width:74px; height:69px; }
#share3 li a.reddit { background:url(/img/SM.png) no-repeat top left; }
#share3 li a.reddit:hover { background-position:-1px -67px; }
#share3 li a.facebook { background:url(/img/SM.png) no-repeat -78px -1px; }
#share3 li a.facebook:hover { background-position:-78px -67px; }
#share3 li a.twit { background:url(/img/SM.png) no-repeat -151px -1px; }
#share3 li a.twit:hover { background-position:-151px -67px; }
#share3 li a.youtube { background:url(/img/SM.png) no-repeat -222px -1px; }
#share3 li a.youtube:hover { background-position:-222px -67px; }
#share3 li a.myspace { background:url(/img/SM.png) no-repeat -296px -1px; }
#share3 li a.myspace:hover { background-position:-296px -67px; }
#share3 li a.gTalk { background:url(/img/SM.png) no-repeat -1px -138px; }
#share3 li a.gTalk:hover { background-position:-1px -205px; }
#share3 li a.gTalk { background:url(/img/SM.png) no-repeat -1px -138px; }
#share3 li a.gTalk:hover { background-position:-1px -205px; }
#share3 li a.delicous { background:url(/img/SM.png) no-repeat -78px -138px; }
#share3 li a.delicous:hover { background-position:-78px -205px; }
#share3 li a.SU { background:url(/img/SM.png) no-repeat -151px -138px; }
#share3 li a.SU:hover { background-position:-151px -205px; }
#share3 li a.xbox { background:url(/img/SM.png) no-repeat -222px -138px; }
#share3 li a.xbox:hover { background-position:-222px -205px;}
#share3 li a.AIM { background:url(/img/SM.png) no-repeat -296px -138px; }
#share3 li a.AIM:hover { background-position:-296px -205px; }
#share3 li a.gProfile { background:url(/img/SM.png) no-repeat -1px -276px; }
#share3 li a.gProfile:hover { background-position:-1px -343px; }
#share3 li a.skype { background:url(/img/SM.png) no-repeat -78px -276px; }
#share3 li a.skype:hover { background-position:-78px -343px; }
#share3 li a.digg { background:url(/img/SM.png) no-repeat -151px -276px; }
#share3 li a.digg:hover { background-position:-151px -343px; }
#share3 li a.email { background:url(/img/SM.png) no-repeat -222px -276px; }
#share3 li a.email:hover { background-position:-222px -343px; }
#share3 li a:hover { border:0; }
#share3 li a:hover .shareIt { display:block; }
.shareIt { border:2px solid #26a9e0; background:#a2fff6; margin-left:80px; padding:5px; position:absolute; z-index:1000; width:90px; color:#666; border-radius:5px; }
#findMe { width:70%; }
ul#power { list-style-type:none; display:inline-block; }
ul#power li { padding:5px; float:left; }
ul#power li a { display:block; color:#000; text-indent:-8000px;}
#power li a.css3 { background:url(/img/power.png) no-repeat top left; width:61px; height:39px; }
#power li a.css3:hover { background-position:0 -40px; }
#power li a.css2 { background:url(/img/power.png) no-repeat -61px 0; width:71px; height:39px; }
#power li a.css2:hover { background-position:-61px -40px; }
#power li a.html5 { background:url(/img/power.png) no-repeat -131px 0; width:80px; height:39px; }
#power li a.html5:hover { background-position:-131px -40px; }
#power li a.xhtml { background:url(/img/power.png) no-repeat -211px 0; width:80px; height:39px; }
#power li a.xhtml:hover { background-position:-211px -40px; }
#power li a.cloudscape { background:url(/img/power.png) no-repeat -291px 0; width:116px; height:39px; }
#power li a.cloudscape:hover { background-position:-291px -40px; }
#power li a.wordpress { background:url(/img/power.png) no-repeat 0 -84px; width:50px; height:44px; }
#power li a.wordpress:hover { background-position:0 -128px; }
#power li a.jquery { background:url(/img/power.png) no-repeat -51px -84px; width:50px; height:44px; }
#power li a.jquery:hover { background-position:-51px -128px; }
#power li a.prototype { background:url(/img/power.png) no-repeat -104px -81px; width:40px; height:44px; }
#power li a.prototype:hover { background-position:-104px -128px; }
#power li a.picasa { background:url(/img/power.png) no-repeat -146px -81px; width:40px; height:44px; }
#power li a.picasa:hover { background-position:-146px -128px; }
#power li a.cobra { background:url(/img/power.png) no-repeat -197px -81px; width:40px; height:44px; }
#power li a.cobra:hover { background-position:-197px -128px; }
#power li a.photoZoom { background:url(/img/power.png) no-repeat -240px -81px; width:47px; height:44px; }
#power li a.photoZoom:hover { background-position:-240px -128px; }
#power li a:hover { border:0; }
#power li a:hover .shareIt { display:block; text-indent:0; }
If you want to see what the code is like before you download it, here it is. Also, I got the images that I used:
Here are the social media icons.
Here are the powered by icons:
It's important to note that I wrote this code to work with unordered list, so if you change it to be something else, you need to edit the CSS.
Just click the big Download button and you can get all these lovely icons, the .PSDs, and a sample html page for your very own use!
04.11.2010 -v1.2
Made a new, nicer email icon, reduced unnecessary CSS selectors
09.22.2009 -v1.0
First release, includes SM: Stumbleupon, Google, Facebook, Myspace, Delicious, Digg, Reddit, YouTube, Twitter, Google Talk, Xbox Live, AIM, Skype, email
Includes Power: CSS3, CSS2, HTML 5, XHTML, Cloudscape, Wordpress, jQuery, Prototype, Picasa, Cobra, PZ3
This work by stephen giorgi is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Permissions beyond the scope of this license may be available at http://steve.deadlycomputer.com/use.