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

Article Archives


Add Design Quotes to Your Site

There is a much newer and nicer version of the Quotes on Design API now, check out the code over at the dedicated API page.

David Walsh helped me whip together an "api" for Quotes on Design. If you want to add a random design quote to your site, just add this snippet of code:

<blockquote id="qod-quote"> ... loading ... </blockquote> <script src="//" type="text/javascript" charset="utf-8"></script>

View Demo

This will insert a quote on your page, inside the "quote" …


Typographic Grid

This is not a "framework" or anything, I was just screwing around with typography and getting things to line up according to a strict horizontal and vertical grid. It is inspired by the Compose to a Vertical Rhythm article by Richard Rutter a few years ago, except uses unitless line height.

View DemoDownload Files

font: 10px/2 "Lucida Grande", Helvetica, Sans-Serif;

I thought the results were very pleasing. If you have a site heavy on text content, I …


The Last Links of Interest – Other Great Places for Links

I've done 62 Tuesday "Links of Interest" posts over the past 18 months or so. it's been fun and a good way to share links, but I'm letting you know this will be the last one. It's not because I don't like sharing links, it's because me doing it here is just a little redundant to link sharing I do elsewhere and it's starting to feel a bit too much like "filler" content. I look forward to saving myself a …


PHP for Beginners: Building Your First Simple CMS

The Magic of PHP + MySQL

It's safe to say that nearly every website that's up-to-date these days is using some form of content management system (CMS). While there are a ton of great free options that provide us with a CMS to power a website (WordPress, Drupal, etc.), it doesn't hurt to peek under the hood and get a feel for how these systems work.

To get our feet wet as back-end developers, we'll be creating a simple PHP …


Launch: Are My Sites Up?

Hey folks! Me and Richard have just launched a new site I think many of you will find useful. It's called Are My Sites Up? - I bet you can guess what it does =)

Monitor ALL your sites

The idea is that many of us are responsible for maintaining a number of websites. Business, personal, or otherwise. We simply don't have the time to go visiting every one of them every day, let alone every few minutes. So what …


Thank You (2008 Edition)

Happy New Years Eve everyone! Just taking the opportunity to say thanks to everyone (again) for visiting and being a part of CSS-Tricks. This site has came a long way in one short year, and now is a great time to reflect.


Screencast Launched

I moved to Portland, OR at basically the very first days of 2008. This site alone had me motivated to get my office set up as quickly as I could. I was already armed with …


Links of Interest

Creative Advent Series...

...was pretty cool on Positive Space this year. Twenty-four creatives share their best career advice.


Merb and Rails Merging

David Heinemeier Hansson writes:

It’s christmas, baby, and do we have a present for you. We’re ending the bickering between Merb and Rails with a this bombshell: Merb is being merged into Rails 3!

We all realized that working together for a common good would be much more productive than duplicating things on each side …


Dynamic FAQ Page – A Lesson in Accessibility and Progressive Enhancement

The idea is to make a question & answer style page which is embellished in functionality by JavaScript (jQuery). Each question will be shown in a box with a tag hanging from the bottom of the box. When clicked, the tag will slide out and reveal another box with the answer.

View DemoDownload Files


This is by no means a difficult thing to accomplish, especially with jQuery. But this example is great for considering the implications of …


New Poll: What is your CSS framework of choice?

Just tossed a new poll up. This time covering CSS frameworks, which we have never polled before. Kind of curious to see which of them is the most popular, among the people that actually use them. I've only included six of the ones that seem to me like the most popular, but if I have missed a really big one, let me know soon and I'll add it quick before there are many votes.

Poll is down in the sidebar. …


Ho Ho Ho!

.wishing { you: happy-holidays !important; }

Have a lovely day everyone! It's definitely a white Christmas here in Portland. I plan to do a recap of the year next week and tell everyone just how thankful I am for this site and the community we have.

Sorry for no screencast today, I meant to get to it earlier in the week but it just didn't happen. It should be a fun one though next week. I've had many requests for …


Poll Results: How do you keep track of design inspiration?

As always, fascinating results. I am part of the very smallest segment, in that I use an image-based social bookmarking service, ScrnShots, to keep track of a lot of my design inspiration. I'm not a nut about it though, and I definitely "cruise the galleries" as well.

I was surprised to see Local Bookmarks take the #1 spot. Seems like that could get unwieldy to me, and that local bookmarks sort of lack the annotation ability to deal with …


Links of Interest

jQuery 1.3 Beta

If you want to help test, all the details are here. Many rewrites of core areas like the selector engine and DOM Manipulation (append/prepend/before/after).


Absolute Columns

Dan Rubin hits the nail on the head with a great way to handle columns of equal height.


WordPress "Art Direction" Plugin

Not all posts are the same, so why are they all designed the same? This plugin will allow you to apply styling that is unique to …


Blurry Background Effect

When setting a background image on a page element with CSS, you can control its position with "background-position", but an often-forgotten trick is that you can control its position behavior with "background-attachment".

Utilizing two images, we can pull off a pretty simple and fun CSS trick I'm calling the "blurry background effect". Here are the results:

View DemoDownload Files



Site News: iPhone/iPod Stuff

Few quick announcements!

iPhone/iPod Version of Screencast

Many, many people asked for this. I resisted a long time mostly since I thought seeing them on such a small screen would be useless. But I concede that listening and sort-of seeing might be good enough, and you can always get the bigger version if you need to go back to something. iTunes here. Raw RSS here.

iPhone Interface

Just for kicks I brought back the iPhone interface for CSS-Tricks


PHP Include from Root

When I reference images, I almost always do something like this:

<img src="/images/logo.png" alt="logo" />

That is a relative file path, but it begins at the root public directory of the site. That way it always references the same location, no matter what directory that code snippet ends up in. If it didn't begin with that "/", it would be a relative file path still but it would the location would depend on what directory you were in at the …


New Site: Quotes on Design

Here's another new site from me. I love reading books about design, so I've made a little site to help immortalize the great little quotes I come across. There aren't a ton of them up there yet, but I plan to add to it whenever I come across anything good in a book, blog, or anywhere else I see a good one!


Visit Site


Got a good one to contribute? Go for it. …


Links of Interest

Best Presentations from Web Design Conferences in 2008

Chris Spooner has put together a little roundup of videos from some of the best web design conferences this soon-to-be-past year. Makes me jealous! I've never once been to a web conference. Too dang expensive usually.


Modular Layout Systems

24 Ways has been fairly fun this year, but the best so far has been the post on Modular Layout Systems from Jason Santa Maria. Jason has what I consider to be …


Force Secure Form Submission

I was working with a client eCommerce site the other day, and a really concerning problem popped up. On the very last step of checkout, when you press the very final button to submit the order, the browser would pop up a security warning telling the user that the page was secure, but the data being sent was not.

Not exactly something someone wants to see when buying stuff online.

A little digging revealed the browser wasn't being paranoid, it …


New Site: HTML Ipsum

There are a number of Lorem Ipsum sites that I like. I even have a dashboard widget for generating it. But none of them does what I REALLY want, which is to give me the Latin text already in HTML tags. So, I built one.


Visit Site


Clicking on any of the blocks automatically copies the text to your clipboard! Let me know if you have any questions/comments/suggestions.…


Links of Interest


Yet another PNG fix for IE 6, but this time with all our dreams come true. Positioning, repeating, and none of the link-blocking z-index madness. How does it work? Apparently the proprietary Microsoft VML language does a much better job than the AlphaImageLoader stuff the other fixes rely on. I'll say now that I haven't actually played with this yet so it's not an official endorsement, but from all the positive press on it, I'd say it's worth …


Start/Stop Slider

A little while back I did a tutorial on a Featured Content Slider. It was neat, but a little limited in customization possibility. The two most requested features were being able to add/remove "panels" and a stop/start button.

I'm happy to say I was able to accommodate a bit with this new slider. It's not a plugin, so it's not as easy as it possibly could be, but it's much easier. There is a section at the end for …


Building an Animated Cartoon Robot with jQuery


Aside from being a fun exercise, what purpose does something like this have? None that's plainly obvious. Its about as useful as a miniature ship in a bottle. Yet it does have an underlying purpose. It could inspire someone to look beyond the perceived constraints of web designers and developers.

View Demo



This project was created by layering several empty divs over each other with transparent PNGs as background images.

The backgrounds were animated at different speeds …


Links of Interest

Double Background Effect with CSS

Soh Tanaka tackles a CSS layout problem that probably many have you have run into. The idea is double backgrounds, that is, having a centered design where the left side has a repeating design and the right site has a different repeating design.


New Wufoo Features

Most of you probably know I'm a big fan of Wufoo, the web service for building forms. (If you don't, I have an intro video here). …


Creating Tabs That Behave

When creating navigational tabs that use real web text, some positioning issues may arise when that text is resized. The natural flow of a web page when text is resized is to push down. This can push your main content area down and/or force the tabs into that area. Using some smart CSS, we can fix this issue by creating tabs that grow upward when text is resized.

Bad Example

View Bad Example

In this example of bad tab behavior, …


Prevent iPhone Text Enlargement

The iPhone has a funny way of bumping up the text size on websites when viewing them fairly far "zoomed out". This can be wonderful, as it can help the text be readable while seeing more of the website. It can also be unexpected, undesirable, and break otherwise perfect layouts.

To prevent this on your site, you can use this:

-webkit-text-size-adjust: none;

Apply it selectively, or directly to the body to prevent resizing everywhere.

Thanks to Ed Brandt for sending …


The Very First Steps After a Fresh WordPress Install

So you have WordPress installed! Congratulations! Now what? I find myself installing WordPress quite often, so I'll share with you my "first steps" after a fresh install to get WordPress set up to my liking. This involves changing settings, resetting the theme, and some universally useful plugins.

At the time of this writing, WordPress 2.6.5 was just released. You know, "for future reference".…

Links of Interest

This weeks Links of Interest post is WordPress-themed, like the rest of this week =)

Web Designer Wall Series

Nick La is in the midst of a series on working with WordPress. So far he has done Installing WordPress Locally, Building Custom WordPress Theme and Exporting and Importing WordPress.

Fully Valid, SEO-Friendly Social Media Links for WordPress

One of the things that will always get ya when validating is un-encoded characters in URLs. This is particularly epidemic in …


What to Ask a New Client Wanting a WordPress Theme

[original photo]

With any new client, before you start choosing technologies, you should be finding out more about them. What they are all about, why they need a website, and what the goals of that site are. But if you are past that stage and it becomes clear that they need a blog, and that blog will be powered by WordPress, here is a list of things you should ask to get started (in no particular order).…


It’s WordPress Week!

I've been working with WordPress a lot lately. The redesign around has had me moving lots of stuff inside WordPress and using it more and more like a real CMS (video on this). At work lately we've been doing a ton of WordPress sites and it's just all up in my mind right now. So... to get it all out of my system, this upcoming week on CSS-Tricks is going to be WordPress Week! The theory here …


Thoughts on IntenseDebate So Far

I've been using IntenseDebate on CSS-Tricks for a little over a week now and a lot of thoughts on it have been stirring around in my head so I thought I'd try to organize them and share.

What is IntenseDebate?

IntenseDebate is a service to enhance the traditional comment system on blogs. I'll get into more specifics about what those enhancements are later. The important idea is that it isn't a replacement comment system, it just works with your existing …


Block a Website for Everyone But You

Quick little .htaccess trick today for ya'll. This snippet will redirect any visitor who is not at at one of the provided IP addresses. You can use as many or as few as you would like. This is just a very quick way to block access to a site for, say, everyone but you. Or, everyone but you and a few select co-workers or clients.

RewriteEngine On RewriteBase / RewriteCond %{REMOTE_HOST} !^71\.225\.113\.171 RewriteCond %{REMOTE_HOST} !^71\.185\.239\.212 RewriteCond %{REMOTE_HOST} !^69\.253\.223\.254 RewriteCond %{REQUEST_URI}

Jeff Croft on Web Design

I would say my biggest pet peeve related to the industry would be people focusing on technology instead of design, standards instead of users, and validation rather than innovation. Web standards and best practices are noble goals, but all too often in our community people forget they are a means to an end, not the end itself.

Well said, Jeff.

From a post about web design pet peeves.…


Links of Interest


I have no idea how long these "served" sites have been around, but I dig 'em. typographyserved, photographyserved, etc.


Intense Debate

Commenting is the best thing about blogs. Really makes a blog into a community rather than a virtual megaphone to shout from. But the default commenting system on most blogs has been primitive for a long time. You enter your name and comment and submit it. The only chance you get to establish who you …


Old School Clock with CSS3 and jQuery

Hi everyone, my name is Toby Pitman and Chris has asked me to write a post about a recent experiment that I posted up on the forum a little while ago. It all started when I was looking at the WebKit blog and saw an article on the new CSS3 animations and the one that caught my eye was 'rotate'. I started thinking what the hell can you rotate on a webpage (it's animated GIF's times ten!). Then it hit …


Guest Post on Writing Better HTML

I was flattered when the guys from Smashing Magazine asked me if I'd like to write an article for them. I thought I would stick to my best subject and write about CSS at first. So I started a draft about developing good CSS habits. The first section was about how CSS doesn't live in a bubble and needs good HTML to go around it. In fact, good HTML is almost MORE important. That first section went on and on …


Color Fading Menu with jQuery

Editor's note: When I first pushed out this latest redesign for CSS-Tricks, it featured a simple color fading animation in the main navigation. Liam quickly noticed a flaw in the code I was using to do it, where if you very quickly moused back and forth over the menu items some of the transitional color would "stick". Liam generously rewrote the code to be a bit smarter for me, and I asked him to write this tutorial. Thanks Liam!

Hello, …


Links of Interest


Using justified text on the web has long been tricky, as lines could sometimes be rendered with god-awful word spacing. This is due in large part to the fact that rendering engines aren't smart enough by themselves to know when and where to hyphenate a word. The wp-Hyphenate aims to add smart hyphenation to WordPress blogs.

Believe me, the last thing I'm going to do is get all political on you. I just think this is one …


About the CSS-Tricks Redesign

In case you haven't noticed, I've done a bit of a design overhaul around here. I thought I'd take the opportunity to go over some points and features of the new design.


Because it was fun. Because I'm a designer and we never stay satisfied. Because I think websites should always get a little design refresh at least every year or so.

Is there anything new?

Nope, not really. Just a new face. On the back-end, I'm slowly moving …


Campana Ceramics on Etsy

Perhaps slightly off-topic today, but I thought you guys might appreciate this. My lifelong friend and college roommate Jeff Campana has recently gotten his MFA in Ceramics and moved to Kentucky to teach it at the University of Louisville. I've always been a big fan of his work. Very usable, functional vessels that are at the same time very elegant. As Jeff puts it: "Luxurious Utilitarian Ceramics". He is selling work on (the extremely awesome) now:

CampanaCeramics on Etsy


New Poll: How do you keep track of design inspiration?

There is a new poll in the sidebar folks. If you are reading via RSS you'll have to make the jump over to see it. This time I'm asking about how you manage design inspiration you find around the web, if at all. I believe that it can make you a better designer if you have some kind of system for remembering inspiring bits of design you come across in your daily web travels. There are lots of ways to …


Links of Interest

Prototyping with XHTML

Anders Ramsay and Leah Buley write about how prototyping web projects can be just as (or more) efficient by going straight to XHTML instead of sketching. This might feel like "jumping the gun" to some people, but I love this approach. Remember that (markup != design) and the semantic language of markup actually reads like a sketch as it is.


Max Kerning

This is just bizarre. Biography:

Who I am is the opposite of an …


High DPI Monitors, Resolution Independance, The Web, and You

We all use 72 DPI as a defacto standard when creating web graphics (actually, "PPI" is the more appropriate acronym but rarely used). This used to be the actual resolution of monitors, but slowly over the years this has ceased to be the case. Take my iMac. The screen, straight across horizontally, is 22.5" and has 1920 pixels. That actually comes out to about 85 pixels per inch, not 72. When we design and test website all on the same …


404 Page on a Static Site

Here's a very quick, but very useful trick. You can catch 404 errors (page not found) on a static site and serve up a custom 404 page with a one-liner in your .htaccess file:

ErrorDocument 404 /404.php

The "/404.php" part is the path to whatever file you want to serve up as the error page.

In other words...

Remember that the .htaccess file works onApache servers only. I say "static" sites, because if you are using a CMS system …


Links of Interest

Let's talk about text

Dan Kaufman on online text readability.

First, the more distinguishable each character is from another, the easier it is to read. This is why typefaces with serifs (the little lines on the end of letter strokes - Times, for example, is a serif typeface) are not as popular online as sans-serif typefaces (those without serifs) such as Arial. In print, serifs work well but on a computer screen simplicity (sans-serifs) is more important than elegance…


Typeface.js – A sIFR Alternative

My last screencast was on how to use sIFR3, a long proven technique for using non web standard fonts on the web (like we'll be doing until @font-face has wider spread support). I like sIFR, it has been around a long time has really proven itself as a good technology, but it's not the only kid on the block.

David Chester wrote in to tell me about a new project he is working on called typeface.js. I played …


Question & Answer Wrap-Up: Quickies

Mackinley Drummond

What's the deal with the "cardboard cutout" CSS-Tricks look?

Nothing metaphorical or especially significant. I just like texture in general. I also wanted to make the site look unique and not fall into any preconceived mold of what a CSS-based site had to look like. I have begun the early stages for a design refresh for this site. I'm pretty pumped about it. Don't get too excited though, it's gonna take me a while to complete it. I'm …


Should You Host Your Clients Websites?

This question was sent in by jamie y.

I have been asked before when talking to potential customers if I could host their site. Right now I have been referring them to a hosting company. But I was wondering how I might be able to host them myself and pocket that hundred bucks instead of giving it to the hosing company. Is there an easy way of doing this?

Absolutely yes, you should offer to host your clients sites


What Are The Benefits of Using a CSS Framework?

Vin Thomas sent in this question through Twitter:

What are the benefits of using a CSS framework? And would you suggest that over starting from scratch?

I was kind of dreading this one. I feel like the proper answer requires an in-depth analysis of many of the popular frameworks, and to be really thorough, actually do some projects using them so I can see how they "feel" in real usage. That makes me tired just thinking about it.

Instead …


How Much Should You Charge for a Website?

This question was sent in by Tom Nowell.

Tom said he was a university student and has been building websites for people lately. He says that he does it on his own time so it doesn't cost him anything, so he has no idea what to charge.

All of us have faced this problem before. It's a bit of an awkward situation. You are putting a price tag on yourself and it feels weird. Most of us are modest …