First things first, we need a list. For this example we will be using a very simple list of fruits.

<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
    <li>Dates</li>
</ul>

Nothing revolutionary there. Next we clean up the browser defined CSS. It’s recommended to always use some sort of CSS reset. Being a fan of Yahoo! UI, I use theirs, but there are others. I just made a quick piece here to remove the bullets, margin, and padding.

ul {
    width: 120px;
    margin: 0;
    padding: 0;
    list-style: none;
}

Next we add a border. First, we need to add the border to each <li>. The next step is to remove the top border from the all items except the first one using the sibling (+) selector.

li {
	border: 1px solid #7f7f8c;
}
li+li {
	border-top: none;
}

That feels a little cramped. Let’s open it up a little bit and give it some breathing room.

li {
	padding: 8px 12px;
}

That’s looking really good and is actually the final version for IE7 & IE8 (with regards to the hover). But for browsers that support CSS3′s border radius, they will get the CSS powered prettiness. This looks like a lot of CSS, but it CSS3 is not a full standard yet, so we have to use the browser extensions for the elements.

li:first-child {
	border-radius: 10px 10px 0 0 ;
	-moz-border-radius: 10px 10px 0 0 ;
	-webkit-border-radius: 10px 10px 0 0 ;
}
li:last-child {
	border-radius: 0 0 10px 10px;
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px;
}

You may be asking yourself, “Why not use images?” You are more than welcome to, but I agree with Paul over at Boag in this video he posted about the topic.

Finally we add a hover effect to the items to make them stand out when you mouse over

li:hover {
	cursor: pointer;
	background-color: #f7f7ff;
}

Skyler Media’s first logo was one I created around 2004. It looked sorta like a sun and sorta like a flower, sorta geometric and sorta abstract. You could say it was “sorta” undefined, as was Skyler Media at this point. I knew I wanted to build hand coded web sites, but I wasn’t sure what I wanted them to be like or how they should feel.

After a few months, I was brought on as the sole developer for Pure Web Development and was forced to put my big boy shoes on and learn how to build real web sites, for real clients. It was a busy two years with many sleepless nights. Sadly, my time there ended and I thought it would be a good time to get Skyler Media up and running. For some odd reason the old logo was not cooperating and I tried my hand at redesigning it again and was completely unsuccessful.

So I borrowed some time from a friend of a friend and he came up with the idea of using a bird. The logo and the font worked really well together, so we were all very excited about the new look. Little did we know Twitter was going to take off like wild fire and consume any illustrated bird in their path. After being bombarded with questions about our affiliation with Twitter and if we “stole” their logo, I decided it was about time to work on something that would help us stand out.

A few months later I met a very talented designer on Twitter of all places. After a few meetings and client discovery, she sent over a few sketches. We mulled over them for several weeks before sending feedback. We ended up combining a few of the concepts and came up with something pretty solid with which to work. Once a mark was decided upon, we started work on the business card and letterhead designs.

All the work at this point was created in black and white so we could focus on the design. The color selection took a little while because we have five different divisions Beth had to work into the brand using different colors. Regardless the challenges, it didn’t take long before we had a completed brand package and felt it was time to release ourselves into the internets focusing on web application development.