As it stands, rounded corners are currently supported in modern versions of Firefox, Safari, and Chrome. Unfortunately, you’ll need to use two different declarations to get all these browsers working. The basic declarations should look something like this:

/* Supported in Firefox */
-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

/* Supported in Chrome and Safari */
-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

The Rounded Example

Below you will find an example of rounded corners in action. If you’re using a modern browser you should see the grey box with rounded corners. (if using IE, I’ve put in a screenshot of what things look like when using a respectable browser)

.rounded {
width: 500px;
padding: 30px 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

Screenshot Example For Internet Explorer (sigh…)

But What Does the W3C Say?

Due to the fact that border-radius is not officially supported by any browser, it might be a good idea to check out what the W3C has to say about the subject. I was surprised to see how detailed they were and I highly recommend checking out their official specs. As a reference, the official (but currently unsupported) declarations are:

border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

There are tons of neat variations you can do, but they go a little beyond the scope of this article. Check out the W3C specs for the full explanation, or, check out some of these links that do a good job documenting css rounded corners:

• CSS3 Info
• The Art of Web
• Zen Elements

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

There is a neat little trick that most good web designers know and love, and it has to do with background textures and noise. I remember when I first started designing for the web, I would never use textures in my designs and was always left feeling like something was missing. A textured background, even when it’s very subtile, will give your site much more depth and feeling than a plan flat color or gradient. This quick example will use some simple noise to give a gradient background some extra depth. So let’s get started!

First Example – A Noisy Gradient

Step 1 – Create a New Document

Create a new web document that is 1200px by 1000px.

Step 2 – Choose a Nice Gradient Background

For this example I decided to do a nice bright-dark green gradient. Make sure it’s linear to make it easier to slice into HTML/CSS afterwards.

Step 3 – Add the Noise Layer

Next, add a new layer on top of your background layer. This will be our noise layer. Fill it in with total black and then go up to Filter > Noise > Add Noise. Use roughly the same settings that I use below:

You should end up with a really really noisy background.

Step 4 – Blending and Opacity

Next we need to change the blending mode and opacity to make our noise layer more palatable. First set the blending of the noise layer to Overlay. Next you need to bring the opacity down to somewhere between 1% and 20%, depending on how much noise you want. In my Example I used  5% opacity.

Your final background should end up looking something like this:

Click to See Full Size

Here is a quick way to produce a neat halftone effect in Photoshop that can be used to give your compositions a little more complexity.

Step One – Setup the Document

Start off by creating a new document with the dimensions of 800px by 800px.

Step Two – Black to White Gradient

Create a new layer and fill it with a blank-to-white gradient. Try and make the gradient fairly even across the entire document.

Step Three – Apply the Halftone Filter

Select the entire gradient layer and goto Filter > Pixelate > Color Halftone… and fill it in with the settings below.

Step Four – Rotate the Halftone Layer

Next we can rotate the halftone layer by around 45 degrees counter clockwise.

Step Five – Crop it Down

Next make a selection near the centre of the halftone and crop it – I ended up cropping a section of ~ 615px by 300px.

Step Six – Apply a Pleasing Gradient

Choose a nice two color gradient (I choose blue). You now have two options. The first is to create a new gradient layer above your halftone layer and then reduce the gradient layer’s opacity to a suitable level. Or, the second option is to put a gradient layer below the halftone layer, set the halftone layer’s blending option to “Darken“, and reduce the halftone layer’s opacity until you find a good level. Either way the effect will be similar!

And there you have it – a quick and easy halftone effect that you can use to make neat backgrounds!

Our Final Product

First off, I know that it’s easy to find semi-customizable GIF makers around the web. This being said, I think it’s important to understand how to make these yourself, as it allows for a degree of customizability that would otherwise be impossible with the online tools such as AjaxLoad (a great tool to make little AJAX loaders).

A Word of Warning

I love Photoshop with all my heart, but to be honest, creating animated GIFs can be painful and annoying. Things just don’t work the way you would expect, and if you mess things up bad enough, it means sometimes redoing the entire animation (aka make sure your history settings are set to longer than normal). What makes this worse is that changing small details can be really annoying because it seems like you need to do it across ALL your frames of animation. If anyone out there has any insight into this please let me know and I’ll update this post. Thanks

Step One: Create a Nifty Looking Loader Bar

First we’ll create a new Photoshop document with the following settings:

Next we need to create the background for the loading bar. When creating basic elements I generally try to use vector shapes whenever possible. This allows me to scale my work without losing quality and ends up saving me tons of time if I ever need to resize my document. Go ahead and create a vector rectangle shape (U key). Make sure that you’re making a shape, not a path. Your top toolbar should look like this:

Now, using the info panel for precision, make the rectangle shape exactly 260px by 30px and centre it on in the document. Another thing that’s nice about vector shapes is how easy it is to change their color. All you need to do is double click the color swatch located on the left side of the layer (in the layer panel). For this example I choose a light grey #d2d2d2. Your basic outline should look something like this (click to enlarge):

0

Next up we will add a subtle gradient overlay to give our loader background a little more depth. Make sure that foreground color is set to white (#ffffff) and double click on the layer  (again, in the layer panel) to pop open the layer styles dialog. In the Gradient Overlay section click on the Gradient dropdown to see all our possible gradients. In this instance we want to have a white to transparent gradient, which will probably be your second gradient swatch (you did choose a white foreground, didn’t you?). We will also be adding a small inner shadow:

If everything is working out, your image should look something like this:

OK, now let’s make the actual loader. I like the glossy candy-striped look, but you can really choose anything you want. Start by duplicating the layer we’ve been working on, and make sure that it is sitting on top of our background layer. Right-click on the new layer and choose “remove layer styles” to clear out our old styles and rename the layer to something like “loading bar.” I want to have a nice viberent red loading bar, so I choose #ff2f2f as my base color. Now we are going to add some layer styles that will give our loading bar that glossy look. Just like before, make sure that you have pure white selected as your foreground color. We are adding 4 different styles: an inner shadow, an inner glow, a gradient overlay, and a pattern overlay. If you want to use the same pattern that I’m using, I’ll attach it to this tutorial at the end.

Whew, I know it’s a lot of styles, but it creates a really nice effect! At this point you should have something that looks kinda like this:

Finally, you should reselect the background layer (the grey one) and transform the shape so that it sticks out 1px by on each side. This will give our loader a little border.

Step Two – Animating the GIF in Photoshop

With our loader in vector format, we can now start the process of animation. There are quite a few ways of doing this and tons of little tricks and tips, but if you’ve never animated a GIF before I’ll try and keep this easy (there is probably a faster/more complicated way to do this).

First things first, transform your loading bar until it is only a few pixels wide:

Now comes the annoying part. First you need to open up the animation window.

By default, your animation window is probably on the wrong setting (timeline mode) and we want to do this animation frame by frame. Adobe has hidden a huge menu in the animation window, it’s located in the top right corner, just below the close button. Click on it and select “convert to frame animation“. If you’ve done this right your animation window should now look something like this:

Now we need to put in some guides so that we can animate our loading bar with precision. The number of slices you put in will correspond with the smoothness of your loading bar. The more guides you place, the more frames you’ll need, and the smoother the animation will be. It doesn’t need to be exact, but try to keep it relatively uniform. Take a look at my example:

With our guides in place we can start the actual animation process. In the animation panel you can add new frames by clicking the new frame button (bottom of the animation window, just left of the trash icon). While clicked on the second frame, duplicate the loading bar, and horizontally transform it – moving the right side up by one “notch.”

Photoshop allows you to hide and show layers within the animation timeline, and that’s really the magic that will make our loading bar move. Click back on the first frame of animation and hide the duplicated layer we just created. Now when you click between the first and second frame, you should see the loading bar get bigger and smaller. It’s good practice to name your layers after their corresponding frames, so the first (smallest) loading bar layer should  be named “1st”.

Hopefully you’re getting the idea by now. Go ahead and finishing incrementing the loader until you’ve filled up the entire thing. It can be hassle to do all the frames, and you’ll find that Photoshop can be a little annoying. What seemed to work for me was to 1. add new frame, 2. hide the current loader step, 3. duplicate the hidden loader step, 4. unhide and transform the duplicated loader step… repeat, repeat, repeat… (If you do it in this order you won’t need to go back and re-hide the duplicated loader step in each animation frame). My animation took a total of 26 frames, yikes!

You can tweak the timing in the animation window – in my project each frame is set to take 0.07 seconds:

When you’re ready to export make sure you save it as a GIF and the animation should work just fine. The finished product looks quite nice: (for this example I’ve set the gif to automatically repeat, although you probably only want it to play once)

So thats it! As I mentioned before, there is probably a much easier and efficient method of doing this, but for simple animations this technique will work fine.

Feel free to download the source PSD and have a look for yourself!

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!