Design Meme » Web Design Tutorial

New Article on CSS Rollovers

Stuart Robertson — Thu, 17 Apr 2008 02:47:31 +0000

In addition to working in web design and development, I also teach a few different web design courses. I usually refer my students to intermediate to advanced resources like A List Apart, or Think Vitamin. To help people get to the point where they’ll find those sites helpful, I’m going to start posting some short articles on more basic, but still helpful, techniques you can use if you’re just getting started.

The first of these new articles to help you learn web design is about a important and frequently requested technique: Rollover Images with Cascading Style Sheets

Let me know what you think — leave a comment on the article, or a comment on this post and let me know what other web design tutorials you might be interested in.

SIR Image Replacement

Stuart Robertson — Mon, 10 Jul 2006 12:54:26 +0000

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

New Tutorial: CSS Curly Quotes

Stuart Robertson — Tue, 03 Jan 2006 20:57:40 +0000

It’s been a while since I posted a CSS tutorial here, so this feels like a good way to be starting the New Year.

Simon Collison recently explained how to create Swooshy Curly Quotes Without Images using CSS. It’s a nice technique that works cross-browser, but you have to add span tags to your markup for it to work.

I’ve written a short article outlining an alternate method for creating CSS Curly Quotes that requires no changes to your markup, and works in modern CSS2 compatible browsers like Firefox. Simon’s technique is cross browser, while my approach gives your cleaner markup. I can think of reasons to use both.

Read the article