Grow your CSS skills. Land your dream job.

Article Archives

Curating Comments Threads

Long comment threads on blog posts are a mixed blessing. It is great to have stirred up such great community discussion. But anything beyond, say, 20 comments is beginning to get beyond what anyone is willing to actually read. What …

January 13, 201075 comments

Random Ad Positions

If you have multiple display ads of the same size in a block on your site, a good thing to do is randomize their position in the block. It's more fair to the advertisers and the different layouts reduce ad …

January 8, 201034 comments

Less Ridiculous Standard Ad Sizes

I recently said that I thought the current "standard" pixel dimensions for ads are ridiculous. 728x90? 88 x 31? Wha? I have a new idea: ad sizes that make sense.

Let's start with a basic building block. 125x125 is very …

January 7, 201097 comments

Filtering Blocks v2

This is an update to the first version of filtering blocks I did a while back. The idea is that you have a long list or large set of "blocks" on the page. Each block belongs to a certain group. …

January 6, 201031 comments

Cross Domain iframe Resizing

<iframe>'s which display content from different domains have security measures in place to prevent all sorts of stuff. For example, you can't have JavaScript access anything inside it. It can be very frustrating, for example, if you just want to …

January 5, 201027 comments

On Web Advertising

On this week's screencast I talk about online advertising. What it is, how it works, and mostly, my opinions about it. I thought I'd recap here and touch on some things I forgot about.

Content Websites vs. Product/Service Websites

There …

January 4, 201040 comments

One Page Résumé Site

A friend of mine recently sent me her résumé to look over. I'm definitely not a professional job hunter but I think in these situations any extra set of eyes can help fine tune the final product. As it was, …

December 31, 200976 comments

Seeing The Details

When a great musician hears a great song, what do they hear? I am not a great musician so I can only speculate. I would guess that they listen for the emotion behind the song. Great songs are great because …

December 30, 200928 comments

Digging Into WordPress – in Print!

The print version of Digging Into WordPress the book is now available here. It's been an awesome journey, taking this from idea to final product and having 100% control over everything. That is a story for another post, for …

December 29, 200947 comments

Automatic IMDb / Netflix / Amazon Movie Links

In this article we'll look at a way to automatically create and insert links that link out to the popular movie-based sites (or sections) Netflix, Amazon, and IMBb. We'll use jQuery JavaScript for this, so that this happens on the fly using soley the name of the movie, reducing what would be a tedious chore of manually collecting all these links into just a few lines of code.
December 28, 200918 comments

Multi-product Quantity-based Order Form

The point of this form is that users enter quantities for different products and the math is done automatically updating all the different totals: quantity total, subtotal, shipping total, and final total. Monetary formatting is kept intact with some helper functions. Foxycart is integrated to show how it might work in the "real" world.
December 23, 200918 comments

Design v6

I've been tinkering with this redesign maybe a month or two, and decided to push it out last night. I had been using it myself thanks to the Theme Switch plugin, but there was a few things I had to actually go live before I could change, so I just did it. As usual, it's not an absolute overhaul, more of a refresher.
December 22, 2009180 comments

Aborting Links, Cross Browser Comparisons

The situation: you click down on a link and you suddenly realize you didn't want to click that link. So before you release the mouse button, you move the cursor away from the link.

This is what I am calling …

December 21, 200924 comments

Don’t Use Black for Shadows

That is, "don't use black for shadows over colored backgrounds." This is because shadows in real life are not black. They are darkened versions of whatever they sit on top of, because there is less light. Or, am I whack?
December 18, 200976 comments

Musings on Paginating Chronological Content

Pagination is a ubiquitous design pattern on the web. Thanks, in part, to huge sites like Google using it. Pagination is a metaphor. It is a way to break up content onto multiple pages when putting it all on one would be to overwhelming or resource intensive. Google's approach has defined how we think about pagination, and thus what we feel to be intuitive. But to what end?
December 17, 200987 comments

Elsewhere

Some links to stuff I have been doing outside of CSS-Tricks. Jason published a "part 9" of the Building a Web App from Scratch series. I wrote an article on my personal blog on using Safari for a week. The Digging Into WordPress books are at the printer!
December 15, 20096 comments

Fully Executing jQuery Animations Without Queuing

It is pretty common when using jQuery's .animate() function that it is triggered by a mouseEnter or hover event. This means that we need account for those events being triggered multiple times. This article goes through my journey of trying to find a good solution for this, and ultimately a plugin that does the job rather nicely.
December 14, 200939 comments

New Poll: Hyphens, Underscores, or camelCase?

I'm talking about anywhere you need to write multiple words, but can't use spaces. For example: CSS classes and id's, programming language variables and function names, website usernames or passwords, etc.

You can vote in the poll in the sidebar. …

December 13, 2009156 comments

Poll Results: CSS Formatting

The poll actually had a variety of options, including different options for Multi and Single line formatting. But what I found most interesting is the sheer domination of Multi line:

For the record, I'm a single line guy. Most multi-line …

December 11, 200982 comments

Silhouette Fadeins

Some friends of mine's band recently went through a small member lineup change. They needed to replace the photo on their homepage. I thought it might be fun to do something slightly interactive there. We went with silhouettes of the …

December 9, 200979 comments

Editable/Printable Invoice, Version 2

I knew as soon as I released the previous version of the Editable Invoice that using some JavaScript to spiff it up would be a good idea. I was thinking of doing a screencast on it perhaps, but then multiple …

December 8, 200950 comments

Making Money with Web Skills

For the last two years, I've done a virtual guest lecture to Jeffrey Brown's class in Maryland. Both times, I talked about how the skills they are developing with the web don't lock them into any one particular career. There …

December 6, 200945 comments

Source Code for Colored Lists + Book Winners

We are happy to let you know that we packaged up the source code and the Photoshop mockups from Colored Lists and are offering them up for your downloading pleasure. We made up a little homepage for the series, so …

December 4, 200912 comments

CSS Variables with PHP

When people are asked about features they would like to CSS, "variables" always seems to come up. Whether or not this is a good idea is still something I personally haven't decided on, but I'd lean toward yes. Regardless, using …

December 3, 200979 comments

Autofilling Wufoo Form Fields & Other Tricks

It's been a while since I've professed my love for Wufoo. Oh, sweet Wufoo. Thy delicious interface makes form building easy, nay, a pleasure. OK, a poet I am not. A solutions wrangler I am.

In creating a form …

December 2, 200924 comments

Make an Editable/Printable HTML Invoice

I always like how in FreshBooks to edit invoices you literally just click and interact directly with a web page that looks like an invoice. I got to thinking it would be a kinda cool idea to create an editable …

December 1, 200960 comments

Scroll/Follow Sidebar, Multiple Techniques

Really simple concept today folks! A sidebar that "follows" as you scroll down a page. There are a number of ways to go about it. We'll cover two: CSS and JavaScript (jQuery) with a bonus CSS trick.

View Demo   …

November 30, 200940 comments

Creating a Web App from Scratch – Part 8 of 8: Security & The Future

Hooray we made it! First of all, thanks for following along this whole journey. You can go check out the real live app for yourselves:

http://coloredlists.com

Below we're going to wrap up a few things by talking about some of …

November 27, 2009220 comments

Creating a Web App from Scratch – Part 6 of 8: Adding AJAX Interactivity

Our developer has already done a massive amount of work turning this idea into a real application. Now let's make some more for him! The most important part of this app is creating and managing your list. We decided from …

November 25, 200913 comments

Creating a Web App from Scratch – Part 4 of 8: HTML & CSS

It's time to get our hands dirty with some markup!

We know we have a couple different pages to deal with here. The main page of course, which acts as both our list page and sales page depending on login …

November 24, 200928 comments

Creating a Web App from Scratch – Part 1 of 8: Basic Idea and Design

Today we begin Part 1 of an 8-Part series on building a web application from absolute scratch to a complete product. I am going to kick things off by introducing the idea, and then I will be handling the design, …

November 23, 200949 comments

Quotes on Design API v3.0 (+ Widgets!)

Back in the sad ol' days of the v1.0 API, everytime any site using it loaded the script, a database call was made to pull a fresh quote from the Quotes on Design archives. It worked, but it was slow …

November 19, 20098 comments

Five Questions with David Walsh

There is probably a good chance if you read this blog that you also know David Walsh. David and I hail from the same hometown (Madison, Wisconsin) and have been friends for years. We've worked on a few projects together …

November 18, 200916 comments

Fix Padded Image Links with Negative Margins

This is a pretty basic trick that will be obvious to many of you. But for whatever reason, the solution to it always kind of eluded me so I'm sharing it here. I like padded links. Where you give links …

November 16, 200938 comments

Print Design to Web Design: Comparative Analogies

I used to work in Pre-Press for a long time. Longer even now than I've been working on the web. I was in and out of InDesign documents all day every day. I'm not an uber-pro, but I know my …

November 12, 200962 comments

The Book: Digging Into WordPress


Learn More / Buy Now

It's ready! Jeff Starr and I started the journey of writing Digging Into WordPress in December '08 and it's finally for sale. It's 400 pages packed full of WordPress learning. We go from setting things …

November 11, 200959 comments

What Beautiful HTML Code Looks Like

I originally wrote this over two years ago. It was getting a little long in the tooth, especially now that HTML5 has come along and made HTML far more beautiful than even XHTML 1.1 was. So I updated it!

I …

November 9, 2009269 comments

Quickie CSS3 Tricks with Fallbacks

CSS3 can do some seriously neat stuff. Just check out some of the crazy 3D stuff you can do in WebKit. But as we all know, we need to be careful with what we choose to do with it. The …

November 6, 200953 comments

New Poll: How do you format your CSS?

The poll is in the sidebar, so jump down there to vote. You can see examples of the different ways to format CSS here. I think that covers most of the popular ways to format CSS, but if you …

November 4, 2009122 comments

Poll Results: When Do Jobs Get Done?

When this poll first kicked off, the "late" options were way ahead. Over time, things have evened off a bit, and the results are closer than I thought they might be.

If you are in the on time or early …

November 3, 200912 comments

Holy Sprites

Lots of folks joined in on the fun with the Show Off Your Sprites! contest. I used the ol' random number generator and came up with Lee Kowalkowski as the big winner, congrats Lee! Now let's take a look at …

November 2, 200931 comments

Redesigned Personal Site

As I do from time to time, I redesigned my personal site (redesign notes). I wanted to make the site a better vessel for writing, so the shell of the site has a much nicer structure for doing that. …

October 30, 200932 comments

Images on a Subdomain (?)

I can't remember where, but a while ago I read something about using subdomains to serve up a sites resources as a way to potentially speed up loading. The theory was that the protocol that browsers use to communicate with …

October 28, 200989 comments

Show Off Your Sprites!

I just updated my old CSS Sprites article yesterday, and I thought it would be kind of fun to ask everyone to share sprites that they have created themselves. Let's make a quick giveaway out of it too!

I've finished …

October 26, 2009197 comments

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

This post was originally co-authored in late 2007 by me and Volkan Görgülü, I'm updating it now to improve it a bit and make it more current. You've heard of them, but...

Do you really understand them? The name might …

October 24, 2009276 comments

Some Nice Recent Snippets

I am really liking the new snippets area we have going here. I find myself using it all the time, which is exactly why I thought it was worth building. Remember there is an RSS feed just for snippets, which …

October 23, 200912 comments

Solution For Very Long Dropdown Menus

I like to be confident with post titles, but the reality in this case is a *possible* solution for very long dropdowns. The problem with long dropdowns is that the dropdown itself can go below the "fold" of the website. …

October 21, 200982 comments

Data Disaster

Hey folks, don't salt your scotch with tears on my account, but I'm posting to tell you all I just suffered a complete data loss on my computer. I figured I'd go through how it happened.

I woke up on …

October 16, 20090 comments

Printliminator Update

If you've been using The Printliminator, you may have noticed some updates to it. That's the cool part about a bookmarklet that references external code, updates and new features can be pushed out without having to have everyone ditch …

October 15, 200929 comments

Building a jQuery/PHP Powered Chat Room

There is an updated version of this!

The Plan

In this tutorial we are going to build a little chat program that is really easy to get up and running on any server running PHP. No database is required - …

October 13, 200959 comments

*May or may not contain any actual "CSS" or "Tricks".