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

Article Archives

88 comments

Why Containers Don’t Clear Themselves

One of the hurdles (and "ah-ha" moments) in learning CSS is this business about clearing floats. If you have no idea what I'm talking about, check out the classic All About Floats.

I specifically want to talk about the issues of "collapsing", that is, how elements that contain floated items don't take those floated items into account in calculating their height. For example a parent element that only contains floated items will have a zero height. This is …

30 comments

jQuery CSS Abstraction

It should be said, first and foremost, that you should try to keep your styling and your JavaScript away from each other. If you want to change the style of an element with JavaScript, add (or remove) a class name from the element. Then use that class name as your hook in the CSS to affect the styling.

However, there are times when you need to apply styling within JavaScript. jQuery has a function just for it:

$("#thing").css("margin-right", 0);
31 comments

CSS Secret Message Generator

I know ya'll were just thinking to yourselves: man, I hope Chris posts some super nerdy article today with some nearly-useless technique that if I talked about in public would clinch the fact that I'm not getting laid anytime soon. Don't worry, I got your back! Check out the CSS Secret Message Generator.

Using it is (I hope) fairly straightforward. You click some letters, then those are the letters which secretly reveal themselves when the text is selected.

There …

43 comments

More than one way… (delegate edition)

There was a question in the forums about affecting non-hovered items. The effect they were after is that they had an unordered list of items and when they were rolled over, they would all dim (lower opacity) except the one hovered.

This can be done with CSS, using pseduo-selectors.

ul li:not(:hover) { opacity: 0.5; }

However we know that pseudo-selectors don't have very good cross-browser support. And for that matter, opacity doesn't either. jQuery is pretty good at mitigating …

17 comments

jQuery Conference + Win a Ticket!

I'll be speaking at the upcoming jQuery Conference. It is in the San Francisco Bay Area (Mountain View, at the Microsoft Campus) on April 24 – 25, 2010. Just check out that link for all the details. It looks pretty great.…

43 comments

Slot Machine Tabs

I was looking at the features page of a web service called Fluxiom. I haven't used the product (although it looks pretty nice and might be good few a couple of our clients). It's the tabs on that page that I thought were pretty neat. As you click a different tab, the three columns of text fly upward at different rates and are replaced by new columns. It looks kinda like a slot machine. I didn't investigate too deeply how …

33 comments

The Abstraction Point

Reader Joe Bob sent me a link to IxEdit to ask what I thought. I hadn't heard of it, so I checked it out. They have a six minute video you can watch which explains it pretty well. In a nutshell, it's a GUI editor for creating interactive stuff on websites. Click an element, tell it how you want it to behave. Think of it like CSS Edit for jQuery (it uses jQuery and jQuery UI to do it's thing). …

40 comments

Middle Box Links

Worst name ever, but I was having a hard time naming it and that seemed to fit the bill. This is the end result:

It covers a variety of things I thought were interesting:

  • jQuery 1.4's new element creation syntax which is pretty cool and we haven't covered
  • Writing a little plugin to prevent repeated code (and keep it in the spirit of jQuery)
  • Touches on what I am starting to consider object-oriented CSS
44 comments

Estimating Projects

I like the way that we estimate projects1 at Chatman Design2. I think it epitomizes "real world" web design. We do our best to streamline the process and have a methods to the madness. But a lot of the time, estimates come down to educated guesses. Most importantly, we try and make things as clear, understandable, and fair for both the potential customers and us.…

38 comments

3D Text Tower

Have you seen David Desandro's site? It's pretty slick. His footer is especially fun:

The technique is clever in it's simplicity. Let's take a look.…

LessConf3010

I'll be heading down to Atlanta, Georgia to attend LessConf3010 on May 21/22, 2010. They can say it better than I can:

LessConf is a conference with talks ranging from startups to design to marketing to business. It's a casual two-day event in Atlanta Georgia with awesome speakers here to inspire you. Each speaker will have a 45 minute talk followed by a 15 minute Q/A session with Steven Bristol.

It's put on by Allan and Steve of LessEverything. …

76 comments

Data URIs

Did you know that you don't have to link to an external image file when using an <img> element in HTML, or declaring a background-image in CSS? You can embed the image data directly into the document with data URIs. The end result can be a site with all the less HTTP Requests, but at what cost?
36 comments

32766

Update December 2011: This bug is fixed in Opera 11.60

This is a bit of an interesting number. Google turns up a number of bug-related threads. The reason it came up for me, is that I get a lot of emails like this:

The AnythingSlider doesn't work in Opera!!!

They were right... but it seemed to be a fairly new issue and I never could figure out why. It turns out it all comes back to 32766. …

72 comments

Indeterminate Radio Buttons

There is a pseudo class selector, :indeterminate, whose job it can be to select radio button inputs which are neither selected (have attribute "checked") or unselected (don't have that). This is a CSS3 selector, which may be in response to the HTML5 spec, which explicitly allows radio buttons to be in this state:

If none of the radio buttons in a radio button group are checked when they are inserted into the document, then they will all be initially …

122 comments

Grid Accordion with jQuery

Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space.

Basic accordion from jQuery UI

One way to look at an accordion is like a collapsed single column of a table. I was recently building a page …

56 comments

The Hard Part First

I like the submit form on Art in my Coffee. It packs a lot of features into a compact space and is clear about what you are able to do and what is required of you. But best of all, I like how the very first thing it asks of you is the hardest part of the whole form.

It's just a simple file input box, why is that the "hardest part"? Think what that input box represents.

  1. User
29 comments

What Changed?

If something was working, but now it's broken, then something changed.


Many things are the same, some are different.

This is true with anything: your watch, a remote control, even your relationships. It's certainly true with websites. If your website used to work fine, but now it won't load, then something changed. To fix it, you need to figure out what that thing was.

Pretty obvious? Sure, if everything is working great for you right now. But the minute something …

69 comments

Meet the Pseudo Class Selectors

Pseudo class selectors are CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover:

a:hover { /* Yep, hover is a pseudo class */ }

They are immensely useful in a variety of situations. Some of them are CSS3, some CSS2... it depends on each particular one. Outside of IE, they have great browser support. In IE land, even IE8, support is pretty barren. However, the IE9 preview has full support

93 comments

Review of LightCMS

Back in the summer of last year, I did a little roundup I called The "Light" CMS Trend. Ironically enough, one that wasn't included was LightCMS. I've been checking it out (yes, this is a sponsored review) and it definitely fits the category, with some features that set it apart.

103 comments

CSS Off Results

Alright so after one missed deadline, the results are here! You can browse all the scores and see peoples entries on the CSS Off results page.

214 comments

New Poll: Server Side Languages

A bit of a cookie-cutter poll this time, but sometimes those lead to the biggest and most interesting discussions. This is for the folks around here who are more of web developers than web designers:

What is your server-side language of choice?

Poll is on the site in the sidebar for your voting pleasure (now moved to the archives).

Many of you probably know multiple languages. Some of you probably are forced to write in particular languages for your …

28 comments

Poll Results: Punctuation Inside or Out?

Quite a lot of people weighed in on this poll that went out in January. The question was:

Should tags like em and strong go <em(outside)</empunctuation characters, or (<stronginside them</strong)?

Like many polls around here, the question was interesting and stirred up some great conversation, but the question itself was probably flawed. There were only two choices: outside and inside, referring to placement of the HTML tags. So if "outside", in the example in the …

17 comments

CSS Off Update

I was telling everyone to check back Wednesday for CSS Off results. Well... #facepalm. Huge apologies, we still aren't quite ready. As it turns out judging 136 entries is quite a huge task. The important bit: come hell or high water, results will be posted Monday. You'll be able to browse all the entries and see how we scored each based on the criteria we chose. So between the organization, initial judging, top entries judging, and crafting the results …

35 comments

Rabble Rabble Rabble!

CSS3 is a big mess! 4+ rules for making a corner round or adding a drop shadow! Preposterous! Where are the standards?!

I've been hearing a ton of that. There is something of a point here. We all like standards, no question they are a good thing for the industry. Seeing a bunch of messy/repeated code like CSS3 can produce doesn't feel like the clean happy code that standards is supposed to be all about.

But here is the deal.…

Updates / Links

If you were interested in that CSS Tabs stuff from yesterday, check out the new demo. I got a little obsessed with it and tried out a bunch more things. Still nothing I'd call a 100% perfect replacement to using JavaScript for tabs, but getting a lot cleaner and closer.

I'm sure most of you read these sites anyway, but just in case... …

49 comments

CSS3-Only Tabbed Area

MORE CURRENT ARTICLE: Functional CSS Tabs Revisited

When you think of "tabs", your mind might go right to JavaScript. Watch for a click on a tab, hide all the panels, show the one corresponding to tab just clicked on. All major JavaScript libraries tackle tabs in some way. But there is a way to accomplish this same idea with "pure CSS". Just as we did with the CSS Image Switcher, let's tackle this traditionally JavaScript project with only CSS.…

64 comments

Unicode Characters for Class Names

Reader Kartlos emailed me in pointing to me to an interesting article by the great Mr. Snook from a few years back. I don't think I had seen it before and it's a bonafide "CSS Trick" so I thought I would share.

The idea is that you can use unicode characters (read: fancy symbols) for class names in your HTML, and even use write CSS selectors with those same characters.

<div class="♫"> A.A. Bondy <em>I Can See The Pines Are
32 comments

Increment Inputs with the Mousewheel

In the past we've covered adding +/- buttons to number-based inputs to help user interface (it's easier than typing in some circumstances). Reader Hitesh N Chavda emailed me with the idea of doing it with the scroll of the mouse wheel instead.


With the mouse cursor inside the input box, you can use the mouse scroll wheel to increment the number up and down.

Hitesh worked up a technique for doing it using jQuery, which works great. Then later he …

27 comments

Digging Into WordPress, v2 Back in Print

We sold out of our first batch of Digging Into WordPress books in a matter of weeks. We could have just ordered more as soon as supplies were low, but it just so happened that right about that time WordPress 2.9 was out, which has many new features. We were already working on revising the book, so we figured instead of reprint books that were 2.8.6 based, we would wait to finish all the 2.9.2 stuff and reprint the book …

25 comments

New Snippet Buttons

I've added two new buttons to all of the code snippets in the Snippets section of the site. Now a button to add directly to Snippets.app and a button to directly copy to the clipboard join the Coda and Textmate buttons.

Read on for some more details about them, and remember, you can help the Snippets section grow by submitting yours.…

32 comments

Multiple Login Forms with Highlighting

This is a little specific... but I figured what the heck maybe it will be useful for someone. I recently had occasion to make multiple different login forms on a single page. With CSS we know we can apply styling to active inputs with :active. That's useful... and we've covered how to do both input and label highlighting before. But now we need go one step up and highlight the current form itself.

65 comments

Multiple Class / ID and Class Selectors

Can you spot the difference between these two selectors?

#header.callout { } #header .callout { }

They look nearly identical, but the top one has no space between "#header" and ".callout" while the bottom one does. This small difference makes a huge difference in what it does. To some of you, that top selector may seem like a mistake, but it's actually a quite useful selector. Let's see the difference, what that top selector means, and exploring more of that …

89 comments

Chat2: Group Chat Room with PHP, jQuery, and a Text File

This is an update to original Chat Room we published here on CSS-Tricks. In some ways, the technology is the same. We are going to employ PHP to talk to the server, jQuery to keep the chat rolling, and the chats themselves will be stored in .txt files just like the first version.

What is changed is the addition of some new features:

  • Usernames are unique to users currently chatting
  • You can see a "currently chatting" user list
  • There are
34 comments

Highlight PHP and JavaScript Code with PHP

PHP has a cool function that automatically highlights PHP code called highlight_string(); Theoretically this could be used to roll your own code highlighting on a site, rather than rely on JavaScript or some kind of external service to do it. In this article I'll show you the basics of how it works, then extended it with a few tricks. Since JavaScript is so similar to PHP in syntax, we can trick the function into highlighting JavaScript code as well. Then …

77 comments

CSS Off Update

Wave that checkered flag! Comments are closed and the entry form is shut down as the deadline for the CSS Off has now passed. We had an incredible 136 entries! A few right at the buzzer which makes me worry some people didn't make it, but them was the rules. I honestly thought there would be 20, 30 tops.

We'll begin judging shortly. This is going to be a big task for @dougneiner and I, so please bear with us …

114 comments

The Skinny on CSS Attribute Selectors

CSS has the ability to target HTML elements based on any one of their attributes. You probably already know about classes and IDs. Check out this bit of HTML:

<h2 id="title" class="magic" rel="friend">David Walsh</h2>

This single element has three attributes: ID, class, and rel. To select the element in CSS, you could use an ID selector (#first-title) or a class selector (.magical). But did you know you can select it based on that rel attribute as well? That is what …

13 comments

Five Questions with Jonathan Longnecker

I met Jonathan at a conference last year. Jonathan was giving a presentation about ExpressionEngine and how good it is for designers. He gave me a good natured ribbing about my use of WordPress. Read the interview below where I ask him about that, his work, his side projects, and more.…

250 comments

The Great CSS Off & Giveaway

Alrighty folks, here's the deal. I have a whole bunch of stuff I want to give away. Mostly books on web design and development. I've been deep in thought trying to figure out the best way to give them all away. I definitely didn't want to spam Twitter. I also didn't want to do a "just leave a comment" deal because I think that's too easy and just leaves behind a sea of junk comments.

I've settled on a good …

114 comments

jQuery MagicLine Navigation

These "sliding" style navigation bars have been around a while, I just thought I'd take a crack at doing it myself as the opportunity came up recently. Turns out it's really pretty darn easy. I put two examples together for it.…

54 comments

How nth-child Works

There is a CSS selector, really a pseudo-selector, called nth-child. Here is an example of using it:

ul li:nth-child(3n+3) { color: #ccc; }

What the above CSS does, is select every third list item inside unordered lists. That is, the 3rd, 6th, 9th, 12th, etc. But how does that work? And what other kinds of things can you do with nth-child? Let's take a look.…

26 comments

Threadsy Invites / Haiti Poster Project

Two things today.

First, have you guys heard of Threadsy? I hadn't, but apparently they got 2nd place at TechCrunch 50, which is pretty great. It's a web application that combines several of your online "input streams" (e.g. Email, Twitter, and Facebook). I think that's actually all they do right now, which I find kind of awesome, because those are the only ones I use anyway.

50 comments

Link Underlines Grow to Backgrounds on Hover

A reader recently emailed in asking if I knew a way to have links be underlined, and then have the underline grow upwards on hover and turn into a background/highlight effect. I ended up trying three different things, with varying levels of success.
69 comments

Free Template: DocTemplate

Totally free template for ya'll today. It is fully of AJAX navigation goodness, so subpages load dynamically with no page reload. If you don't like that part (for example, you are trying to put JavaScript demos on the subpages and they won't load that way) just remove the JavaScript files from the header and it will revert to regular nav. Enjoy!
58 comments

Make All Links Feel Subtly More Button-Like

On this current design of CSS-Tricks, you may have noticed how all links bump themselves down one pixel as you click them. I started noticing this effect on sites of luminaries like Tim Van Damme and Andy Clarke, so credit where credit is due.

As you might imagine, it's incredibly simple. Let's take a look.…

47 comments

Thank You (2009 Edition)

Before January slips away from me, I want to get my annual Thank You post out! Thanks to TheDoc (our resident prolific forums guru) for reminding me.

186 comments

Designers These Days…

... have a good design sense and understand the fundamentals / design principals.
... know all the major design software including the entire Adobe Creative Suite.
... have some basic video editing skills.
... know HTML, CSS, and JavaScript.
... know enough about server-side languages (PHP, ASP, Ruby, Python, etc) to understand how they work, what they do, and the possibilities of their use.
... know about servers, hosting, domain registrants, DNS, etc. Setting it up, and fixing it when …

41 comments

Redesigning an “Edit Product” Page

I decided that in 2010, I was going to design more things. I didn't do as much just straight up designing of things in 2009. So rather than wait around for opportunities to come to me, I am going to just pick random things to redesign. At the day job we just got done doing a whole ton of data entry for a client, that we do every year when they revise their catalog. We use Pinnacle Cart for this …

26 comments

Updated Bookshelf

In an effort to provide a permanent resource to the question "are there any books you recommend?", I created the CSS-Tricks Bookshelf. It had slowly gone out of date, so now I've bought it back up to date with new version of books, some new favorites, and some old classics.


This kick ass book, and more, on the updated bookshelf.…