The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Article Archives

Wufoo API Contest

We're giving away a friggin' Battle Axe (and $3,000) to the winner of the Wufoo API contest. Cash prizes and Wufoo accounts for life to the second and third place winners as well. Developers, you have until the end of this month! Check out the page for ideas and API wrappers.…


Double Click in CSS

With the recent proliferation of touch devices, the web designers of the world are losing our beloved mouse pointer. There has been some interesting talk about how we essentially lose the :hover pseudo class in CSS as well as mouseenter, mouseleave, and mousemove in JavaScript. Then just earlier this week I did a post about how you can use the tabindex attribute to basically respond to a click with pure CSS. It got me thinking, can we somehow pull off …

one comment

Performance of CSS Selectors

The idea here was to compare different styles of writing CSS and see how they affect the page rendering. So using all ID's, using all classes, using OOCSS techniques, etc. I gave some best practices advice on this a little while ago, but had no tests to back anything up. So the most interesting part of it all to me was how the tests were being measured. The test idea came from a Jon Sykes article where he writes:

At …


Cross-Browser HTML5 Video and Audio

MediaElement.js is a jQuery-based package for allowing us to:

  1. Use the HTML5 elements <videoand <audioand have them work cross-browser (including mobile WebKit)
  2. Deliver a consistent UI for controls
  3. Using only a single format

I'll be using it in the redesign of this site. I was all prepared to just say I'm using HTML5 video and if your browser doesn't support that then just download directly and use VLC or something. But then I realized I'd have to re-encode …


Linkage Returns

Way back when I used to do "Links of Interest" style posts. I'm happy to announce now that 1) There is a new design of this site coming within the next few weeks and 2) Linkage is coming back. I'm going to do it like it's done currently on Digging Into WordPress, sort of Tumbr/Daring Fireball style. There will be no comments on this site for that style of post (comments should happen on the linked post). The title …


Expanding Images using HTML5’s contenteditable tabindex

HTML5 has a new attribute, contenteditable, which can be applied to any element which allows it to be edited directly in the browser window. Think of text input with a predefined value, but it can literally be any element. Form elements like text inputs support the :focus pseudo class, which allow us to style those elements when they are clicked upon or otherwise navigated to. Giving an element the contenteditable attribute means it also now supports the :focus pseudo class, …


Fix Inserted HTML5 Content with HTML5 innerShiv

When working with HTML5 today, many of you know that you'll need to include the "HTML5 shiv" to ensure that CSS will recognize and be able to style those elements in browsers that aren't yet hip to HTML5.

<!--[if IE]> <script src="//"></script> <![endif]-->

Credit for that to Remy Sharp, Jon Neal, John Resig and anybody else who contributed to that idea. Also for the benefit of those non-hip browsers, it's best to reset many of the HTML5 elements to block-level …


Inset Border Effect jQuery Plugin

This is a guest post by Robin Thrift who wrote to me with some demo code for creating this effect. Together we turned it into a jQuery plugin. Enjoy!

I was browsing through a few Flash templates on ActiveDen when I came across an effect I see very often on Flash website galleries. It's a very simple but neat effect. The images have a border, but unlike CSS borders, it covers up part of the image. I wanted to use …


Guidelines for URI Design

This is a guest post by Jacob Gillespie who started an interesting thread on Forrst about this topic. I invited him to post it here, to which he graciously accepted.

Over the past several years, I have taken an interest in usability and web design. One of the areas that seems to be often overlooked when it comes to design of a site is the design of the URIs on that site. Modern CMS systems allow for varying degrees …


CSS Run-in Display Value

CSS has a value for the display attribute called run-in. It's like this:

h3 { display: run-in; }

The point is to allow a header to run into text below it, without sacrificing semantics or running into the problems you might run into trying to force it with other layout techniques.

Let's take a closer look.…


Dude, you browse with JavaScript on?

Dude, you browse with JavaScript on?

Uhm, yeah, why wouldn't I?

It's totally insecure. Hackers could destroy your computer.

Hackers? What is this 1995? And, no they can't.

They can definitely steal information about you without you knowing.

Like what?

Like you're address book information or your browsing history, depending on your browser and settings.…


Understanding border-image

The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that's your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today's browsers.…


Local Previews of Images from File Inputs (fail)

A little while back there was a guest post about Ajax image previews. It's a nice technique but it left myself and a few other commenters thinking: wouldn't it be cool if you didn't have to upload the image at all to preview it? After all, the image is on the persons computer already why can't we just snag the local file path and use that as the src of an image.

Well, it's that snagging of the file …


Textarea Tricks

Oh, <textarea></textarea>'s. How many quirks you posses. Here is a collection of nine things you might want to do related to textareas. Enjoy.…


Tips for Web Design that Crosses Cultures

The internet has the potential to put a global audience at your fingertips, but there's far more to reaching across cultural divides than simply putting your website out there and waiting for people to visit it. There are issues to do with language, design and SEO that all need to be addressed before your website becomes truly accessible ‘world-wide’. Thankfully, though, there are a number of simple tricks you can apply that will make it all a less daunting process.…


Google Maps Slider

Google Maps has a JavaScript API now in it's third version. I remember playing with some version of the API back in v2 and thought it was kinda cool but a bit obtuse. For one thing, v3 no longer requires applying for an API key which is nice.

I'm sure it's partly me getting better at JavaScript, but I found the API quite well done and easy to work with. For one thing, it's fully evented. That means you can …


The difference between ‘return false;’ and ‘e.preventDefault();’

Have you ever seen those two things (in the title) being used in jQuery? Here is a simple example:

$("a").click(function() { $("body").append($(this).attr("href")); return false; }

That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:

$("a").click(function(e) { $("body").append($(this).attr("href")); e.preventDefault();

CSS Media Queries & Using Available Space

We've covered using CSS media queries to assign different stylesheets depending on browser window size. In that example, we changed the layout of the entire page based on the space available. It isn't required that we make such drastic changes with this technique though, so in this tutorial we'll go over a design tweak with a smaller scope. We'll also cover the syntax for using media queries within a single stylesheet and more examples of that.…


CSS Content

CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page. This is what it looks like:

.email-address:before { content: "Email address: "; }

With this CSS in place, we could have this HTML:

<ul> <li class="email-address"></li> </ul>

And …


Happy Fourth!

Today is America's birthday and also (more importantly) the birthday of CSS-Tricks, which turns 3 today. If it was a human being, that means it would be starting to string together sentences of five words or more, socializing well with others, and not wetting himself most nights. I guess it still has some work to do.…


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 …


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 …


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 …


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 …


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. …


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.…


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.…


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


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

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 …


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.…


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 …


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 …


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…


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 …


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.…


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.…

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, …


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 …


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 …


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 …


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 …


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.


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 …



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


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

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.…

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed