Archive for the ‘howto’ Category

Fixing Font Issues in OS X Leopard

Wednesday, December 12th, 2007

I recently upgraded my computer at work to a new iMac running OS X Leopard. I’m very happy with the new system, but today I noticed something strange with how fonts were being displayed on some websites. For sites with light text on a dark background the fonts were displaying as bolded, or “bleeding” onto the background in a not very smooth manner. I tried going into System Preferences > Appearance and adjusting the Font Smoothing Style, but this didn’t seem to have any affect on the problem. (more…)

CSS Facelift for Facebook - Part 1

Tuesday, June 12th, 2007

UPDATE: These techniques will no longer allow you to customize your Facebook profile.


Facebook now has over 24 million active users keeping in touch with friends and colleagues. Some people are predicting that it will become the de-facto social networking tool for the web. It’s certainly a very useful service, but as I spent more time with Facebook looking at all those identically designed profile pages I started to miss the individuality that accompanied personal websites and blogs.

Let’s look at how you can take a Faceook profile and using a bit of CSS and the new Facebook Markup Language, create something a bit more personalized. In Part 1 we’ll look at how to start adding your own xHTML and CSS.

(more…)

8 First Steps to Fight Cyberbullying

Thursday, March 29th, 2007

Today is Stop Cyberbullying Day, and like I said yesterday I’m very angry about what happened to Kathy Sierra, and other people who have suffered abuse from Cyber Bullies, stalkers, and trolls. Rather than just write further about how awful cyberbullies are, I’ve decided to offer some tips for helping people fight back.

(more…)

SIR Image Replacement

Monday, July 10th, 2006

CSS techniques for replacing text with an image have been around for a few years, allowing web designers greater options for styling text on a page. Early approaches turned out not to work as expected with Screen Readers, making the text less accessible than normal. In response, a variety of different approaches have been suggested—many involving extra span tags, lengthy CSS, or both.

Here’s my suggestion for an Image Replacement technique that’s accessibe, requires no additional HTML tags, and uses a tiny amount of CSS.

Read the article

CSS Drop Shadows

Monday, June 12th, 2006

The CSS2 text-shadow property makes it easy to add a drop shadow to a web page’s text, but so far it’s only supported by the Safari browser for OS X. Today we’re going to create CSS drop shadows for other browsers, including Firefox.

The text-shadow property has been around for a few years, allowing you control the colour, offset and blur of drop shadows below elements on your page. Although not widely supported, some designers have decided to use CSS text-shadows anyway, even if it only enhances their design for a relatively small number of users.

Read the article