Just wanted to show y’all (Oh no, living in Montana is changing me – I said y’all) some of the new work that I have done. I really wanted an online business card that reflected my personality, aesthetically tight, narrow (I love narrow sites) and to the point. I didn’t want any extra twitter streams, tumblr, posterous, last.fm or any of that other social mumbo jumbo – A few links would suffice.

When building this site, I kept thinking “Audi” or a car with smooth wood and metal inside. Also, I wanted it to tie into the Komodo Media version 4 style with wood and dark colors. I love the Apple profile icon (as does everyone and their dogs apparently), so I wanted to use that, but give it a twist to make it my own. I modified the Apple profile icon to have a backwards/sideways hat, which as some have pointed out to my deficit, I wear all the time.

Custom icons were and have always been very important to me, none of that mainstream stuff. So, I made me a few sweet icons. The best icons, I believe, are in the contact section, so go check them out! I have a few more social network icons to do in the networks area, so be watching for those.

Next, being XHTML Strict and usable was extremely important to me. You may have noticed that when JavaScript is turned off, the site becomes readable as a very tall card and when sections are clicked they moved to a named anchor, thus repositioning the browser to that area. That’s rad. When JavaScript is detected, my favorite library, jQuery takes over and rocks a myriad of animations (hopefully not too many) and makes it all the more smooth. I added some cool nick-knacks such as anchor-section loading, which is a fancy way to say that the JavaScript detects the anchor loaded and loads the appropriate section. Also check out the hover effect on the profile dude – it’s fun ;)

Last, I’ve used CSS tricks from CSS3 to add text shadows to give that inset/letterpress look and a ton of PNG transparent images. Enough already, check it out online or read more over in the portfolio.

Komodo Media just launched another website design, Alternative Care Evaluations. It can be seen at alternativecareevaluations.com or you can view more information about it in the portfolio section.

About a year ago, my church Friendship Baptist had approached me to create a website design for them. As all churches these days seem, they needed a website…and they finally got one. With all free work, I find it very hard to get it done alongside paying work, so I approached this one a bit different. I decided to go with a very simple static page (no CMS) design. Slowly, I will integrate a calendar, a stories section, WordPress, etc. This way I take the work in bite-size chunks and the church still gets a site with valid information.

Feel free to check out more details for this site in the portfolio section.

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;
}

I’ll post more on what I learned in the designing process as well as releasing some freebies, so stay tuned. As for now, I’m a tired boy and I’m gonna take a rest. Please leave a comment and let me know what you think!

I’d like to announce a project that I have been working on over the past couple of months: Dailymugshot.com. I designed the site and all interface widgets for Keith Gould, the owner and mind behind the site. Dailymugshot is a site, inspired by YouTube videos, where people took a picture of themselves every day for years. The result is this phenomenal video where you can see people aging, changing, going through different fads, etc. It’s really pretty cool.

The videos seem great, but would take tremendous dedication to keep it up – you might think that this seems a pretty daunting task. I personally don’t have the ambition to take my picture every day, line them up, animate them and create a movie out of them. The cool thing is that Dailymugshot takes all of the hard work out of it for you, even reminders – thats right, they have a reminder application for both win and macs, so you don’t have to remember to take your mugshot.

I think that this very sweet web application is gonna take off. I think it is creative, fun and becomes what you make of it. You want to wear a different outfit each day – cool. Are you losing weight and want to see how much your face/body thins out over 2 months? Great. Do you want to show your friends on MySpace what you look like every day? Use Dailymugshot.

Mad props go out to Keith for building this and having the ambition to do it. He has worked long, hard and late hours to pull this project off. If you think its cool, I’m sure he’d love a shout out to keep him going.

P.S. The site just went live and the cutest boy in the world in the picture above is my son, Jameson.

I made this bad boy live and I have much to fix and redo, however I would appreciate all of your comments and criticism. I would love to hear what you think. If you think the site is confusing or you feel that you have a great idea that could contribute to the overall merry-ness of this site, then by all means do so, no matter how beginner of a designer that you feel you are. Also, if you see any missing content, please let me know. All comments are appreciated :)

Just to let you know about things not yet done on this site:

• Portfolio: The portfolio section still contains my old style. I think I am going to move it away from flash and into the html world.
• Tweaks & Nitpickiness: There are quite a few margin/padding and misalignments. I still would appreciate you commenting on them, but realize that I know this thing ain’t perfect.
• Music Section: Parts of the music section aren’t perfect. Still gotta get those done.

In addition to criticism, if you love/like the design, please say so. Thank you for your visit :)