Last week, I made and released View.js — a simple, lightweight, jQuery photo viewer for the web. View was created as an answer to all of those massive, bloated lightbox plugins with a load of buttons and styles. I wanted View to be simple, almost zero images and buttons and be customizable not through JavaScript, but through CSS. Thus, View was born.

Head on over to the View website and click on the thumbnails to give it a whirl. If you like it, snatch it up. It’s only ten bucks.

For those of us using a Mac, Growl should essentially be shipped with the system. For years it’s worked wonders as being a perfect central notification system for any and all system events. From new emails to a Skype message to an upload-just-finished status notification, Growl is a great way to keep me updated.

As great as Growl is, I wanted a new theme. Since Growl themes are webkit and CSS2/3 based, I figured what the heck, I’ll make one of my own. Best news is I’m making it publicly available for you too!

Head on over to the downloads section to download it!

I captured the Growl notification above against Shaun Inman’s Twitter background. So pixelly and delicious :)

Here are the new additions:

View on light background • View on dark background

• Cargo
• Dribbble
• Gowalla
• Grooveshark
• Paypal
• Xing

Download?

Ok, head on over to the downloads area to click on your download link to get the updated icon pack and that’s it!

Thanks

I just want to say a personal thank you to all of you who have used my icons, commented on how much you love them, incorporated them into your designs and given me some link love back to my website. The adoption of my little icon set over so many pages on the internet has really encouraged me as a designer.

What’s next?

My next addition will contain Xbox (it’s coming Sam ;), Playstation and Wii icons…more suggestions?

Introducing 100+ ridiculously rad social networking icons, skillfully hand-hewn and lovingly crafted for you. I’ve developed over 100 refined, amazing social networking icons for the top networks around. They’re all the rage with you crazy newsk00l intarweb kids. Use them on your blogs. Put them on t-shirts, coffee mugs, your face-space or whatevs.

Here’s whats you get

The Social Network Icon Pack consists of 40+ 16 pixel x 16 pixel icons and 40+ 32 pixel by 32 pixel icons all in 32-bit PNG format in the following flavors:

View on light background • View on dark background

• AIM
• Apple
• Bebo
• Blogger
• Brightkite
• Cargo
• Delicious
• Design Float
• Designmoo
• deviantART
• Digg
• Dopplr
• Dribbble
• Email
• Ember
• Evernote
• Facebook
• Flickr
• Forrst
• Friendfeed
• Gamespot
• Google
• Google Plus
• Google Talk
• Google Voice
• Google Wave
• Gowalla
• Grooveshark
• iLike
• Komodo Media
• Last.fm
• Linkedin
• Mixx
• Mobile Me
• My Name is E
• Myspace
• Netvibes
• Newsvine
• Openid
• Orkut
• Pandora
• Paypal
• Picasa
• Playstation
• Plurk
• Posterous
• Qik
• Rdio
• Readernaut
• Reddit
• Robo.to
• RSS
• ShareThis
• Skype
• Steam
• Stumble Upon
• Technorati
• Tumblr
• Twitter
• Viddler
• Vimeo
• Virb
• Windows
• Wordpress
• Xing
• Yahoo!
• Yahoo! Buzz
• Yelp
• YouTube
• Zootool

Ohh my gourd, these icons are ridiculously rad and ooze awesomenesss Rogie! What can I give you?

Well thank you … you interweb person! Is it Jim? Frances? Hondo? Gertrude? Well, I took a stab at it anyhoo. First, you can tweet about these icons if that’s your bag. If you are seriously overflowing with that much gratitude and love, then please consider donating your old Duran Duran albums, your kid’s lunch money, a gallon of gas, an iTunes gift card, a retro Star Wars T-shirt, something from my wishlist, this wicket maquette, this kid robot hat, this sweet shirt, or really anything you please. In any case, you can donate if you’d like by donating with Paypal by clicking the hyperlink with your mouse.

★ Every donation helps me get to SXSW for my first time. :)

How are these icons licensed?

If you use these icons, please place an attribution link to komodomedia.com.
Social Network Icon Pack by Komodo Media, Rogie King is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.
Based on a work at www.komodomedia.com.

Wait, where’s the download?

Ok, head on over to the downloads area to click on your download link and that’s it!

The nitty gritty

I claim no right of ownership to the respective company logos and glyphs in each one of these icons.

You’ve asked. You’ve begged. Fine, you get it. Here is a revision to the sign in with Twitter and Facebook button set. This time, I’ve included 16px icons, 32px icons and 3-state buttons for signing in with Twitter, Facebook and OpenID. I’ll keep this brief and not rant like I usually do.

Oh, wait! Last bit. Before you download these bad boys, realize that you’ll need to link me back as I am releasing these under an attribution license. If you need different arrangements and can’t link me back, we’ll have to settle it some other way, so contact me. Peace.

Download Social Sign In Buttons & Icons

Social sign in buttons is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License

As social websites like Twitter and Facebook have become dominant forces in the social network scene and with both networks offering sign-in solutions using either of them, we are going to see “Sign in with…” buttons popping up all over the place. And why not? Why would I want to create yet another account in the account-soup that is the interweb today? I don’t! It’s a heck of a lot easier for me to sign into a site using my Twitter or my Facebook account than it is to go through a lengthy account creation process.

Well, then cool! So as signing in with these websites is becoming more popular, let’s just say that I think that the buttons are not so hot. Let’s face it. I want to click beautiful things. I don’t want to punch some gawdy twitter button that some poor developer with an amazing idea came across on an old geocities design hack’s site. I want that developer to have a beautiful “Sign in with Twitter” button.

Enough of my ramblings, I’ll get to the point. I made signin buttons for both Twitter and Facebook for you guys to use at will. There are 3 button states in each PNG image that you will see in the download: default, hover and press. That’s all! Enjoy!

Download Social Sign In Buttons

Social sign in buttons is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License

It’s the social web now. We share everything, from our musical tastes, to the bacon avocado burger we ate for breakfast , to the very funny things we say and do. With amazing APIs such as the ones offered by Last.fm, Twitter, Flickr and more, we can now put them all on our sites, showing close to real-time updates of the music we are listening to, conversations we are having, and the things we are seeing.

With this slew of api stew hitting the fan, its no wonder websites and blogs are looking cramped, busy, and ugly. Why not pretty them up a bit? That’s what I intend to do. I want to show you how to style your music streams and give you some graphics to do so, cause let’s face it, it takes time to design things and it’s easier to use mine than yours ;) Alright, enough banter, let’s get to the goodies.

The XHTML

Keeping it simple and semantic, we describe our “list” of music with an unordered list. We link the title and supply a thumbnail image to bring some life to the album. In the real world, fill your alt attributes and titles with some helpful information for those using screen readers. Simple enough eh?
<ul class="music">
<li>
<a href="...">Hungry Like the Wolf: Duran Duran</a>
<img src="albums/duran.jpg" alt="..." />
</li>
</ul>

The PNG Overlays

Next, if we are talking sexy, we need sexy PNG images designed to lay over the images. This way, our list doesn’t look like the same old boring square 50px x 50px image (like everybody else and their llama’s neighbor has). This is the part where you get lucky and get some freebies thrown your way. Here are three PNG images that I’ve designed (perhaps inspired by some music apps around the intarweb) that are free for you to do whatever you’d like with. Yes, even that.

Jewel Case

Vinyl Record Sleeve

Compact Disc

The CSS

Now that we have some sweet looking markup, and the PNG overlays ain’t that bad either, let’s get to rocking the stylesheet to make this all come together in a beautiful matrimony…or something like that.

Okay, the first thing I am going to do in lieu of a reset stylesheet is just reset what I am working with like so:

ul.music,
ul.music li,
ul.music li a,
ul.music li img{
margin:0;
padding:0;
list-style:none;
border:0;
text-decoration:none;
}

Next, I want a little bit of margin (or spacing) between my list of albums. This is totally up to you, but I decided to go with 15 pixels. Also, I want the albums to show up in a row and then line wrap when they reach the edge of the containing element. To do this, I float the list items left:

ul.music li{
margin:15px 15px 15px 0;
float:left;
position:relative;
}

Okay, the next rule will style the link to the album and it gets a little more hairy. I’ll explain the premise of the style and you can fill in the gaps of how it works. The idea is that we can use the link as the album overlay if we set the PNG image as the background (for this example, we are using the vinyl overlay). As long as we put the link over the image (z-index and relative positioning) and set the dimensions (block display, width and height) of the link to that of the PNG overlay, it should work.

Also, I decided for my implementation, that I didn’t want the text of the album to show, hence the negative text-indent rule and overflow:hidden; to keep that negative text indent from showing. You can keep the album text with a few additional styles.

ul.music li a{
display:block;
position:relative;
background:url(vinyl.png) 0 0 no-repeat;
float:left;
width:90px;
height:82px;
text-indent:-1000em;
overflow:hidden;
z-index:1;
}

If you’ve done your math, we’ve only got one more tag to style: the img tag. The idea with styling this is very simple. Just set the dimensions of the image to that of the viewport of the PNG overlay and position the top-left coordinate so that the image lines up perfectly in the viewport. We use absolute positioning so that this image doesn’t affect the size or layout of it’s parent list item and position it right in the viewport of the vinyl png image, in this case at the 2px, 1px coordinate:

ul.music li img{
position:absolute;
width:72px;
height:72px;
left:2px;
top:1px;
}

Wait, what if there isn’t album art?

That’s right. You are special. You listen to underground music. This music is so underground and obscure, that not even the most savvy of databases can capture your unique taste, leaving you with a bunch of empty albums and no art. Well, you rogue you, I’ve got some CSS to fix that. We still have one more tag we can use as a background and that is the li. I’ve whipped up some empty album art as well and we’ll use it for the blank state. All we need to do now is position the blank album insert in the “viewport” of the PNG overlay like so. Voila!

ul.music li{
background:url(blank_insert.gif) 2px 1px no-repeat;
}

That’s it!

Yeah right. There’s always the dreaded two-headed beast Internet Explorer. Let’s have a little chat about how Internet Explorer jacks things up for us web designers. First of all, IE7 really doesn’t give us that much grief. It’s biggest flaw is that it sucks big time at rendering images at any size other than its inherent size. What does this mean? Well, if an image has dimensions of 100px by 100px and you set the size (as we did) to 72px by 72px, IE7 basically takes a dump on itself and renders it with jaggies and all gross. Luckily we can fix it’s issues with the following CSS rule:

img {
-ms-interpolation-mode:bicubic;
}

Wow. That was way too easy for an Internet Explorer issue. Ahhh, don’t worry, more pain will come. Next, as we all know, Internet Explorer 6 sucks at displaying PNG images with alpha transparency. Wow. Big surprise. Luckily, there is another Microsoft-specific CSS rule that we can use to overcome this impairment. Here is the code that makes IE6 behave like a red-headed stepchild should:

ul.music li.vinyl a{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='vinyl.png', sizingMethod='crop');
}

That’s it for realz?

Yes, that’s it for reals! Now you can make your Last.fm music playlists all sexy. Two words of advice. One, if you want to be mega nice, link my site as a thank you, but you don’t have to. Two, get out and make the web beautiful! Here are some resources to get you on your way:

• Download the PNG overlays in this article
• Download a Sample File
• View the complete CSS and XHTML for this article
• Last.fm Plugin for WordPress
• Last.fm apps, CoverSutra & BowTie: iTunes controllers/Last.fm scrobblers

Update

So far, I haven’t seen many sites using these overlays, but here are a few. I’d love to see how people are using it and where, so drop a line and let me know. Here are a few sites that are using these album overlays:

• James Lao – http://jameslao.com
• Maniacal Rage – http://log.maniacalrage.net/
• Hello! Ranking – http://www.hello-ranking.com
• In Hearts Wake – http://inheartswake.com/
• Phunky – http://phunky.co.uk/
• Chris Wallace – http://www.chris-wallace.com/
• Jack and Diana – http://jakeanddiana.com/
• Gilbert Pellegrom – http://www.gilbertpellegrom.co.uk/
• The Things I Do – http://www.thethingsido.net

This icon set consists of 30 (16×16) finely crafted social media icons. They are free to use non-commercially. Put them on your blog or on your website to help users bookmark or share your site socially. I hear its all-the-rage these days.

This icon pack consists of the following icons, in absolutely no logical order:

• RSS/Atom Feed
• Reddit
• Delicious
• Stumble Upon
• Mixx
• Facebook
• Digg
• Design Float
• Technorati
• Twitter
• Newsvine
• Furl
• Blinklist
• Magnolia
• MySpace

• Last.fm
• Dopplr
• Vimeo
• YouTube
• Sphere
• Sphinn
• Trip Advisor
• Flickr
• Gamespot
• FriendFeed
• LinkedIn
• Posterous
• Tumblr
• Brightkite
• Email

Social Network Icon Pack by Komodo Media, Rogie King is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.
Based on a work at www.komodomedia.com.

Here’s another sweet little giveaway…I named him sprout! So, I know what you’re thinking right. Ohh my gourd, I just spent like 6 hours googling for a vector image of 3 seeds and a sprouted leaf. This is is sooooo perfect. Or maybe your site is low on it’s vegetation and it so desperately needs leaves jutting out to and fro from its crevices. Anyhoo, whatever your bag is, take these sukkas off my hands. Enjoy ;)

You’ve can download either the Fireworks PNG for vector editing and gettin’ all wild and crazy or just download the regular PNG for use in any graphic editor for general merrymaking.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.

So, in the process of creating this site, I’ve made yet even more leaves and guess what? Yeah thats right, some are gonna be freebies. This time, its the almighty philodendron.

You’ve can download either the Fireworks PNG for vector editing and gettin’ all wild and crazy orjust download the regular PNG for use in any graphic editor and general merrymaking.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.