Grow your CSS skills. Land your dream job.

Article Archives

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 …

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 …

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 …

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 …

18 comments

CMS Expo, Chicago, May 3rd-5th

I'll be speaking at the CMS Expo this May 3rd - 5th (I speak the 4th and 5th). It's in Evanston, IL, basically, Chicago.

I'll be doing two sessions, one Tuesday, on Wednesday. One of them will be on advanced …

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 …

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 …

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 …

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

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 …

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

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 …

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 …

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 …

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 …

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

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

Milestones

Snippets Launched

The biggest addition to this site in 2009 was the …

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

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 …

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 …

41 comments

IE Background RGB Bug

Using RGBa for progressive enhancement is getting more and more popular, which is awesome. Even nearly a year ago it was pretty much ready to rock. A great way to handle the progressive enhancement part is just to declare …

96 comments

New Poll: Tag/Punctuation Placement

There is probably a right and wrong answer for this, so if that emerges, I'll update this article and mention it in the results. Regardless, I don't think it's obvious, so this poll should be answered on what you currently …

122 comments

How To Create an IE-Only Stylesheet

This article has been updated from an older version (originally Sept 24, 2007). I just wanted to expand it and make it more clear.

If you read this blog, there is a 99% chance you've had a hair-pulling experience with …

36 comments

Poll Results: Hyphens, Underscores, or camelCase?

My intention with this poll was to be kinda vague, so that people would respond about what they like the best instead of thinking of one particular instance of usage. Usage could be where ever you need to manually name …

43 comments

Increase Traffic by Reducing Traffic

What? Yeah sorry, dumb title.

Here's my point: when websites offer awesome things that seemingly would reduce the amount of traffic they get, the cumulative effect is increasing traffic.

APIs

Flickr offers robust APIs. With them, you can upload, download, …

54 comments

Rational Z-Index Values

A reader named Arjan recently emailed me telling me about a website that The Printliminator didn't work on. They had traced it back to the fact that the site used a bunch of "overlays" with ridiculously high values for z-index. …

36 comments

Background Desires

The background property is a major player in what makes the awesome CSS designs of today possible. There are just a few properties that make it up: background-color, background-image, background-position, background-repeat, and background-attachment. Very simple, very powerful. I have a …

75 comments

Curating Comments Threads

Long comment threads on blog posts are a mixed blessing. It is great to have stirred up such great community discussion. But anything beyond, say, 20 comments is beginning to get beyond what anyone is willing to actually read. What …

34 comments

Random Ad Positions

If you have multiple display ads of the same size in a block on your site, a good thing to do is randomize their position in the block. It's more fair to the advertisers and the different layouts reduce ad …

97 comments

Less Ridiculous Standard Ad Sizes

I recently said that I thought the current "standard" pixel dimensions for ads are ridiculous. 728x90? 88 x 31? Wha? I have a new idea: ad sizes that make sense.

Let's start with a basic building block. 125x125 is very …

31 comments

Filtering Blocks v2

This is an update to the first version of filtering blocks I did a while back. The idea is that you have a long list or large set of "blocks" on the page. Each block belongs to a certain group. …

27 comments

Cross Domain iframe Resizing

<iframe>'s which display content from different domains have security measures in place to prevent all sorts of stuff. For example, you can't have JavaScript access anything inside it. It can be very frustrating, for example, if you just want to …

40 comments

On Web Advertising

On this week's screencast I talk about online advertising. What it is, how it works, and mostly, my opinions about it. I thought I'd recap here and touch on some things I forgot about.

Content Websites vs. Product/Service Websites

There …

76 comments

One Page Résumé Site

A friend of mine recently sent me her résumé to look over. I'm definitely not a professional job hunter but I think in these situations any extra set of eyes can help fine tune the final product. As it was, …

28 comments

Seeing The Details

When a great musician hears a great song, what do they hear? I am not a great musician so I can only speculate. I would guess that they listen for the emotion behind the song. Great songs are great because …

47 comments

Digging Into WordPress – in Print!

The print version of Digging Into WordPress the book is now available here. It's been an awesome journey, taking this from idea to final product and having 100% control over everything. That is a story for another post, for …

18 comments

Automatic IMDb / Netflix / Amazon Movie Links

In this article we'll look at a way to automatically create and insert links that link out to the popular movie-based sites (or sections) Netflix, Amazon, and IMBb. We'll use jQuery JavaScript for this, so that this happens on the fly using soley the name of the movie, reducing what would be a tedious chore of manually collecting all these links into just a few lines of code.
18 comments

Multi-product Quantity-based Order Form

The point of this form is that users enter quantities for different products and the math is done automatically updating all the different totals: quantity total, subtotal, shipping total, and final total. Monetary formatting is kept intact with some helper functions. Foxycart is integrated to show how it might work in the "real" world.
180 comments

Design v6

I've been tinkering with this redesign maybe a month or two, and decided to push it out last night. I had been using it myself thanks to the Theme Switch plugin, but there was a few things I had to actually go live before I could change, so I just did it. As usual, it's not an absolute overhaul, more of a refresher.
24 comments

Aborting Links, Cross Browser Comparisons

The situation: you click down on a link and you suddenly realize you didn't want to click that link. So before you release the mouse button, you move the cursor away from the link.

This is what I am calling …

76 comments

Don’t Use Black for Shadows

That is, "don't use black for shadows over colored backgrounds." This is because shadows in real life are not black. They are darkened versions of whatever they sit on top of, because there is less light. Or, am I whack?
87 comments

Musings on Paginating Chronological Content

Pagination is a ubiquitous design pattern on the web. Thanks, in part, to huge sites like Google using it. Pagination is a metaphor. It is a way to break up content onto multiple pages when putting it all on one would be to overwhelming or resource intensive. Google's approach has defined how we think about pagination, and thus what we feel to be intuitive. But to what end?
6 comments

Elsewhere

Some links to stuff I have been doing outside of CSS-Tricks. Jason published a "part 9" of the Building a Web App from Scratch series. I wrote an article on my personal blog on using Safari for a week. The Digging Into WordPress books are at the printer!
39 comments

Fully Executing jQuery Animations Without Queuing

It is pretty common when using jQuery's .animate() function that it is triggered by a mouseEnter or hover event. This means that we need account for those events being triggered multiple times. This article goes through my journey of trying to find a good solution for this, and ultimately a plugin that does the job rather nicely.
156 comments

New Poll: Hyphens, Underscores, or camelCase?

I'm talking about anywhere you need to write multiple words, but can't use spaces. For example: CSS classes and id's, programming language variables and function names, website usernames or passwords, etc.

You can vote in the poll in the sidebar. …

*May or may not contain any actual "CSS" or "Tricks".