Sweet Looking Headings with CSS

As I’ve been playing more with Safari lately, I’ve found that many good looking web sites add a bit of something extra for Safari. They use CSS to add a drop shadow to certain elements of the page. Take a look at this example from LightHouse (Firefox 2.0 on the left, Safari 3 on the right):

Firefox vs. Safari rendering of the CSS 'text-shadow'

From Word Up! Creating Dynamic Visual Presentations:

A drop shadow on your text helps set apart your words from their background thus making them easier on the eyes.

And you can see that in the example above. Adding the slight, but dark drop shadow to the white text on the blue color makes it more readable. It’s a nice touch that makes the UI feel like it has an extra set of polish. The CSS is simple enough:

text-shadow: 2px 2px #055B98;

While most mortals won’t get to enjoy the effect, you don’t develop just for mere mortals, do you? Kick your game up a notch.

Where did my Design go?

So I turned off my CSS today. Here’s the party line:

To know more about why styles are disabled on this website visit the

Annual CSS Naked Day
website for more information.

This is kinda cool, since I prefer to work with sites that focus their HTML design around their information. This site’s HTML is obviously designed by WordPress (for the most part). But it has some of the same elements of information design that are discussed in Mark Pilgrim’s Dive Into Accessibility.

In many respects, the concept is simple. Your content should be straight forward, and use decent structural techniques to house your data (<h3>’s, <p>’s, etc), and your stylish things (layout, colors, fonts, etc) should be injected by CSS. Turning off your CSS can help you see that. Turning off everyone’s CSS helps you see how others do it. You don’t just need to wait for one day a year to do this, though. You can use the Firefox WebDeveloper toolbar to disable CSS on any site you go to. Read more about CSS and web standards.

Design Freedom: Challenge Barriers

I like to challenge barriers. I think part of it is that I’ve had so many of my own challenged and under scrutiny, they fell. That opened up worlds hitherto unexplored.

Design is like that. Many people hold to current limitations or artificial constraints that bolster the status quo. Challenging those assumptions almost always leads to greater knowledge. Either I learn something about the system that I didn’t know. Or new vistas open up and widen our range of viable design options.

True knowledge engenders design freedom.

Zdot Podcast: Why You Should Use a Money Class

Listen now with the Flash player.

Download Why You Should Use a Money Class.

This week is focused on some of the business constructs useful in your code.

Show Notes

Most of the ideas from today’s show came from the following sources:

Flashy Updates

Not only has Hibernate released a new stable version, but I really like the way their “Recent Site Upddates” table looks. It’s all tables and CSS, using mouse events to change the row colors. It’s compact, and pretty. I like it.

I need a Design Library

I think it would be really cool to have a set of personal analysis patterns
that I could choose from when creating applications. These could include
solutions I’ve found helpful for:

  • Build systems
  • Payment tracking
  • Email generation
  • Project management

They should be searchable, and perhaps include UML designs.