Isaac Keyet

Part 2 out of 2 (Part 1)

The only time a web designer notices the Outline property is when you want to disable it, and you’re wondering how to do so or if it’s even possible. But you can actually use the property to do very clever things.

At a first glance, the Border and the Outline property look very much alike. They share the same rule structure, and they both put a border around any object you want. But there are two fundamental differences.

1. When the browser calculates the width of a floated object, it takes into account Width, Padding and Border.

Notice how setting a border adds to the total width, while the outline doesn’t.

2. Since borders take up space, you can have problem aligning elements on a webpage using borders. However if you use an outline instead, the “border” will just be a layer on top of the image and won’t push your element anywhere. Notice how the second image’s inside border still lines up with the text.

This is very useful for registration processes, if you want to show a field that needs to be corrected: Instead of applying a border and having the textfield move X amount of pixels horizontally you can apply an outline!

How to use Outline, examples

Example:
.classNameHere {
outline: 1px solid #000000;
}
Example 2:
.classNameHere {
outline: 2px dotted #FF66CC;
}

I hope you enjoyed this little introduction to the Outline CSS property!

I just got done with it, and it’s just for fun. If you look in this blog’s sidebar you’ll see a shiny iPhone with my latest visitors in it.

The reason I did it was just because the new MBL widget looks so much like an iPhone. Especially if you’re using a black and white color scheme for it, which I did. Anyway, I hope you like it!

Recently I faced the problem of either creating my own 16 square pixel icons, or use others. I started looking into how other services have solved the problem, and I realized after looking at Socialthing! that the best solution is also the most obvious and simple one: Just import the site’s own favicons!

Here are some examples of great 16×16 icons from well known sites:

• Facebook:
• Last.fm:
• CNN:
• Yahoo!:
• Twitter:

Almost all bigger sites out there have a favicon, so to find and download an icon just do the following:

1. Enter root web adress in your browsers adress field: http://www.sitename.com
2. Apply /favicon.ico to the adress, like so: http://www.sitename.com/favicon.ico
3. Hit Enter to go to the adress, and there you are. This is the perfect 16px icon for the website you’ve entered!

I’ve had this idea for a long time, to create a menu that would look animated but still being all CSS. The trick is to use the movement of the mouse over different objects to trigger other elements to change. Thanks to normal child selectors, nested elements and some padding animation is actually possible. The theory behind this is that the 1st element sets the size of the visible menu item, the 2nd changes this to a higher value, and so forth. You can also put in color changes and whatever else CSS you might want!

This is just a proof of concept, and I have no idea if it actually works in all browsers. I’ve developed this little example for Firefox 2. Mouse over the menu slowly and see what happens…

Confusing? I put in some borders in the example below, in an attempt to show off the theory behind it..

Hope you like it

I don’t know if this is common knowledge among webdesigners, but this was all new for me. If you don’t select a color for a border, just say “border: 1px solid;” (for example) it will inherit the color of the current object. I’ve checked this in Firefox 2 and Opera 9, and it really works here.

Very interesting, at least I think so..