SSH, OSX and Terminal

I’ll retrace my exact steps here, including hot-keys. First we need to open up the terminal – a basic prompt interface that lives beneath all the bling of OSX. Rather than digging around in your applications folder, just hit apple-spacebar to open spotlight. Type “terminal” and it should show up right away.

Inside the Matrix (Terminal)

Now you can start to feel like a hacker. Thankfully, OSX ships with SSH pre-installed, which makes this tutorial very easy. To connect using SSH you need to type:

“SSH username@www.yourwebsite.com”

After pressing enter you’ll be prompted for two things… a password and a yes/no question asking if you want to add a record of the SSH connection (or something like that). While typing your password you can’t actually see the characters, but it is really working. Also, you need to write a full “yes” or “no” in response to the question…

That’s It!

You should be connected and ready to go. There are many different SSH commands, so I won’t go through those right now, but here are a few to get you started:

• ls – Used to list the contents of a directory
• cd .. – Used to go back (or up) one directory
• cd directory/name – Used to navigate to a directory
• exit – Used to end the SSH session
• pwd – Prints the working directory

Step 1 – Make or Find a Button

For this tutorial I’ll be using my green glossy buttons from a previous freebie post. Feel free to download the source PSD and follow along, or just make your own button style.

Step 2 – Prepare the Button

Before we really get started, it’s important to know what size we want to make our button. For this example I’ll create a button that is quite large, I’m thinking around 300px by 60px in size. So go ahead and crate a new Photoshop document with the dimensions you want.

After you’ve created the document, import my button (or yours) and scale it up so that it fills almost the entire document. If you have a little extra space on the sides it’s not the end of the world, just make sure that your button is perfectly centred on the canvas. To centre somthing perfectly you just need to:

1. With your button folder/layer selected, use the marquee tool (m-key)  to select the entire canvas (apple-a)
2. Without deselecting anything, choose the Move tool (v-key) and use the alignment tools in the top panel to centre your button vertically and horizontally.

A Perfectly Centred Button

Step 3 – Create a Rollover State

Next up we need to create a rollover state. Basically, we need to double our canvas size (vertically) and duplicate our button. From the top menu select Image > Canvas Size… and double the height of your canvas (120px if you’re following my example). Once your canvas size is doubled, divide it vertically with a horizontal guide.

Now you need to duplicate your button and centre it perfectly in the top section. The top button will be what our button looks like when you rollover, for now it looks the same as the bottom.

Next we add a rollover effect. If you’re using my buttons, you can open up the layer styles of the top button and slide the inner glow up to 75%. This will give our button a subtle glow effect when we hover over it.

With your button and rollover effect ready to go, you can now “save for web.” One important thing to consider here is what your background will be like. For my example I’ve made the background transparent and saved my buttons in PNG format. This means my buttons are not supported in IE6, but you could just as easily choose a background color and ditch the transparency, making your buttons IE6 friendly.

Step 4 – CSS Sprites and Some Basic HTML

Now comes the fun part, creating the button. First, we’ll start with some markup, a simple and humble link:

 <a href="#" class="button">My Glossy Button</a> 

I’ve given this link a class so that I can target it easier, but other than that it’s just a plain old link. Moving on let’s do some CSS magic. The basic idea is that we hide the link text using the text-indent property and give the link a background-image that only shows the non-rollover state. On hover we simply shift the background to show hover state, avoiding any loading time that is typical of CSS/Javascript image swaps.

a.button {
display: block;
width: 300px;
height: 60px;
text-indent: -999em;
background: url(css-glossy-rollover.png) 0px -60px no-repeat;
}

a.button:hover {
background-position: 0px 0px;
}

If you’ve done everything right the button should look something like this:

My Glossy Button

Well this article is going to be a quick example of a nice textarea styled with CSS. There is no reason why this should be hard to do, as it literally takes 2 minutes to put together.

Let’s get started. First we have our textarea:

Just a couple things to note here… First off, try and make sure there are no extra spaces between the start of the textarea tag and the end. In my experiences having any space will sometimes cause the textarea to be pre-filled with spaces, which is both annoying and confusing when you’re trying to fill out a form. Second, you almost always want to give your textarea an id, you’ll need it to target with the label.

Next up some CSS styles:

#commentBox {
     display: block;
     width: 400px;
     height: 120px;
     padding: 8px;
     border: 1px solid #cccccc;
     line-height: 130%;
     font-size: 13px;
}

What we end up with is a nice standard textarea that can be customized to fit whatever theme you need. It should look like the example textarea below:

So thats it! Only 7-10 lines of CSS for a basic but nice looking textarea. From here it would be really easy to customize this with background-images, fancy borders, different colors, jQuery hover states, or whatever else you think would look nice.

Smashing Magazine Footer Links

Taken from the footer of Smashing Magazine

Smashing Magazine’s current site (Jan 2010) has some really classic links located in the footer. They are clean, subdued, and are missing their text-decoration (the underline).

Nettuts and the Block Link

Looking at another footer, we can see an example of some stylish block links. I initially did not enjoy these links, but for some reason they’ve really grown on me over the last few months. I’ve even come to enjoy how they are all different widths, something that I would have hated in my earlier days.

The Happy Cog Header

One of my favorite sites, so I couldn’t leave them out. Happy Cog uses the traditional underlined link in their main navigation, with a block link hover effect. While it seems that underlines have become less popular lately, I think they provide users with instant recognizable links.

A List Apart General Links

I wanted to throw this in here because I really enjoy the hover effect on A List Apart. They use a background color AND an underline.

Anyways, I’ll be adding to this list as I find more interesting links. I know it’s a little trivial, but things like this are the bread and butter of a well crafted site. In the meantime, answer this scientific poll:

[poll id="2"]

Step 1 – Get Thunderbird

For this example I’ll be using Thunderbird, a great open-source mail client put together by the same people who bring you Firefox. I’m sure you can use other mail clients to mail HTML email, but I really enjoy Thunderbird so that’s what I’ve decided to use. You’ll need to get everything setup before you can actually send any HTML email, but that’s really outside the scope of this quick walkthrough.

Step 2 – Craft Your HTML Email

The next step is to craft your HTML email. This is definitely the hardest part and I would highly recommend looking through tutorial before trying anything too fancy. Sitepoint has a nice little article on the subject, or if you’re feeling lazy you can grab a pre-fab HTML email template from Campaign Monitor.

Step 3 – Upload Images to a Public Area

If you’re using any images in your HTML email, you’ll need to find a place to host them online. If you fail to do this, all your images will show up broken. Ideally you’ll want to use your own hosting, but if you need a quick fix you can probably use a service like imgur to temporarily host them for you. Once your images are all online, make sure to change all the image paths in your HTML email. The image path needs to be absolute, which means you need to put in the full URL (ie. http://www.yoursite.com/email-images/your-image.jpg).

Step 4 – Use Thunderbird to Mail the HTML Email

Create a new message just like you normally would, but leave everything blank to start. From the top menu click Insert / HTML then paste in your HTML email. (click the images to see screenshots)

Create a Blank Message

Click Insert / HTML

Paste in Your HTML Email

And thats it! Start sending your HTML emails!