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

Article Archives

199 comments

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

32 comments

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 …

88 comments

Textarea Tricks

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

24 comments

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 …

55 comments

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 …

79 comments

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 …

46 comments

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 …

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 …

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 …

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 …

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

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 …

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

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 …

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

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 …

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

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 …

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 …

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 …

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 …

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 …

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 …

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

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 …

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

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

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 …

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 …

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

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 …

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 …