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

Article Archives


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 …


Launch: Band Website Template

Sorry folks, The Band Website Template has been discontinued. It was as great run, but we've decided to move on to other projects and clear up the time we spent maintaining and supporting this one.

I've been working on this joint project for quite a while now, and it's finally ready. Introducing the Band Website Template! Brought to you by yours truly and David Walsh.

What is the Band Website Template?

The Band Website Template is a downloadable package …


Toolbox CSS

Over on Tutorial Blog, I shared my "Toolbox CSS" that I like to use:

What is Toolbox CSS?

Toolbox CSS is styling information that has nothing uniquely to do with any particular website. These are a collection of common styles that can be useful on any web project. How many times have you written a class for clearing a float? Too many, is my guess. The idea with Toolbox CSS is to include a separate stylesheet for these "utility" styles.…


Links of Interest

CSS Qualified Selectors

Shaun Inman has an idea for a submission to the CSS3 Working Group he is calling CSS Qualified Selectors. Definitely read the article to get the full low-down, but I'll summarize: this is a way to add styling to a parent element based on its children. For example, if you have a list item that contains a visited link, right now you are only able to target the visited link with CSS such as "ul …


How To Fix Video Slowing Down Your Page Load Time

I have a client who demanded an auto playing video on their homepage. Normally our job as designers is to translate our brain's first thoughts:

"OMG. WTF? Are you trying to drive people away never to return?"

Into something more like:

"I'm not sure that is the best idea right now. Some people find autoplaying video on websites annoying and our goal is to keep people on the site so they can discover more about you."

But sometimes it comes


From The Forums: Fluid, Fluid, Fixed & More

The CSS-Tricks Forums have been going very well since launch. It has only been just over a month and we have 130+ members and 660+ posts. Lots of great discussions have popped up and lots of folks have gotten the troubleshooting help they needed. Huge thanks to everyone! I thought I would highlight a couple of the threads:…


Weather Switcher Updated

I wanted to post a quick note to let folks know that the Weather Switcher that me and David Walsh whipped up a while ago has been updated to actually work again. Yahoo made a slight change to how they were serving up that weather data (grumble...)

Several people have had problems with this lately, and I'm sure this is why. Enjoy!…


Better Pull Quotes: Don’t Repeat Markup

Pull quotes are wonderful. They can really draw a readers attention and they are a great opportunity for cool typographic work. On a blog though, pull quotes are particularly difficult to "pull off" (get it?!).
This is because of RSS. On your own site, you can create a pullquote using any kind of markup you want. Perhaps a paragarph tag with a class of "pullquote". But when that goes out to RSS readers, that tag will either be stripped or …


Sponsored Feature: Web Resources Depot

I'm a junkie for web resources websites. I love browsing through them because I am always bound to find some example of something that sends my mind off on some tangent thinking about the possibilities. How can I extend it or modify it? What other applications can I find for it? Do I have any clients who it would work for?…


Can We Prevent CSS Caching?

When you are developing a site, there is a heck of a lot of "refreshing" going on. You start to get a pretty good feel for what your browser is going to pick up on a single refresh, and what it won't. For example, I find that if I over-write an image file on the server, it will take me two refreshes for that image to update on the live site. Then maybe I'll pop over into Opera and see …


IE CSS Bugs That’ll Get You Every Time

IE 6 actually had the best CSS support of any browser when it first came out... SEVEN YEARS AGO. The little bugs in it's CSS support still haunt us to this day. I still get comments from people who roundly reject any technique that doesn't work in IE 6. While I generally refuse to pander to IE 6's limitations, I still feel it is important to make things look right in it whenever possible. Here are that major bugs in …


Links of Interest

NETTUTS Launches

If NETTUTS lives up to the quality standard of PSDTUTS, this is going to be a great resource for web design and development tutorials!…


Improved Current Field Highlighting in Forms


As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or "focused") field. Some browsers (Safari/Opera) have decided that is so important, that it take matters into it's own hands and applies a glowy blue border around active form elements:…

one comment

Talent Hunters and Job Seekers: Authentic Jobs

Authentic Jobs is widely regarded as the premier job board for web designers and developers. It is run by Cameron Moll who himself is an incredible designer. You can help support CSS-Tricks, and help yourself by finding talented people to work for you, by using Authentic Jobs.


Fine Use for the Adjacent Sibling (“+”) Selector

My friend Richard came to me with an interesting problem yesterday. He was using some API of some kind that was returning to him a big list of companies. Each company had text, and most (but not all) also had an image. He wanted to use the image if they had one, but if he was showing the image he didn't want to show the text also. The solution had to be to output both the image and …


New Poll: What is your Javascript library of choice?

I know I've been talking a lot about jQuery lately, but I promise I won't stray too far off the CSS path. I would like to find out what everyone else's favorite Javascript libraries, hence the new poll, "What is your javascript library of choice?".

I know for a fact we have some serious advocates for jQuery, MooTools, and Adobe Spry around here, which is awesome we have that diversity. But it will be interesting to see how popular the …


Now With Archives!

There were pretty much no archives to speak of on CSS-Tricks before. You could browse by month and year (and I'll probably leave that alone for now), but that was a really crappy way to peruse the archives. Thanks to a fancy little plugin I stumbled across, there is now an official CSS-Trick Archives page.

In other meta-news, I completed the upgrade to WP 2.5, which was almost entirely painless (thank god). …


Some Updated and Improved Examples

We are all learning and becoming better web designers and developers all the time. At least I hope we are, that is the whole point of this site! It is always a good idea to re-visit things from time to time and make sure we did things as well and as smart as we are able. If it's been long, chances are there are things that can be done better. Here are some examples that I have updated recently.


Links of Interest

Clearing absolutely positioned elements fixes IE bug

The actual title of the article is "CSS - An Absolute Mess", but I retitled it here to something less linkbaity and more accurate. Nonetheless, a valid fix for something IE normally borks.


Who Should Redesign?

Another one of these design-related hot-or-not style sites where you vote on if a site should redesign or not. Yes, yes, yes, yes, yes, yes....


Accordian to who?

Couple of great accordian …


Fade-in Spoiler Revealer

jQuery has some really simple built in features for "fading in" and "fading out" different page elements. I thought we could exploit some of those functions for a really simple Spoiler Revealer.

View DemoDownload Files

Between some smart CSS and jQuery, we can keep our markup really clean. Take a look at the usage here:

<p>In the movie Citizen Kane, Charles Foster Kane's last word "Rosebud" turns out to <span class="spoiler">be a sled.</span></p>

That's right, just …


Indent CSS Changes You Are Unsure About

Sometimes the simplest little things can save you major headaches later. The kind of headache I am talking about here is when you make a change to a CSS file only to find out days later that it broke something on a part of your website you didn't notice at the time. It could be very obvious. You remember exactly what you did and can jump back in there and fix it. But what if you made a lot of …