Article Archives

17 comments

Five Questions with Jeff Starr

I first knew of Jeff through his website Perishable Press, which has long been a fantastic web design resource blog focusing on CSS, WordPress, and a lot of hard-to-find-elsewhere .htaccess stuff along with a good amount of Jeff's personality (which I consider to be a prerequisite of any good blog) . As you may know, Jeff and I co-author Digging Into WordPress together, both the book and the blog. Jeff is really a get-things-done kinda guy and I've always …

44 comments

Illustrators I Like

If there is one (non-superpower) skill I wish I could acquire without having to spend thousands of hours practicing, it's illustration. I took a bunch of drawing in college but I was never that great and I've let myself go out of practice. I look at a lot of illustrators work today and it makes me jealous! Illustration can really kick up the awesomeness level of any project.

I also find that Illustrators tend to take good care of their …

61 comments

New Poll: Action Verb Clarity

Let's say you were writing some text-only documentation describing how to do something on a website. The idea was that you came to a point where someone was presented with a list of users and their job was to select one, then there was a button below that they needed to interact with in order to get the job done. You decided "Select a user" was clear enough because of good user interface. But what is the best way to …

27 comments

Poll Results: How Many Websites Do You Launch Per Year?

  • 20+ (14%)
  • 10-20 (12%)
  • 5-10 (24%)
  • 2-4 (31%)
  • 1 (13%)
  • 0 (6%)

I'm probably in the 2-4 camp myself, which is the winning choice. I don't freelance, but I do do sites for family and friends once in a while. Even when I was at Chatman Design the vast majority of work we did was on sites that already were launched. This data would be more interesting if it was cross referenced with what kind of job you have. I …

12 comments

On Boagworld

In more podcast news, I got to be on Boagworld as well! I was interviewed by Paul Boag himself in the final interview ever on Boagworld. Bittersweet, isn't it? We talk about CSS-Tricks, CSS3, Flash, and you know, just some general back and forth about stuff. …

6 comments

On WordPress Podcast

I got to be on the WordPress Podcast with Joost de Valk yesterday. It's already out and you go to the blog post (with player and show notes), or snag it from iTunes.

We had fun talking about Digging into WordPress, WordPress 3.0, CSS-Tricks, and more. My voice is a little booming and heavy on bass (my bad) but I just turned the bass way down to listen to this track and it sounds fine.…

27 comments

CSS for Blockin’ Stuff

I am not a big proponent of ad blockers. Besides than the fact that this site has ads on it, I generally just don't mind it. I am a big proponent of you doing whatever you want to on your computer to control what is displayed to you on your screen. If you want to use user stylesheets, ad blockers, flash blockers, or whatever else, more power to you. Here are some CSS projects intended for blockin' stuff.…

34 comments

Feature Table Design

I ran into the feature table design from Shopify over on Pattern Tap and I was like DAMN SHOPIFY, that is one sexy table. I was inspired to try and replicate it. First in Photoshop, then in HTML/CSS. Recreating cool stuff you find on the web is definitely an excercise I recommend (a few days after, I read this - couldn't agree more). As these exercises typically do, it lead me down some interesting paths.

Here's my knockoff:

View Demo

109 comments

Should you use a template?

I absolutely think that beginner web designers should use templates. And by templates, I mean something that you might buy off ThemeForest or other template selling service. Here are a few reasons why:

  • Tweaking = learning. Templates need to be changed/altered/tweaked. That's the whole idea of a template. When a beginner designer does those things, they are learning how code works. Tweaking WordPress themes is exactly how I got into web design.
  • Quality. When the site is "done", a beginner
54 comments

Photography and CSS

It sure seems like a heck of a lot of web designers are also photographers, doesn't it? And by "photographer", I mean they own a DSLR and heavily consider aesthetics when taking a picture. Why the overlap of interests? Well clearly web design often incorporates photographs. Maybe we like to have the equipment we need to take decent pictures for websites and it grows from there. Maybe it's because photography is a lot like design. You have a canvas of …

41 comments

Yay for HSLa

Huge sogging longbottoms? High strength low alloy steel? NOPE, we're talking Hue Saturation Lightness (and alpha) and it's a way of declaring color in CSS. It looks like this:

#some-element { background-color: hsla(170, 50%, 45%, 1); }

It is similar to RGBa in that you declare three values determining the color and then a fourth value for its transparency level. You can read more about browser support below, but it's basically any browser that supports rgba supports hsla too.…

79 comments

To Wufoo

When I decided to leave my last job, I decided I was going to leave at the beginning of the Summer. I was going to bum around the Summer not doing much, maybe even extend that for a whole year. It sounded pretty appealing. There was very little that could have strayed me from my awesome plan. I even got to turn down some pretty swell job offers.

Then one thing came along that turned that whole idea around. Something …

46 comments

Ajax Image Uploading (With Less Suck)

This technology demo is courtesy of ZURB and the post was co-authored by ZURB and Chris.

How do you upload images now?

You select a file and click upload. Simple right? Except once you select your image you can no longer see what was selected. The name of the file is at the end of the input, and if the input is short, or the file path is deep, you're not going to see anything useful. You forget what you …

55 comments

Instant Productivity

All jobs are a series of tasks needing to be completed. Let's look at a construction worker. Today she needs to bust up a bunch of cement. Here is one path of action:

Put hardhat on
Start jackhammer
Bust up a bunch of cement

Here is another way she could have gone about it:

Scout out area
Determine weather conditions
Make labor assessment
Evaluate different jackhammer models
Stretching and breathing exercises
Get third party opinion
Coffee break
Put hardhat on…

25 comments

NetNewsWire Theme: Fixed

I love me some Google Reader. I got all my feeds up in there and it's like having the longest most interesting newspaper ever. It brings me great pleasure to know that when people build all these RSS reading applications, they are essentially just different user interfaces for Google Reader. That way we can play with lots of different ones but still maintain a unified home for our feeds.

The web interface for Google Reader is pretty good. They …

62 comments

Transparency in Web Design

How is it done? Let's take a gander at four different ways. Each of them handling the illusion in a different way, and each completely appropriate depending on the situation at hand.…

79 comments

CSS3 Button Maker

Drag things, pick colors, make a nice class for your buttons... introducing the Button Maker.


Boy, that's a nice button right there.…
98 comments

New Poll: How many websites do you launch per year?

There is a new poll in the sidebar. RSS readers, you'll have to make the jump. The question is:

How many websites do you launch per year?

The idea is to gauge how many different projects you all are involved with that actually launch in a year. I'm sure some of you work on sites that we launched long ago and you just work on maintaining and growing them. So if that's the only web work you did this year, …

80 comments

Poll Results: Server side language of choice?

Over 18,500 people voted on this last poll, making it the most voted-upon poll in this site's history, when I asked:

What is your server-side language of choice?

Now I'm definitely a front end guy writing about mostly front end stuff. Because of that I kind of assume most of you folks are too. That doesn't mean we don't care about or have an opinion on server side languages too, just know that these poll results are probably indicative more …

27 comments

Parallax Background of Stars (plus CSS3 keyframe animation)

This idea was originally published on 3/12/2008, where you had to resize the browser window to see the parallax. I updated it on 4/6/2009 to utilize jQuery to move the stars automatically. I'm now updating it again to use CSS3 to animate the stars.

There is some debate if these fancy transitions and animations that CSS3 bring us belong in CSS. It might be argued that things moving around like that is "behavior" and not "design" and thus belong in …

112 comments

Efficiently
Rendering CSS

I admittedly don't think about this idea very often... how efficient is the CSS that we write, in terms of how quickly the browser can render it?

This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Mozilla has an article about best practices. Google is also always on a crusade to make the web faster. They also have an article about it.

Let's cover some of the …

74 comments

RGBa Browser Support

This article was originally published on February 2, 2009 and is now being updated to clarify the concept and update the information for modern browsers.

RGBa is a way to declare a color in CSS that includes alpha transparency support. It looks like this:

div { background: rgba(200, 54, 54, 0.5); }

This allows us to fill areas with transparent color; the first thee numbers representing the color in RGB values and the fourth representing a transparency value between 0 …

27 comments

We Love LOST

Tonight is the next-to-last episode ever of LOST. I've been a fan since the start, watching the released seasons several times with different friends over the years. Even powering through the Season 3 slump =). Just for fun, Richard and I chucked together a little one page app we've called We Love LOST.

66 comments

Pointer Events & Disabling Current Page Links

It is a long-standing web design standard that the logo in the header area links to the homepage of the site. Another standard is that when displaying the navigation of a site, to highlight in some way the "current" page, if it is present in the navigation. I think those are great standards. The logo-link thing is so ubiquitous that your users will likely automatically try it if you've coded it that way or not. The current navigation thing is …

66 comments

Circulate

I had the occasion come up recently where I needed to animate something in a circle. It never occurred to me until then that there wasn't an obvious solution to this already with jQuery. So I figured out a way, and made a plugin out of it.

This unicorn can fly friggin backwards with this plugin.

View Demo   Download Files

25 comments

Reduced Test Cases

If you are having trouble with something while building a webpage, the most helpful thing you can possibly do is start building a reduced test case. "Trouble" could be anything: the CSS isn't doing what you think it should, the JavaScript isn't behaving right, there are cross-browser issues, etc. In the process of creating a reduced test case, you will either:

  • Find out it was a mistake you made, help you isolate it, and fix it (or have a great
69 comments

Specifics on CSS Specificity

This article was originally published on August 11, 2008. I am updating it now to fix some inaccuracies in how this concept was presented.

I've never specifically covered this subject before. (rimshot!)

The best way to explain it is to start with an example of where specificity gets confusing and perhaps doesn't behave like you would expect. Then we'll take a closer look at how to calculate the actual specificity value to determine which selector takes precedence.…

105 comments

Dynamic Page / Replacing Content

This article is an update to this old article, which had an ugly demo and a variety of techniques in it no longer probably considered good practices. This new demo is much cleaner, up to date, and fuller featured. Because the old article was a bit of a different scope, I'll leave it alone, just refer to this one. Update January 2013: There are better practices now, detailed here.

Let's say you wanted to make a website where …

92 comments

Organic Tabs

This article was originally published on October 27, 2009 and is now being updated to 1) be turned into a jQuery plugin 2) have multiple demos on one page 3) utilize jQuery event delegation and 4) prevent animation queuing. Edited again on June 13, 2011 to use jQuery 1.6.1 and HTML5

Have you ever seen a tabbed content area in a sidebar that was a little "jerky"? The jerkiness can be caused by a bunch of things, like the content …

38 comments

Table Row and Column Highlighting

In mid-2009 I did a screencast about tables which featured how to do row and column highlighting with jQuery. The method in the video isn't nearly as efficient as it could be, so this is an update to that. Shout out to Bronislav Klucka who contacted me about the idea.

Attaching events to table cells is the quintessential example, and also read like a history for event handling in jQuery.

  • Original demo (version < jQuery 1.3 ) - Using .hover() on every single <td>
  • Live demo ( jQuery 1.3 < = version < jQuery 1.4.2 ) - Using .live() on <td>'s
  • Delegate
26 comments

May is Maintenance Month

There are over 600 blog posts on this site over the course of nearly 3 years. Some of them are... better than others. I think it is the responsible thing to do is try to keep that content current and in good working order. So I'm going to dedicate a full month to it and declare May "Maintenance Month." I have identified a good number of articles that I would like to go back and revisit. Some because technology has …

32 comments

jQuery UI’s Position Function (plus, MagicZoom from scratch)

Knowing how to position things where you want them is one of the most important tools in a web designer's toolbox. Understanding page flow, understanding everything is a box, understanding floats, etc. Once the basics are learned, a common question for an intermediate designers is how to position elements relative to other elements. The standard CSS solution for this is to use the ol' absolute positioning inside relative positioning trick. In a nutshell, you can use set relative positioning …

48 comments

Quick Critiques with CritiqueTheSite.com

I made a thing. The idea is to have a super-quick, nearly mindless way to get a critique-based conversation thread going based on any URL. See:

http://critiquethesite.com/css-tricks.com (it works best with big wide monitors, since there is the fixed left comment area, then the entire site to the right)

You could even use a path to an image file for a unique critique on that.

If you want to get notifications for any new comments on your specific URL, just …

24 comments

Gift Message Printer

We have a client who sells a product in which customers specify a gift message when they check out. The site has been very successful for them and orders are coming faster than expected. The have been hand-writing the notes thus far, which, in nerd words, doesn't scale well.

When I heard about the problem, the obvious solution was to stop handwriting them. Maybe they'll lose some of that homegrown flair, but it's also less weird. This isn't a handwritten …

26 comments

Loading Dots jQuery Plugin

Loading.... It's a design pattern we've all seen before, because it's just good user feedback. This is a quick jQuery plugin to apply it to any element when called (exactly in the middle of it).
53 comments

Child and Sibling Selectors

Do you know what the difference between these selectors are?

ul li { margin: 0 0 5px 0; } ul > li { margin: 0 0 5px 0; }

I'll admit it took me longer than it probably should have (way back when) when I was learning the basics of CSS. In both cases, they are selecting list items that are children of unordered lists. But there is a difference between children and descendants. …

88 comments

Why Containers Don’t Clear Themselves

One of the hurdles (and "ah-ha" moments) in learning CSS is this business about clearing floats. If you have no idea what I'm talking about, check out the classic All About Floats.

I specifically want to talk about the issues of "collapsing", that is, how elements that contain floated items don't take those floated items into account in calculating their height. For example a parent element that only contains floated items will have a zero height. This is …

30 comments

jQuery CSS Abstraction

It should be said, first and foremost, that you should try to keep your styling and your JavaScript away from each other. If you want to change the style of an element with JavaScript, add (or remove) a class name from the element. Then use that class name as your hook in the CSS to affect the styling.

However, there are times when you need to apply styling within JavaScript. jQuery has a function just for it:

$("#thing").css("margin-right", 0);
31 comments

CSS Secret Message Generator

I know ya'll were just thinking to yourselves: man, I hope Chris posts some super nerdy article today with some nearly-useless technique that if I talked about in public would clinch the fact that I'm not getting laid anytime soon. Don't worry, I got your back! Check out the CSS Secret Message Generator.

Using it is (I hope) fairly straightforward. You click some letters, then those are the letters which secretly reveal themselves when the text is selected.

There …

43 comments

More than one way… (delegate edition)

There was a question in the forums about affecting non-hovered items. The effect they were after is that they had an unordered list of items and when they were rolled over, they would all dim (lower opacity) except the one hovered.

This can be done with CSS, using pseduo-selectors.

ul li:not(:hover) { opacity: 0.5; }

However we know that pseudo-selectors don't have very good cross-browser support. And for that matter, opacity doesn't either. jQuery is pretty good at mitigating …

17 comments

jQuery Conference + Win a Ticket!

I'll be speaking at the upcoming jQuery Conference. It is in the San Francisco Bay Area (Mountain View, at the Microsoft Campus) on April 24 – 25, 2010. Just check out that link for all the details. It looks pretty great.…

43 comments

Slot Machine Tabs

I was looking at the features page of a web service called Fluxiom. I haven't used the product (although it looks pretty nice and might be good few a couple of our clients). It's the tabs on that page that I thought were pretty neat. As you click a different tab, the three columns of text fly upward at different rates and are replaced by new columns. It looks kinda like a slot machine. I didn't investigate too deeply how …

33 comments

The Abstraction Point

Reader Joe Bob sent me a link to IxEdit to ask what I thought. I hadn't heard of it, so I checked it out. They have a six minute video you can watch which explains it pretty well. In a nutshell, it's a GUI editor for creating interactive stuff on websites. Click an element, tell it how you want it to behave. Think of it like CSS Edit for jQuery (it uses jQuery and jQuery UI to do it's thing). …

40 comments

Middle Box Links

Worst name ever, but I was having a hard time naming it and that seemed to fit the bill. This is the end result:

It covers a variety of things I thought were interesting:

  • jQuery 1.4's new element creation syntax which is pretty cool and we haven't covered
  • Writing a little plugin to prevent repeated code (and keep it in the spirit of jQuery)
  • Touches on what I am starting to consider object-oriented CSS
44 comments

Estimating Projects

I like the way that we estimate projects1 at Chatman Design2. I think it epitomizes "real world" web design. We do our best to streamline the process and have a methods to the madness. But a lot of the time, estimates come down to educated guesses. Most importantly, we try and make things as clear, understandable, and fair for both the potential customers and us.…

38 comments

3D Text Tower

Have you seen David Desandro's site? It's pretty slick. His footer is especially fun:

The technique is clever in it's simplicity. Let's take a look.…

LessConf3010

I'll be heading down to Atlanta, Georgia to attend LessConf3010 on May 21/22, 2010. They can say it better than I can:

LessConf is a conference with talks ranging from startups to design to marketing to business. It's a casual two-day event in Atlanta Georgia with awesome speakers here to inspire you. Each speaker will have a 45 minute talk followed by a 15 minute Q/A session with Steven Bristol.

It's put on by Allan and Steve of LessEverything. …

We have a pretty good* newsletter.