Kalkran.COM

Change the background colour

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.

Since this seems such a "hot" topic these days, I figured I might as well spend a couple of minutes and write a quick tutorial on what they are and how to make them work.

The finished result will look like this Arrow
Read More...

When I was stumbling around this morning, I came across a site which mentioned Fitt's Law:

"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.

Read More...

I was drawing up a box model in paint, when I realized I should be able to make a perfectly fitting box model in CSS itself!

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

Source (original file): CSS Box Model

Just a quick tutorial to inform you about the border property!

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...!