Geekwagon Logo

Here I am writing about my website again, but it's not really about me or my website. It's really about web design in general, and sharing the few neat things I've managed to figure out. I'll be able to post some good information about a site that is not my own, but I helped create, some time in the future. For now I created my own problem to figure out: a logo.

What self respecting website doesn't have a logo? What better way to recognize a brand than a well designed logo. It's part web part marketing, and let's face it I am no expert in either. I'm just going to make a post about it because I did learn some tricks tackling this.

The logo criteria I made up as I went along.

• site name is dominate feature
• more than 2 colors
• selectable text
• hidden meaning

http://geekwagon.net/logos/logo.html

Because everything on geekwagon.net has bee coded by hand, it made since to make the logo look like a bit of code. The purple highlighted brackets was inspired from Notepad++, and gave it some color. To make the text selectable I knew there was going to be some combination of HTML elements styled with a sheet, perhaps in some sort of cascade. A view of the source will reveal it's just some HTML with a few silly class names and comments with all the CSS contained in the page (because this made it easy to copy and paste into http://htmledit.squarefree.com/ and manipulate). It uses all of two images. The blinking cursor I nabbed from an image search, the foreground fade I made with Paint.net.

Lessons Learned:

• To get the fade to work right I had to use z-index, and it is a pain in the butt that requires position: relative; In some places. Experiment until it works (at least that's how I do it).
• span and div elements really are different, but only by default.
• The CSS shorthand for background is useful, but took a few trips to w3schools.com to get it down.

I'd like to take this time to reiterate I am a newb at all this. Despite that, it has been a fun learning process. I have found the only way for me to learn these kinds of things is to just sit down and do it over and over.

What about the hidden meaning?

I'm glad you asked, there are actually two. First, an observant person will notice the numbers on the left are line numbers. They stop at 1336 because geekwagon.net falls short of leet. Second, geekwagon.net is a self closing bracket because it is a self serving website. Not terribly cleaver, but they made me chuckle.