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!
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:
Enter root web adress in your browsers adress field: http://www.sitename.com
Apply /favicon.ico to the adress, like so: http://www.sitename.com/favicon.ico
Hit Enter to go to the adress, and there you are. This is the perfect 16px icon for the website you’ve entered!
Some things are just simply awesome. This plugin for Wordpress posts your most recent blog posts to your twitter account (well, the title and a link at least). It was really easy to setup and hopefully works as it should, too. If you want more content on Twitter and blog often, this is for you!
It was finally time to check out Twitter. I started using my account actively a week or so ago, and it’s been a blast. Although there are whole new chemics I need to learn about the in Twitter community (and especially the Boulder scene), I feel like almost everything is accepted, so possible mistakes goes unnoticed.
Intense Debate incorporated Twitter today. It’s either your latest tweets or a personal message that can go in your avatar menu now. I suggest you head over to the Intense Debate Blog right away and read more. Plus there’s a shiny screenshot there!
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..
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.
I’m not very experienced in Flash. I can do basic movies with tweens, some playback buttons and maybe one or two animations, but that’s pretty much it. For a recent project however, I had to do a pause button.
Now this might seem like an easy task, but it isnt. A pause button must both pause and play the video. I looked around the web for some easy solutions, but couldn’t come up with anything useful (although I’m sure there are guides for it out there, I just didn’t look hard enough..). This is what I came up with:
TO CREATE A PLAY/PAUSE BUTTON
1. Create a movieclip called “playpause”. Put this movieclip anywhere in your main movie.
2. Create a button in this movieclips first frame, call this button “pause”.
3. Now go to frame two, create a keyframe and another button, call this one “play”.
4. Create another layer, call this layer “script”. Put the marker in the first frame and open Frame Actions. Type in “stop();”. Create another keyframe, and do the same thing again.
5. The buttons need some actionscripting too to be able to work. They need to both make the other button display and to play and pause our movie, which is the main target. I found a way to do this really easily. Click the button “pause”, and open Button Actions. Then type in:
on (release) {
gotoAndStop(2);
_parent.stop();
}
The first line displays the play button, the other one pauses the main movie. Select the other button, “play”, and type in:
on (release) {
gotoAndStop(1);
_parent.play();
}
Save the document, press Command+Enter (PC: CTRL+Enter) and make sure it works.
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.