It’s been about a year coming. I’m glad to finally announce that my personal goods marketplace, Fine Goods Market, is here! Not only is is sporting icons, overlays and scripts, but to make Fine Goods a thing truly special, it’s sporting some goods to wear — that’s right, it’s sporting premium tee shirts. Be expecting many more icon sets and digital resources to come! Also, pick up the new Basic Social Media free icons here.

I’m sure I’ll have more to share about the process of making Fine Goods, but the proof should be in the pudding, as the store has a few schnazzy design tricks up it’s sleeves, including CSS3 animations, custom scrollbars and more!

Check it out and let me know what you think. Thanks for all the support in getting this project live, fellow interwebbians.

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.

Yeah, so I like to tinker around with CSS3/HTML5 and JavaScript. I have a lab now for that.

As CSS3 is hitting the web hard, rounded stuff is poppin’ up all over the place. Rounded avatars/images are starting to become a reality. Trent Walton has a nice article on this here. It’s pretty simple, just apply a border radius to the <img> itself, however Firefox and Opera don’t play well with the border-radius like other browsers do.

I want a solution for Firefox and Opera. As of now, I’ve not come up with a solution that is truly a mask (meaning it would work well on backgrounds of any color/pattern/texture, but this solution works for Opera, Firefox, Webkit and Chrome on solid color backgrounds.

Markup

<span class="frame">
<img src="/path/to/img.png" />
</span>

CSS

.frame{
display:inline-block;
position:relative;
overflow:hidden;
}
.frame>img{
vertical-align:top;
}
.frame, .frame:before{
-moz-border-radius:100em;
border-radius:100em;
}
.frame>img{
-webkit-border-radius:100em;
}
.frame:before{
content:'';
display:block;
position:absolute;
left:0;
right:0;
width:100%;
height:100%;
margin:-10em;
border:10em solid #1a1a1a;
}

Preview

Cons

The biggest con to this technique is that the rounding technique is just a color, not a mask, meaning this works well for solid backgrounds, but not patterned backgrounds :(

Play with it!

Wanna mess with the code? Go edit it live on JS Fiddle!

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 :)

I learned of this technique through Bryan Veloso, who was using a black text shadow with zero blur and zero offset to force Safari’s sub-pixel rendering of text to not appear as a bit more legible, especially on dark backgrounds. Having known nothing of this (I know right, where was I?), I fired up both Safari 3 and Safari 4 to see what was going on. Let’s check out how Safar 3 and 4 render light text on a dark background.

Safari 4

Out of the box, Safari 4’s font rendering looks good with both light on dark text as well as dark on light text as seen here.

Safari 3

Now I know why this hack was created and you can read more about it here. As you can see in the light on dark background text below, the text is bulky, and almost bleeds the letters together. It looks nothing like the sweet text on the right, which looks clean, crisp and legible.

The original text-shadow hack

Let’s see the original text-shadow hack, implemented by the following CSS:

text-shadow: #000 0 0 0;

Safari 3 with text-shadow hack

Safari 4 with text-shadow hack

So the fix that fixed Safari 3 seems to have gone a muck in Safari 4. Here’s where the revised fix comes in. I read over in the comments on Sam Brown’s site that you can apply a text shadow similar to the background color on the offending areas to fix this – in this case, any white background area. I tried it and he’s right, it works like a charm. However, I thought up a neat little solution, which I’m sure others have thought of too that fixes both scenarios with one rule:

text-shadow:rgba(0,0,0,0.01) 0 0 0;

The premise is simple: use an extremely transparent black (1% visible to be exact). This way the black doesn’t bleed around the text as seen in the light background case, but is forces Safari to render the text in a more legible manner. Now, let’s look at what it looks like:

Safari 4 with revised “Komodo” text-shadow hack

Safari 3 with revised “Komodo” text-shadow hack

It’s beautiful! I name it the “Komodo text-shadow hack” or KTSH for short.

That seems like it does the trick to me, what do you think?

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

I want to share a CSS technique I’ve used alot. I’m sure that you have seen CSS sprite techniques that utilize changing background position on hover to change a link’s state. Also, they have the added benefit of keeping from loading images on hover, limiting lag. This technique is very similar, but works like a charm for IE6 and PNG images. I know this may be a moo point at this stage, because IE6 is on the outs, but still works beautifully as a technique.

Let’s jump right in, as I don’t have a lot of my Labor day to give.

First, as always, I want to preview this thing and see what it does. Here’s your preview:

Aight, the meat and potatoes: the XHTML

So, the markup is pretty simple. It’s basically a link with a span in it. Check it:

<a href="..." id="buyme_coffee">
<span>Buy me a coffee</span>
</a>

How it works

Before looking at the CSS, it helps to know how it works. Think of it as a window to a larger canvas behind it. It’s easy to think of it in terms of the two elements:

• The window: The A tag
• The canvas: The SPAN tag

The window only shows a portion (a view) of the canvas. The canvas can be any size. By changing the position of the canvas, you can pan a different portion of it into the window. The window is fixed width, fixed height, and any overflowing content is hidden. This way, only the portion of the canvas in the window view is visible.

The CSS

#buyme_coffee,
#buyme_coffee span{
display:block;
width:160px;
height:40px;
position:relative;
overflow: hidden;
}
#buyme_coffee span{
height:120px;
background: url(coffee_button.png) 0 0 no-repeat;
text-indent:-9000px;
}
#buyme_coffee:hover span{
top:-40px;
}
#buyme_coffee:active span,
#buyme_coffee:focus span{
top:-80px;
}

The first selector targets two tags, the #buyme_coffee link and the #buyme_coffee span span inside the link. I’m doubling up the rules by targeting both tags because both tags share quite a few similar tags. As for the rules that are different, I’ll correct in the next selector.

This first selector sets both A tag and SPAN tags to block (since they are inline by default), sets the width and height, and then sets the overflow to hidden. The overflow:hidden here is the key. This causes the A tag to act as a window that only views the content in its height x width box. All other content is simply cutoff or put away from view.

The second selector, #buyme_coffee span, resets the height to the height of the background image, which is larger than the viewport (A tag), but gets cutoff from view. The text-indent:-9000px is a cheap way of shoving the text off the screen so that this text is replaced by the background image. The background image contains the three states we want: Default, Hover and Focus/Active. Here’s a preview of that background image:

You probably guessed it. The top image will show as default.

K, we’re almost done. The third and fourth selectors target the :hover and the :active and :focus states respectively. This is uber simple. When the link (or window) is hovered, push the top of the span (or canvas) up by 40px, showing the hover state. When the link is active or focused, push the span up by 80px, revealing the active state.

That’s it! So why is this better than just panning the background position you ask? Good question. I started using this method when I needed to make the background an alpha-transparent PNG, which as you know, doesn’t display correctly unless you use an IE alpha image loader filter, which as you know doesn’t play nicely with background image positions. With this method, you can apply an alpha image loader filter to the span element and it works like a charm.

Hope you enjoy. Cheers!

Update: Based on @Justin’s suggestion, I’ve included some modified CSS below to show this technique sans the a text-indent:-9000px for screen reader friendliness. A demo of the modified CSS can be seen here.

#buyme_coffee,
#buyme_coffee span{
display:block;
width:160px;
height:40px;
position:relative;
overflow: hidden;
}
#buyme_coffee span{
height:140px;
background: url(coffee_button.png) 0 0 no-repeat;
line-height: 20px;
white-space: nowrap;
top:-20px;
}
#buyme_coffee:hover span{
top:-60px;
}
#buyme_coffee:active span,
#buyme_coffee:focus span{
top:-100px;
}

Lately, in projects I have been using a modified CSS snippet I found out on the interwebs to automagically replace PNG images with their AlphaImageLoader equivalent in IE6. Check this out here and I’ll explain and give an example:

The CSS/Code

* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}Update: This code changed to remove the behavior at runtime based on @Thierry’s suggestion.

For you purists out there, this is extremely hacky, so you may want to skip this whole entry entirely.

Update: : CSS Conditional comments for IE are a perfect way of hiding this hacky code from the good browsers. Here is a way to bring in the CSS for only IE 6 and below:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="png_fix.css" />
<![endif]-->

Ok, there won’t be much in the way of explanation here, but let me explain what this little bad-boy does.

The Selectors

* html img,
* html .png

The selector portion of the CSS rule targets which XHTML tags/classes this rule will be applied to. At first glance, it looks like all img tags as well as all tags with a class of "png". You’ll notice the (star) html in front of both of these. Wait, there is no “anytag” preceding the html tag, so this won’t get applied! True. For all non-crappy (that is a pro term by the way) browsers, this rule won’t get applied. However, since IE6 is a pile, it thinks that there is a tag before the html tag, so it will apply this rule. Great! Now IE6 is the only browser that will use this rule.

The Rest of the Code Jargon

Honestly, the rest you really don’t want to mess with much, but it suffices to say that this expression does a few things:

• If the tag is an IMG tag, the expression checks to see if it is a .PNG image. If so, it applies a CSS AlphaImageLoader filter to the IMG tag to load the PNG file as a background image. It then points the src attribute of the image to a transparent gif so that the image isn’t overlaying it’s own background. Voila! Note: This only works well for images not resized by the browser. Also, you’ll need a transparent gif 1px by 1px image on your server.
• If the tag is not an IMG tag, then this expression takes the CSS given background image and shoves it into a background AlphaImageLoader filter. It then removes the real CSS background-image rule so that the background and the filter are not conflicting.

Pretty cool! Please note that this CSS expression is pretty generic. If you have some crazy CSS-ing to do, you might want to stick with using your own methods or apply the AlphaImageLoader filter manually.

Also, if you are a standards-compliant junkie and this brushes you wrong, remember that this is intended to help with the crud of browsers. Sometimes we have to break our own rules to do the job.

A Demo!

Let’s see a demo! See the goodness below:

My Image Tag:

My Generic Tag

My Link Tag

Update: Links will need an additional rule of cursor: pointer; to restore the cursor. I’ll have to change that in the script to do that automatically

I’ve also seen some crazy technique using bitwise & operators, which is hardly readable for common folk, but I do admit is probably blazing fast. Only issue there, once again, you are maintaining a counter variable and incrementing it. Blegh.

I do not claim for this method to be better. I simply claim that this is my method and I use it. Take it as you will. When in Rome…

First, lets set up a style

<style>
tr.alt td{
background-color:#D5E0E1;
}
</style>
Done…

Next, the PHP code intermingled with some HTML

<?php
for($i = 0; $i < 10; ++$i){
$row_class = empty($row_class)? "alt" : "";
echo("
<tr class=\"$row_class\">
<td>
data 1
</td>
<td>
data 2
</td>
<td>
data 3
</td>
</tr>");
}
?>

The key for the alternating row classes of course, lies in one line of PHP code:
$row_class = empty($row_class)? "alt" : "";

Basically, I’m using PHP shorthand to do an if statement and check if the variable $row_class is empty or a blank string (“”). If it is then I set it to “alt”. As you can imagine, next row, the same statement is ran. This time, it’s not empty, so it gets set to empty, thus alternating between the “alt” class and empty.

Done…Seacrest out.