Ever wondered if you could get rid of the boring gray colour behind your canvas in photoshop? Of course you can! Ever since PS 4 you're able to change the background-colour:

1. Select your paint bucket tool
2. Pick a nice foreground colour
3. SHIFT+Click on the background to change it's colour.

Oh, and this might be useful.. At least it is to me!

Hide the toolbar, layer palette and all other windows

Ever tried pressing TAB? It hides all the windows.. They always get in my way when I'm messing around in photoshop.

The finished result will look like this Arrow

For this mini-tutorial I'll be using an image that looks like this:

When we're not hovering over the link, we want the top image to be displayed. And if we are hovering, show the bottom image. They are both 16px high. Together forming an image of 32 pixels high and 16 pixels wide.

 
a.sprite {
background-image: url('arrow-tut.gif');
background-repeat: no-repeat;
background-position: 0 -1px;
 
display: block;
 
width: 16px;
height: 16px;
 
padding-left: 16px;
margin: 0px;
}
a.sprite:hover {
background-position: 0px -17px;
}

That's the actual CSS code I'm using. Display:Block so I can set a defined height (alternatively, use line-height: 16px;)

What the :hover tag does, is shift the background out of position, so the lower 16 pixels of the image are shown, rather than the top 16 pixels.

You can actually integrate the .sprite class to be more general, allowing you to use different kinds of pictures.

All you have to do is leave the background-image: url(); out of the stylesheet and define it inline:

 
<a class="sprite" style="background-image:url('arrow-tut.gif');" href="http://kalkran.com/">Arrow</a>

You could also use bigger images, with more little pictures on it, and shift it to the correct image for each different state.

"The time to acquire a target is a function of the distance to and size of the target."

This means that, when the distance becomes smaller and size becomes larger, then the time taken to acquire a target(link) will decrease. You can apply this to links really neatly. Let's see what I'm talking about:

In which the right navigation is, of course, far easier to navigate. The links you can click on are bigger (and that is obvious thanks to the "underline"), when you hover over a link, you are not obscuring the link text you might want to click and you're also bringing some structure into your webpage.

The CSS

 
#sidebar li a {
display: block;
border-bottom: 1px solid #CCCCCC;
text-decoration: none;
width: 190px;
}
 
#sidebar li a:hover {
background-color: #CCCCCC;
color: #555555;
}

These lines make the links display in a block fashion: You can make them any size you wish, and they'll have a line-break before and after them. They also add a nice border below your links, and make the background darker when you're hovering over them. And lastly, it sets a width, so they'll have a fixed width, acting as the block you can click on.

Let's look at a real-world example

The image shows a 'bad' navigation, the links are really just as big as the text that's enclosed in them. For an example of 'good' (easy) navigation, just look on the right side, that's much easier to navigate. Or look below:

That looks much easier!

The Caveat

If you decide to use this method, make it clear to the user you ARE using bigger links, nothing is more surprising then mousing over, what seems to be, white-space and suddenly hovering over a link! That's why I added the border-bottom, making it easy to spot where the link ends.

Legend:
Purple = Margin
Red = Border
Orange = Padding
White = Actual content

Source (original file): CSS Box Model

Everyone knows you can do

 
border: 1px solid black;

Yeah?
Okay. That's all nice, but what if you want a little white border between your actual border and the image to make it stand out even more?!
It's all possible with the power of CSS! Just be creative!

 
img {
padding: 1px;
border: 1px solid black;
background-color: white;
}

That would make all your images one pixel larger, add a black border, then a white border, and finally the image itself. For example:

First one being a dashed orange border and second one with a 1px white border between the actual border.

This made me think of a post to explaining the CSS Box Model. Coming up next...!

Doing this is fairly easy with the help of CSS.

(Click!)

Bug ExampleWow! Guess what?! :-)
Okay! So, think of something you want to show off on your site, maybe a ribbon to show you're against the war in Iraq, maybe a bug with a link to a w3c validator to show your site is valid (X)HTML and CSS. Or maybe just show off your tagline.
There's a little bug in the bottom left right now! :o

Okay. Now, where would you like it to be? top left? top right? bottom left? bottom right? Just apply the appropriate tags.

We want the image to be fixed in place. So we'll add

 
position: fixed;

Other arguments for position could be

• absolute (relative to the page)
• relative (relative to it's original position)
• static (the default. Element will just be wherever it would occur normally)

Having set the positioning type, we can now proceed to tell it where we want the bug to be. For this tutorial we'll put it on the bottom left of the screen.

 
bottom: 0;left: 0;

This tells it to set the distance to the bottom and left borders of the viewport to zero.
That's pretty much all you need, further styling is up to you!

The source to my little bug would be:

 
<p class="bug"><a href="#">Back to top</a>
 

And the css attached would be:

 
.bug {
	position: fixed;
	bottom: 0;
	left: 0;
	background-image: url('img/bug.png');
	background-repeat: no-repeat;
}

(Click for a larger view)

Full tutorial after the jump.

First of all, start off with a document with a width of 100 pixels. Do this by pressing CTRL+E, typing in 100 in the width box and any value in the height box (Just how high you want your gradient to be, I'll be using 300 in this tutorial).

Okay, we have an image with width 100 and height 300 now. Now fill the background with a color, I chose blue. Then draw a diagonal line from one of the corners to the opposite one, Like so.

The diagonal line is there to ensure a smooth, linear, transition from blue to yellow. Now hit CTRL+W and scale the width down to 1%

Then press CTRL+W again, fill in 500%, do this a couple more times and you'll end up with a nice, linear, gradient.

I've included a few more results below:

Sorry, I just had a lot of fun doing it =)