Michael Doyle | Blog

CSS – CSS Reset

There are many hacks to get past cross-browser compatibility problems. I've run into way too many of them, even though I regularly check sites in both IE and FF. One of the reasons for the problems is that some browsers add padding and margin sizes to certain elements. To remove this Yahoo has a utility called Reset CSS. IT removes all added borders, margins, everything to level the playing field so you can precisely define how you want elements defined without anything added by a browser.

UPDATE: After reading some of the comments and advise on resetting, a lot of people have highly recommended Eric Meyer's CSS Reset stylesheet.

Photography – Create your own Bokeh

This article explains how to manipulate bokeh.

Windows Utility – Visualise your HD

I've been using WinDirStat for quite a while now. It's a windows utility which analyzes your hard drive, graphically displays what files it's made up of and how big those files are. It's a really good utility to find some big files that may be taking up too much room in a dark corner of your PC.

CV writing

Here's an article which provides 6 words to make your cv/résumé stand out.

CSS – Web Text Visualizers

CSS Font and Text Style Wizard is a handy online tool that shows you the different font attributes in CSS and shows how they affect text.
Typetester is a similar tool, but with further functionality.

Windows Font Explorer

Windows Font Explorer is a small utility that allows you to scroll through all your installed fonts and see how they look in different sizes and applied to different text.

CSS – CSS Sprites

I remember when I used to do the old javascript onMouseOver and onMouseOut to get those amazing image rollover buttons to work. That was back when I had a 56k connection, and normally I rolled over a button and waited for it to load to see it's rollover state. Those days are long gone thanks to CSS sprites.
Basically, say you have one rollover button and want to have 3 states for it, normal, hover and active. You create 1 image file with each of these images in the one file. Then you specify (in CSS) what co-ordinates of the image to go to based on the mouse state.
So you have one image file loaded when the page is accessed, only one http request and less resource usage.
Here's the smashing magazine article explaining everything you need to know.

Flash – Transparent Backgrounds

Trying to finish my Graphic design project tonight and discovered how to make a swf with a transparent background. HTML code is:

Add these parameters to the "param" tag:

param name="wmode" value="transparent"

Add this parameter to the embed tag:

wmode="transparent"

So the full code I used to embed a swf file called "brain.swf" is:

<object width="216" height="144" data="brain.swf" type="application/x-shockwave-flash"><param name="wmode" value="transparent" /><param name="src" value="brain.swf" /></object>

This works in Firefox 3 and IE 7, haven't tested it out on any other browsers yet. Flash 6 or higher is needed.

Web Design – Web background tutorials

Here's an excellent list of resources from noupe

Web Design – Background Generators

Here is a list of 15 different background pattern generators.

I threw one together quickly:

I made it with http://bgpatterns.com/

Colour levels are way off, and it isn't optimised for use, but it's a good example of what can be done in 5 minutes