Get a free trial // Grow your CSS skills // Land your dream job

Article Archives


How nth-child Works

There is a CSS selector, really a pseudo-selector, called nth-child. Here is an example of using it:

ul li:nth-child(3n+3) { color: #ccc; }

What the above CSS does, is select every third list item inside unordered lists. That is, the 3rd, 6th, 9th, 12th, etc. But how does that work? And what other kinds of things can you do with nth-child? Let's take a look.…


Threadsy Invites / Haiti Poster Project

Two things today.

First, have you guys heard of Threadsy? I hadn't, but apparently they got 2nd place at TechCrunch 50, which is pretty great. It's a web application that combines several of your online "input streams" (e.g. Email, Twitter, and Facebook). I think that's actually all they do right now, which I find kind of awesome, because those are the only ones I use anyway.


Link Underlines Grow to Backgrounds on Hover

A reader recently emailed in asking if I knew a way to have links be underlined, and then have the underline grow upwards on hover and turn into a background/highlight effect. I ended up trying three different things, with varying levels of success.

Free Template: DocTemplate

Totally free template for ya'll today. It is fully of AJAX navigation goodness, so subpages load dynamically with no page reload. If you don't like that part (for example, you are trying to put JavaScript demos on the subpages and they won't load that way) just remove the JavaScript files from the header and it will revert to regular nav. Enjoy!

Make All Links Feel Subtly More Button-Like

On this current design of CSS-Tricks, you may have noticed how all links bump themselves down one pixel as you click them. I started noticing this effect on sites of luminaries like Tim Van Damme and Andy Clarke, so credit where credit is due.

As you might imagine, it's incredibly simple. Let's take a look.…


Thank You (2009 Edition)

Before January slips away from me, I want to get my annual Thank You post out! Thanks to TheDoc (our resident prolific forums guru) for reminding me.


Designers These Days…

... have a good design sense and understand the fundamentals / design principals.
... know all the major design software including the entire Adobe Creative Suite.
... have some basic video editing skills.
... know HTML, CSS, and JavaScript.
... know enough about server-side languages (PHP, ASP, Ruby, Python, etc) to understand how they work, what they do, and the possibilities of their use.
... know about servers, hosting, domain registrants, DNS, etc. Setting it up, and fixing it when …


Redesigning an “Edit Product” Page

I decided that in 2010, I was going to design more things. I didn't do as much just straight up designing of things in 2009. So rather than wait around for opportunities to come to me, I am going to just pick random things to redesign. At the day job we just got done doing a whole ton of data entry for a client, that we do every year when they revise their catalog. We use Pinnacle Cart for this …


Updated Bookshelf

In an effort to provide a permanent resource to the question "are there any books you recommend?", I created the CSS-Tricks Bookshelf. It had slowly gone out of date, so now I've bought it back up to date with new version of books, some new favorites, and some old classics.

This kick ass book, and more, on the updated bookshelf.…

IE Background RGB Bug

Using RGBa for progressive enhancement is getting more and more popular, which is awesome. Even nearly a year ago it was pretty much ready to rock. A great way to handle the progressive enhancement part is just to declare a fallback color before the RGBa value, so older browsers that don't support it will get a solid color version:

div { background: rgb(200, 54, 54); /* The Fallback */ background: rgba(200, 54, 54, 0.5); }

The above works just …


New Poll: Tag/Punctuation Placement

There is probably a right and wrong answer for this, so if that emerges, I'll update this article and mention it in the results. Regardless, I don't think it's obvious, so this poll should be answered on what you currently actually do, not the "correct" answer.

Should special marks in sentences be contained within inline tags like strong and em, or outside of them.

For example:

Was that really Meg Ryan in <strong>Cherry 2000</strong>?

Or should the question mark come …


How To Create an IE-Only Stylesheet

This article has been updated from an older version (originally Sept 24, 2007). I just wanted to expand it and make it more clear.

If you read this blog, there is a 99% chance you've had a hair-pulling experience with IE. But if you are worth your salt as a CSS coder, you should be able to deal with it. I am of the opinion that you can handle anything IE can throw at you without the use of hacks. …


Poll Results: Hyphens, Underscores, or camelCase?

My intention with this poll was to be kinda vague, so that people would respond about what they like the best instead of thinking of one particular instance of usage. Usage could be where ever you need to manually name something: CSS classes and ID's, programming function names, file names, usernames and passwords, basically anywhere you can't use, but benefit from simulating, spaces.…


Increase Traffic by Reducing Traffic

What? Yeah sorry, dumb title.

Here's my point: when websites offer awesome things that seemingly would reduce the amount of traffic they get, the cumulative effect is increasing traffic. …


Rational Z-Index Values

A reader named Arjan recently emailed me telling me about a website that The Printliminator didn't work on. They had traced it back to the fact that the site used a bunch of "overlays" with ridiculously high values for z-index. The Printlimintor injects itself on the page with absolute positioning and a z-index value of 10000, which I already consider to be ridiculously high. So should we start playing this game and come back with even more ridiculously higher z-index …


Background Desires

The background property is a major player in what makes the awesome CSS designs of today possible. There are just a few properties that make it up: background-color, background-image, background-position, background-repeat, and background-attachment. Very simple, very powerful. I have a couple of other ideas that seem to make sense to me: background-opacity and background-anchor.…


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 likely happens is people read the article, read the first few comments, then start just scanning them (at increasingly swift rates) until they hit the bottom, then read the last one or two. At least, that's what I do.

WordPress …


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 blindness. The ads currently on this site from BuySellAds do this automatically, but if you have your own manual system, here are three different ways to randomize.

View Demo   Download Files


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 popular, already a current "standard", and supported by a wide variety of ad networks. So if we start there, and chose a reasonable gutter size (10px), we can build a whole system of ad sizes that make sense.


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. There is navigation on the page for viewing all of them at once, or selecting which group you would like to see. Selecting a particular group hides the blocks from any other group, hence "filtering".


View Demo   Download


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 do something normal and white-hat like adjust the height of the iframe to fit the content inside it. These security measures are in place to prevent all the black-hat kind of things you could do if you did have JavaScript …


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


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, the résumé was a Microsoft Word document, which in itself is fine, but it wasn't particularly well designed. I thought, we're going on 2010 here, we might as well take this thing to the web!

I created a really simple …


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 of their delivery of honest emotion, in any genre. I also think they listen for the intangibles. They try and put their fingers on the elusive qualities and little details that make a great song great.

I think this is …


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 now let's take a look at the book!


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.

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.

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.

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 "aborting" a link. Years ago now, I remember seeing somebody's demo where they found some weird combination of CSS which made it so you couldn't abort from a link. It's been on my to-research list for a long time, and …


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?

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?


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!

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.

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. Feel free to share your reasoning in the comments. Results in a monthish.…


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:


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 band members, which fade into real photographs upon rollover.…


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 people stepped up and starting doing it themselves! Everyone did a great job, but ultimately the version I'm releasing as version 2 is by Vinh Pham.…


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 are lots of ways to make money on the web. I felt somewhat qualified to talk about that, since I do a lot of them myself. Here are some of them.…


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 there is a central home for all this fun:

Creating a Web App from Scratch Homepage

Also, congrats to: Bryan, gemmes, Gaston, An, and Mike Henderson. You folks were the randomly chosen winners of Jason's book PHP for Absolute Beginners


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 PHP, it is trivially easy to use variables in CSS. This is certainly not a new trick, but I've never specifically covered it so I thought I ought to.…


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


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 HTML invoice of my own. This of course can't do nearly all the awesome stuff FreshBooks can do, but it might be useful to some of you with extremely lightweight invoicing needs.…


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 the get-go that this was going to be an AJAX-y app. We didn't chose AJAX because it's a popular buzzword, we chose it because we know it's the best path toward making a responsive, easy to use, natural feeling application …


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 status. But then we have sign in and sign up pages and account pages. So let's be smart and work modularity. That means we'll make files like "header.php" and "close.php" that we can include on multiple pages so we don't …


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, UI, and general front-end stuff. We are going to be going back and forth from here over to my friend Jason Lengstorf's site Copter Labs. Jason will be handling the back-end stuff like application planning and database stuff. At


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 and clearly not going to scale well.

Version 2.0 was put together to solve those problems. A CRON job was used to run one DB query every 10 minutes and write the quote and markup to a .TXT file. Then …


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 and have written a bunch of double-posts together. Mostly I just bug him with questions I have about PHP and JavaScript and he always is there to help me out. I'm finally getting around to grilling him on a few …

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

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed