Treehouse: Grow your CSS skills. Land your dream job.

Article Archives

24 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 "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 …

76 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?
87 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?
6 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!
39 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.
156 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. Feel free to share your reasoning in the comments. Results in a monthish.…

82 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:

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

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

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

12 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 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

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

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

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

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

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

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

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

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

38 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 in body content a little padding, background, and rounded corners.

a { padding: 2px 6px; background: #eee; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
A "padded" link…
62 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 way around pretty well. Recently I've been finishing up laying out my new book Digging Into WordPress (which you can buy now!) and during that time I was thinking about some of the ways working in InDesign is similar …

59 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 up, to explaining how things work (really get to know the loop and how to use functions to display the things you need), to SEO, to using WordPress as a CMS, to security, and more! The book gets into it …

269 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 can't help but view source on every nice looking website I see. It's like if you had x-ray glasses that allowed you to see any person you ever saw in their underwear at will. How could you not? It's just …

53 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 most cutting edge techniques are fun to play with, but since since only a sliver of browsers support them fully, we can only use them in circumstances where they fall back to otherwise perfectly acceptable styling. Let's look at a …

122 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 have your own unique way, feel free to post some code or a link to an example CSS file in the comments!…

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

31 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 some of the submissions. Looking at sprites I find strangely fascinating. It's like this strange secret language of the web that only us performance nerds really understand =)…

32 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. It's 100% WordPress of course. I did break one major rule: the design is a complete overhaul of the previous site, rather than an evolutionary step. I just felt like evolution wasn't going to cut it this time. And besides, …

89 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 servers only allows some limited number of things to be download concurrently from a single domain (like 2 or 4?). But a site fairly commonly has dozens of resources. So if you were to create a subdomain (e.g. images.css-tricks.com) and …

197 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!…

275 comments

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

This article has been revised and re-written several times since its very first publication in 2007, to keep the information current. The most recent revision was done by Flip Stewart in January 2015.

What are CSS Sprites?

Spoiler alert: they aren't fairies that write your stylesheets for you. I wish. In short: CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance.

Sprite may seem like a …

12 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 doesn't come across the main feed. I only mention it because I have yet to integrate a link to it anywhere easily findable on the site... I gotta get to that soon.

I wanted to mention a few nice …

82 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. That is, below the visible area of the browser window. So in order to access those menu items down below, you need to scroll your browser window. For those of us with scroll wheels of some kind on our mice …

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

29 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 the old one and get the new one!

  • Undo button! Anything you can do in Printliminator, you can now undo, one step at a time.
  • Added note about using ALT key on PC instead of Option.
  • Slight design change. Square
94 comments

Quickly Make Any Page Print Nicely (with The Printliminator)

Introducing The Printliminator!

I had this idea when I was at a lyrics site trying to print out some lyrics. The page didn't have a good print stylesheet and was full of all kinds of crap. I copied the source code and made a local version of the site and dumped some simple jQuery stuff in there to make it so any thing I clicked on was eliminated from the page. Turns out it's the current version of the …

38 comments

So Your Client Says They Want To Get On Twitter…

Twitter. They talk about it on the local news, they talk about it on ESPN... it's mainstream. It's almost a household name like YouTube, Facebook, or Johnson and Johnson. Businesses know that other businesses are using it, and they feel like they are potentially missing the boat on something big. Because it's web related, they turn to us, their web designers, for guidance. What do we say?…

38 comments

New Poll: When Do Jobs Get Done?

There is a new poll up in the sidebar. This time regarding when jobs that include completion dates actually get done.

There are reasons on both sides of the client/designer relationship that affect when jobs actually get done. How quick you are as a designer, how efficient communication is between parties, how long it takes to receive requested materials, how busy everyone is in general...

So the question isn't trying to place blame on one side or the other, or …

21 comments

Poll Results: How Do You Email?

The runaway winner was Pure Cloud, with 53% of people that exclusively use an online mail service, through a browser, like GMail or Yahoo or Hotmail or whatever else.
137 comments

Envato Marketplace Redesign

As I'm posting this, the marketplace websites that Envato runs (ThemeForest, GraphicRiver, etc) have been redesigned. It's a pretty big overhaul... new logos, loads of new features for both buyers and sellers, the iconic "switcher" to change between marketplaces is integrated right into the site identity. Collis himself breaks it all down in this launch post.

The #1 thing I was secretly hoping for is better (and less buried) search. They really came through on that, …

26 comments

Giving Snippets “Add to” Coda & TextMate Buttons

I think this is the coolest thing since Kayne carved cult symbols onto his head: each snippet in the Snippets area now has little links when you roll over them for adding the snippet to Coda or TextMate. I realize this is way Mac-specific, but if you roll that way and use either of these programs it's way cool. I hope to make a copy-to-clipboard function that will be useful for anybody. [example]

64 comments

You Know You Should Use JavaScript When…

You know you should use JavaScript when the task cannot be accomplished with any other technology.

That's what Doug suggested when I asked him for a nicer spin on a something that was going through my head:…

24 comments

New Snippets Feed & How-To

There is a new snippets-only feed! This will always remain it's own separate feed I think, and not be a part of the main feed. Mostly because I hope that the snippets will grow and grow and there will hopefully be a lot of entries and I think that would overwhelm the regular articles feed. Snag it:

Code Snippets Feed

Getting this to work was a bit of a journey, so I thought I'd document it here!…

30 comments

Unobtrusive Dropdown Page Changer

Using a <select> dropdown menu to create navigation isn't as common as it once was, but it's still around. It got ripped on pretty good for being an inaccessible / obtrusive. Indeed a lot of the scripts you'll find out there for creating a menu like this are this way. Bummer. Let's make one that works with OR without JavaScript!

View Demo

36 comments

Add (+/-) Button Number Incrementers

Text inputs on forms can be used to submit numbers. A common use would be a "quantity" input on an eCommerce site. Changing the quantity value, from the user's perspective entails tabbing or clicking to the input, deleting it's current content, and typing in a new value. Expected behavior that nobody is going to yell at you for, but these number inputs could be a little friendlier. Through use of JavaScript (yes, jQuery), let's do just that.

152 comments

Design Refresh (Version 5)

The new design has been rolled out. Nothing to shockingly different I hope, just a refresher. It's kind of hard to say, but I think this is the 5th significant iteration of the design at this point. The lines are fuzzy since the design evolves in between those iterations quite a bit. One of these days I'll have to do a post showing snaps of all these old Photoshop files of old design ideas. Holy cow there is some awful …

47 comments

Style a List with One Pixel

A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list: