June 2003 Archives

Icon Styled Headings

Posted at 10:10 AM

Certainly one of the most powerful features of CSS is background or background-image. Holding interface images within one file makes for a very flexible and easily adaptable site.

One of my favorite methods is applying a background to certain heading tags within a document. Such as a left aligned bullet. Using background instead of hard-coding a bullet within each tag has obvious benefits. Don’t like the particular image you’ve used? Change one line in your CSS file and the entire site changes instantly. It also keeps the HTML code lighter by removing the need to repeat all those img tags for each heading.

As an example, I’ve just recently changed this site’s right column to render all h3s with the box icon aligned to the left of the text. The CSS goes something like this:

#right h3 {
	padding: 0 0 6px 19px;
	border-bottom: 1px dashed #ccc;
	background: url(../images/box_bullet.gif) no-repeat 0 2px;
	}

This will insure any h3 tags within the right column to show the box bullet to the let of the text. An appropriate amount of padding to the left makes this work. Also, the 0 2px portion of the background rule tells the browser to place the image 0 pixels from the left and 2 pixels from the top. This is key for lining up the image with the text just right.

The same idea can be applied to most anything — and especially nice for unordered lists (which was originally pointed out to me by Doug). Instead of using the normal list-style-image rule (which doesn’t always line the bullet image up correctly in every browser), try using background on li elements and lining up with the top/left pixel values.

15 Comments

iSight

Posted at 10:10 AM

Made it out to the Apple Store today and tried out an iSight camera with the new iChat AV. Real time audio/video confererencing. Nothing new there, but the incredible part is the simplicity of adding it to iChat. The quality of the video at full screen mode was also really impressive. The trick is, you have to know someone else who has one, but it could be rather handy for telecommuting. Also, it’s free to talk to someone anywhere in the world. Long distance companies are going to love this if the technology finally catches on.

The actual iSight camera itself was a bit larger than I imagined. I suppose that’s the tradeoff for the great video quality.

Add Comment

But it's a dry heat

Posted at 10:10 AM

Right. I don’t ever want to hear this excuse again. 110 degrees is hot no matter how you slice it. I might also point out that an oven also emits a dry heat, thereby cooking your food.

A great trip to Arizona though. We stayed halfway between Phoenix and Tucson in a rather depressing town just off of Interstate 10. The saving grace was the location though, and the fact that it is equidistant from the two cities.

We took in some of the most breathtakingly beautiful scenery we’ve encountered, and heat aside, Arizona is quite an amazing state. To give you an idea of the severity of the heat, much of the state was literally on fire.

Some highlights included Old Tucson (the site of hundreds of western films), Tuscon Mountain Park, Tempe, Goldfield Ghost Town, Superstition Mountain (where UFOs have apparently landed, and where lizard people have emerged from), Canyon Lake, Tortilla Flat and most importantly the Arizona-Sonora Desert Museum which was certainly the highlight of the whole trip. It’s an outdoor museum/garden/zoo with just about everything you’d ever find in the southwest desert. Highly recommended.

Add Comment

To the desert and... Goodbye, friend

Posted at 10:10 AM

We’re off to the wonderfully hot state of Arizona tomorrow (where it is approximately 563 degrees). Actually it’ll only be 106 tomorrow:

While Kerry is attending a seminar during the day, I’ll be looking for things to do in the desert. Although air conditioning is sure to be required. Hope to take some pictures.

Also.. bear with me as I get personal here (something I don’t normally do), it’s been a sad day, as I’ve had to say goodbye to one of the best friends I had while in high school. What’s most troubling for me is that I had not spoken to him in many years. Life happens, people go off and do things, but a tragedy makes us realize it’s important to keep in touch. So, this one’s for you, Athan.

Add Comment

Site news is boring... but

Posted at 10:10 AM

Writing about changes to a site is about as exciting as talking about vocal chords… but I’ve added a blue theme to the theme switching area in the right column, as well as some updated icons for each of the four themes. Yay. More colors to come… in case you’re tired of the old-school orange.

Add Comment

So long, Mac IE

Posted at 10:10 AM

As reported all over the place, development for the Macintosh version of Internet Explorer is over. Wow. It’s not a huge shock of course, with news that the standalone version of IE for Windows was ceasing as well. I, like many others, have quietly made the switch over to Camino or even Safari. It’s been so long since IE/Mac has been updated — the writing was on the wall. The release of Safari was further proof.

The good news is that both Camino and Safari are better browsers, building on the standards support that was introduced with the Mac version of IE. The bad news is that designers and developers will be building sites for the current crop of Internet Explorer browsers for quite some time. Longhorn (the next version of Windows) isn’t scheduled to appear until 2005, and will most likely be the next time that Microsoft updates their browser. Even then, most will not upgrade right away, and 90% of users out there will still be browsing with versions 5 and 6 of IE.

I suppose it could be worse… CSS support for browser versions 5 and 6, while still buggy in spots, is manageable, and real-world usage of CSS-based layouts is well underway.

Add Comment

Pants

Posted at 10:10 AM

So I’ve been thinking about pants lately. More speficially I’ve been thinking about pockets on pants. On your normal pair of pants, there are usually two back pockets. This is a customary place where one would keep his (or her?) wallet. If you think about it though, it’s not exactly a natural place to keep something — especially something like a wallet. I’m sitting on it all day.

Why do we do this? Because someone years and years ago decided to place two back pockets on a pair of pants. And then years later someone started putting their wallet in their back pocket. So now we’re to follow these people. But what if those same people put pockets at the back of the ankle? I’d much rather hold my wallet down there.

Add Comment

Mini Tabs: The UN-tab, tab

Posted at 10:10 AM

Let me preface this by saying that the methods used in creating the tabs below are nothing terribly revolutionary or original — but merely are demonstrated to share the idea.

I came up with these little “mini tabs” for navigation while working on a few projects. They’ll probably appear in the real world eventually. They are generated with pure CSS of course, and require no images. A neat little pop up effect for a selected navigation item:

Tested in Camino, Safari, IE5/Mac, IE5,6/Win. Take a peek at the working example and code if you are interested.

19 Comments

5 air conditioned days in Miami

Posted at 10:10 AM

I’ve just returned from Miami where I was working at Fast Company’s RealTime. The whole event happened within the Loews Miami Beach Hotel — a nice place right in the Art Deco section of town.

I didn’t get out to see too much, but snapped a few photos of the hotel area and surrounding blocks.

Heath Row blogged the speaking sessions (man can he type fast). And also, there are some cool, downloadable PDF posters available that were created right on the spot by Becca Rees (ZipFly) using quotes from many of the speakers. It was fun working with a lot of talented, creative people.

Now time to sleep, and dig out of a mountain of email and work.

Add Comment