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

Article Archives


Launch: Script & Style

I always liked the idea of having a community links section on websites. Lots of sites in this genre have that and I think it's great. The driving purpose behind a tutorial site like this is helping people learn and sharing inspiration. I do my weekly "Links of Interest" posts (which I will probably keep doing), but I wanted a better way to have a "stream" of links going to other good reading in the community. Hence the birth of …


Links of Interest

Favorite Design-Related Sites of 21 Designers

Steven Snell of Vandelay Design launched a brand new site called which is "articles and resources for designers". I participated in a group interview post where a bunch of designers list some of their favorites sites.


Pattern Tap

Pattern Tap is a very cool new way to browse design inspiration. Instead of just browsing full designs, you browse by particular parts of websites. For example, you can browse just different breadcrumb navigations …


Removing The Dotted Outline

Anchor links (<a>'s) by default have a dotted outline around them when they become "active" or "focused". In Firefox 3, the color is determined by the color of the text. I believe in previous versions and in some other browsers it is by default gray. This is default styling for the purpose of accessibility. For folks without the ability to use a mouse, they still need some visual indicator that they currently have a link active (so, for example, they …


Easily Password Protect a Website or Subdirectory

Working on a website that you need others to see, but not the whole world? Password protecting a website (or a sub directory within a website) is actually a pretty easy thing to do.


Links of Interest

URL shortners have been around for a while, so it's nice to see there is still innovation being done. offers all the standard features of a URL shortner, but includes compelling new features like click/referral tracking, automatic page mirroring, an API, and thumbnails (full list here).


Clever Andy

The concept behind Clever Andy is that you upload your "unused" designs, and he will "actively pursue" finding a client for that design. Once a client is …


Designing for WordPress: Complete Series & Downloads

Over the last few weeks, I have been been doing a video screencast series on Designing for WordPress. It is a three-part series which covers downloading and installing WordPress on a server all the way to a completed theme.

Part One: Download, Install, "Reset" Theme

Video Page
Direct Video Download (.mov)

Part Two: Structure

Video Page
Direct Video Download (.mov)

Part 3: Finishing Touches, Extra Stuff

Video Page
Direct Video Download (.mov)


Download - "Personal Homepage Theme"

I figured …


Why People Still Use IE 6

Internet Explorer 6 is always a hot subject of debate. We've talked about it here many many times. The forums are full of folks trying to troubleshoot it. The CSS support is problematic and the JavaScript support is proprietary nonsense.

The conversation is heating up a little hotter than usual lately, as major companies are starting to pull support for it. Apple's new MobileMe service doesn't support it. 37 signals is phasing out support for it. Matt Mullenweg says …


Links of Interest

Shirts for Coders

A collection of HTML/CSS T-Shirts. Some are funnier than others... I do like the XHTML one =) I did a roundup of CSS shirts a while ago too.



As far as these "generators" go, this BgPatterns is pretty top-notch. Customize colors, textures, patterns, sizing, rotation... Preview it live on the page, save it, or download it.



There is a slew of free WordPress themes out there, which is awesome, but I am …


How To Create a Horizontally Scrolling Site

If web pages were made out of wood, the grain would be running up and down. Vertical is the natural flow of web layout. When page elements reach the right edge of the browser window and go over, the flow defaults to "wrapping" that element down onto the next line. The more content on the page, the taller it gets, not the wider. Why is this? Because it just makes sense. Our eyes are used to reading fairly short lines …


Image Map with Prototype Tooltips

The areas inside of regular ol' HTML image maps support the title attribute which makes regular tooltips possible. Sometimes the default browser tooltips just don't cut it, especially with their built in delays.

My favorite package for doing fancy tooltips is Prototip for the Prototype javascript framework. Prototip is free to download but requires a small licensing fee to use it on your domains. We will be using only a tiny fraction of what Prototip is capable of here, but …


The Difference Between ID and Class

ID's and Classes are "hooks"

We need ways to describe content in an HTML/XHTML document. The basic elements like <h1>, <p>, and <ul> will often do the job, but our basic set of tags doesn't cover every possible type of page element or layout choice. For this we need ID's and Classes. For example <ul id="nav">, this will give us the chance to target this unordered list specifically, so that we may manipulate it uniquely to other …


Links of Interest

Best of June 2008

Noupe with another very nice monthly roundup of good design-y stuff around the web last month. I like these giant monthly roundup posts. Gives a good monthly goal of trying to write things that are worthy of being on it. Didn't Smashing Magazine used to do monthly roundups and then just randomly stopped?


Google now indexes Flash content

From the horse's mouth:

All of the text that users can see as they interact with …


New Poll: What is your favorite CMS?

There is a new poll in the sidebar folks. This one is about Content Management Systems (CMS). There was a pretty good comment thread going a little while ago which sparked the idea for this poll.

I've always been a WordPress guy, and now with the ability to easily create different page templates for different page styles, I feel like it really has evolved into a "real" CMS instead of just a blogging platform. However, I am extremely curious and …


Featured Review: Markup Factory

It would be fair to call Markup Factory a CMS (Content Management System), but that would be cutting it short. Markup Factory is much more that, but be scared or think for a moment that it's "over your head". It's not. Markup Factory is one of the most full-featured, powerful, and easy to use web services I have ever seen for creating and maintaining your own websites.

For starters, Markup Factory provides the hosting for your site. So yes, this …


4th of July, Happy Birthday CSS-Tricks!

Today is the 232nd birthday of the United States and the 1st birthday of CSS-Tricks!

Been a great year! This blog and this community have helped me grow tremendously. I'm sure the next year will be even better and bring lots of good stuff to all.…


Cutting Edge Browsers and Their Development Tools

This is a hot time in the world of browsers. Despite a rocky morning, Firefox 3 got over 8 million downloads when it was released. It's up to over 24 million now. I bet many of you are amongst these downloaders, I know I was =)

I bet many of you do your web design and development in Firefox. Things just seem to behave as you expect them to in Firefox. Plus, it has a wealth of invaluable development tools …


Links of Interest

Students: Are you going to be employable?

Andy Rutledge's article The Employable Web Designer is about how schools may not be properly preparing students with actually employable web skills:

These students are worried that they’ll emerge from school without marketable skills, unprepared for what agencies and clients will expect or demand of them. Unfortunately, I think most of them are right to be worried.

I think Andy is dead-on with most of this, but perhaps a bit extreme. He puts …


Poll Results: Which Next Gen Web Language?

Surprising results again, at least for me. "Don't Care - As long as there isn't a standards war" was actually in the lead for a little while, but was ultimately beat out by "XHMTL 2".

I cast my vote for No Standards War. I can adapt to anything and both the new formats have cool stuff. I assume XHTML 2 is winning because it sounds cooler more modern and how dominant XHTML 1 is right now. …


Interesting Reader Questions

Why a CMS?

I was recently criticized that my sites weren't dynamic, and that no one would hire me because everyone wants a dynamic site. Well, the people I'd be targeting will know nothing about computers, thats why they need me to do the updates. I've become alot more versed in HTML\CSS now, and in design in general. Should I worry about learning something like Joomla? It seems frustrating, because I just can't use my normal web design software that …


Links of Interest

Faux Absolute Positioning

Always interesting to see new techniques for layout.

With faux absolute positioning, we can align every item to a predefined position on the grid (as with absolute positioning) but items still affect the normal flow and—thanks to clear—have many of the same advantages as normal-flow elements. Every row in the grid will always have height dependent on the content...

Another advantage of the technique is that it mitigates much of the fragility of floats. When the …


Build Your Own Social Home!

Many of us have many "homes" on the interwebs. Personally I use Twitter, Flickr, ScrnShots, and Facebook. These web services are cool enough to offer ways to interact with them and pull data out of them without even necessarily visiting the site itself. This is called an API (or Application Programming Interface).

View Demo   Download Files

Update November 2011 - ScrnShots is shutting down. I simplified this demo, brought jQuery up to date, and replaced ScrnShots with Dribbble. I…

Forums Now Have RSS Feed

It blows my mind that phpBB doesn't come with RSS feeds for forums. The new v3 is incredibly nice in so many other ways, it seems like it would have been a trivial addition for such a talented dev team. But what do I know.

Fortunately, a kind forum reader dug up a link for me for a mod that did the trick!

There are all kinds of options that can be set, but I thought the most useful (and …


Elastic Calendar Styling with CSS

This post was co-authored by Chris Coyier and Tim Wright of CSSKarma

A traditional calendar is a grid of numbered boxes on a page. As a web designer, you might go right for a table, and I wouldn't fault you for that. Tables, though, can sometimes be tough to muscle into shape. The CSS purist in me gets pissed when I set the width of a table (or a cell) and it decides it knows better and grows or shrinks …


MaxSide: jQuery Plugin (and How-To)

Abstraction is an important concept in any language. You can think of CSS as a way of abstracting the design away from the content of a site. This makes the code for both much easier to read, understand and maintain. Javascript is a way of abstracting away the functionality of a site, and jQuery a further abstraction making common tasks much much easier. Writing plugins for jQuery is yet another deeper abstraction which makes your jQuery easier to write and …


Links of Interest


Worried about putting your email address right out in the open for all the world's spam bots to see? Enkoder will obscure it through javascript, yet be a perfectly useable link for everyone else. I tried to include mine here but WordPress wasn't digging the javascript inside the post. Alternatively, you just use GMail and never worry about spam again.


Videos from An Event Apart

CSS expert Eric Meyer explains why the W3C’s recommendation to allow browsers to …


Yahoo’s Secret Text-Sprite Generator

Well I'm not sure if it's a SECRET, but it's certainly neat and I don't think they publicize it.

Basically it's a URL you can hit which will create a perfect sprite-ready PNG graphic of the text you include in the URL. Check it out for yourself:

You can replace the "CSS-Tricks" part of that domain to any text you want. To utilize it, just setup a sprite rollover as normal:

<a href="" id="sprite"> CSS-Tricks </a>

In your CSS, …


Absolute Positioning Inside Relative Positioning

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

To some, this is obvious. To others, this may be one of those CSS "Ah-ha!" Moments. I remember it being a big deal for me when I first "got it".

Here is a visual:


From the Forums: Disappearing Background Graphics & More

Disappearing Background Graphics

Paul Smith posted about a weird CSS problem he noticed, disappearing background graphics. To quickly summarize, sometimes a DIV which is defaulting to the full width of the browser window, which also has a background image, doesn't fill the entire width of the screen when there is horizontal scrolling. That's a mouthful... it's easier to see the effect than it is to explain it. Paul built a whole page explaining the phenomenon. A good place to …


“Raw” Contact Forms (with CAPTCHA) from CSSKarma

Tim Wright from CSSKarma has taken my Contact Form and done some cool stuff to it. For one thing, the design is way stripped down so if you are looking to "start from scratch" with your form design, you would probably be better off starting with Tim's examples than mine.

Here are some of the things Tim has done:…


Links of Interest

To Photoshop, or Not To Photoshop

37 Signals: We don't need Photoshop, we go right from sketches right to HTML.
Jeff Croft: Well, you have an established aesthetic which makes that possible. My clients tend to need visual exploration, so we do use Photoshop.
Jon Hicks: Guys, there are advantages to both techniques.


Load Content While Scrolling

Have you ever seen that effect where as you scroll down a webpage and approach the …


Hot off the Presses: jQuery UI v1.5 featuring “Themeroller”

jQuery UI version 1.5 was just released, and it's going to be a big one. For us designers and CSS coders, here are a couple of major highlights:

  • Class transitions (morphing): $("div").addClass("green", "slow"). So now instead of being able to "instantly" add a class to any page element (which instantly applies all CSS attributes from that class), we can now "morph" into that class (which will animate into the CSS attributes in that class).
  • Easier file structure. This just means

Free PNGs for Creating Transparent Fills

If you have worked much with CSS opacity, you know that one of the most frustrating things about it is that by setting it on any page element, it forces it child elements to be transparent also. I would love to hear a technical explanation for that blunder! There are some workarounds, but they involve fancy positioning footwork and are not ideal for large-scale use.

One of the most common and simple uses for transparency is transparent …


People Share Their CSS “Ah-ha!” Moments

A few weeks ago I shared my CSS "Ah-ha!" Moment and asked others to share theirs. It was lots of fun hearing what those moments were for people. I wasn't surprised to hear the CSS Zen Garden come up very often, as that was a huge eye-opener for me and countless others I'm sure. I was surprised to hear how many people specifically brought up floats. I'm thinking about doing an in-depth article on that, since I don't think I …


Links of Interest

Web Designer Diary

I (literally) Stumbed Upon this video of a web designer working on a website. It goes from a blank page in Photoshop to a complete and coded design in about 2:15.


Band Website Template (now with WordPress Theme included)

Several people asked if the "blog" section of the Band Website Template could be as easy to update as the Shows page is. Blog functionality is much more complex, and we didn't want to set out …


Create a Slick iPhone/Mobile Interface from any RSS Feed

We are going to create a web page that is formatted specifically for the iPhone (but would presumably be good for other mobile devices as well). This web page will dynamically fill itself with content from any RSS feed that you give it. The interface is going to be built to be easy to use on a mobile device, with large "touchable" areas and nice (jQuery) animations that whisk you between articles.


Let's get started!…


Using Flash And Staying Standards Compliant

Anyone who has ever worked with Flash on the web has likely come across the fact that embedding flash into a web page is usually no walk in the park. The code that Flash gives you to embed is something like this:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=",0,0,0" width="650" height="117" id="test-flash-banner" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="false" /> <param name="movie" value="test-flash-banner.swf" /><param name="quality" value="high" /> <param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /> <embed src="test-flash-banner.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="650" height="117" name="test-flash-banner" align="middle"

Links of Interest

Designer / Not a Designer

I stumbled upon this hilarious animated GIF movie of a non-designer talking to a designer.



Everybody and their brother is talking about CushyCMS lately. Probably because it's brilliant. It is a service which makes it very easy to give the ability to edit web pages to anyone. You sign up for an account (and make accounts for your "editors"), give it FTP information for a site you wish to make editable, and …


Part 2: Building a Unique Contact Form

I'm calling this Part 2, because last week I began this adventure over on Tutorial Blog where we first designed a unique contact form:

Photoshopping a Unique Contact Form

Here we are going to pick up where that left off and actually build this thing with HTML/CSS, as well as add some validation with jQuery, and make it tick with PHP. Here is what we are building:



The CSS “Ah-ha!” Moment

I think it's different for everyone. That moment while you are beginner with CSS when something clicks. You just start to get it. That is your CSS "Ah-ha!" moment. You might not instantly become a CSS master, but from this point forward, there is no going back.…


How To Design and Create a PHP Powered Poll

Polls are fun! They can help engage the readers of your site and give both you and the poll-taker valuable information. Let's walk through building a poll from scratch. All the way from the Photoshop design to the PHP / MySQL that powers it. Here is what we will build:

View Demo   Download Files

one comment

Links of Interest

An Optical Illusion with CSS and Parallax

Marco Kuiper has put together a really cool optical illusion using the CSS parallax technique I posted about a while back. Check out his post and example. Make sure to resize your browser window while you are there, that's how it works.


Timelapse CSS

Matthew Buchanan came up with a simple yet clever little snippet of javascript that would remove one CSS rule every tenth of a second. He applied this …


HTML 5 vs. XHTML 2: An Article Roundup and Poll

Much like CSS3, widespread adoption for the next-gen web languages is a distant mirage. Still, it is important to stay educated on these things and even participate in these early stages while things are still malleable. Rather than re-hash everything here, here is a roundup of articles talking about the two major new "competing" formats.

There is also a new poll in the sidebar where you can cast your vote as to which one you prefer at this point, or …


Twitter, New Screencast, 404

Tweet Tweet

I've been enjoying the Twitter thing more and more lately. Here is my Twitter page if anyone wants to follow. Just for fun, I've used some of that extra space down in my footer here on CSS-Tricks for a little "Twitter Updates" section. Fun fun! I took what I learned doing that and wrote up a tutorial for Tutorial Blog:

How To Make a Unique Website For Your Twitter Updates


New Screencast: Introduction to the Band Website…

My Big Ol’ List of Design/Development, HTML/CSS and Personal Blogs I Read

I've had a few folks ask recently what other sites I read. Like many of you I suspect, I'm a bit of a junkie when it comes to design & tech news. I really enjoy popping open Google Reader and having a nice amount of articles I can browse through. It's really amazing how much good stuff is out there on a daily basis. I do tend to avoid stuff like Slashdot, Engadget and Boing Boing. They often have great …


How To: Resizeable Background Image

If you are looking for how to do FULL SCREEN BACKGROUND IMAGE, go here.

My friend Richard recently came to me with a simple CSS question:

Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. Also, make sure it retains its ratio (doesn't …


Links of Interest

Line Height Abnormal

Eric Meyer digs into some of the peculiarities of line-height:

Here’s the punchline: the effects of declaring line-height: normal not only vary from browser to browser, which I had expected—in fact, quantifying those differences was the whole point—but they also vary from one font face to another, and can also vary within a given face.


Setting a Body ID (with PHP)

I've mentioned the powers of giving your body tags an ID about a million times …


Redirecting to a Splash Page ( …but only once! ) with Cookies

Splash pages can be annoying. You know the ones... like being forced to watch some advertisement before you can see the page you are trying to get to. Or maybe some fancy introduction to a site that you are automatically redirected to every time you visit. Great.

There are some circumstances where a splash page can be useful. Say you are running a band website and they release a new album. You may want to redirect people visiting to a …


Sponsored Feature: Flipping Book

Flash can do some amazing stuff. Stuff that can leave even the handiest CSS and Javascript developer drooling with envy. We then sulk back to our caves because, alas, Flash is not the development path we have chosen. This is a foreign world who's amazing feats are out-of-grasp lest we start learning a whole new development environment from scratch.

One of those drool-inducing Flash feats is Flipping Book. This is an amazing Flash object which mimics the behavior of …


Poll Results: What Javascript Library Do You Use?

...and the jQ's have it! At the time of this writing over 1500 people have responded to our latest poll "What Javascript Library Do You Use?" making it our biggest poll yet. jQuery is the run-away victor with over 50% of the votes. What does this mean? Just that the beautiful and intelligent readers of CSS-Tricks have a tendency to lean toward jQuery. However, since this site is largely design focused and there was the whole other 50% of votes …