Grow your CSS skills. Land your dream job.

Article Archives

Ajax Image Uploading (With Less Suck)

This technology demo is courtesy of ZURB and the post was co-authored by ZURB and Chris.

How do you upload images now?

You select a file and click upload. Simple right? Except once you select your image you can no …

June 10, 201046 comments

Instant Productivity

All jobs are a series of tasks needing to be completed. Let's look at a construction worker. Today she needs to bust up a bunch of cement. Here is one path of action:

Put hardhat on
Start jackhammer
Bust up …

June 9, 201055 comments

NetNewsWire Theme: Fixed

I love me some Google Reader. I got all my feeds up in there and it's like having the longest most interesting newspaper ever. It brings me great pleasure to know that when people build all these RSS reading …

June 8, 201025 comments

Transparency in Web Design

How is it done? Let's take a gander at four different ways. Each of them handling the illusion in a different way, and each completely appropriate depending on the situation at hand.

Totally Friggin Fake It
From the Spectrum Theme
June 6, 201062 comments

CSS3 Button Maker

Drag things, pick colors, make a nice class for your buttons... introducing the Button Maker.


Boy, that's a nice button right there.

I'm saying "CSS3", because these make use of gradients, shadows, and rounded corners which contribute greatly to …

May 30, 201079 comments

New Poll: How many websites do you launch per year?

There is a new poll in the sidebar. RSS readers, you'll have to make the jump. The question is:

How many websites do you launch per year?

The idea is to gauge how many different projects you all are involved …

May 27, 201098 comments

Poll Results: Server side language of choice?

Over 18,500 people voted on this last poll, making it the most voted-upon poll in this site's history, when I asked:

What is your server-side language of choice?

Now I'm definitely a front end guy writing about mostly front end …

May 26, 201080 comments

Parallax Background of Stars (plus CSS3 keyframe animation)

This idea was originally published on 3/12/2008, where you had to resize the browser window to see the parallax. I updated it on 4/6/2009 to utilize jQuery to move the stars automatically. I'm now updating it again to use CSS3…
May 25, 201027 comments

Efficiently
Rendering CSS

I admittedly don't think about this idea very often... how efficient is the CSS that we write, in terms of how quickly the browser can render it?

This is definitely something that browser vendors care about (the faster pages load …

May 24, 2010112 comments

Google Font API & Interview

Google announced their new Font API yesterday, including a font directory and preview tool. They teamed up with TypeKit, to build and open source the WebFont Loader.

I quite like how they have done it. You just hotlink

May 20, 2010107 comments

RGBa Browser Support

This article was originally published on February 2, 2009 and is now being updated to clarify the concept and update the information for modern browsers.

RGBa is a way to declare a color in CSS that includes alpha transparency support. …

May 19, 201074 comments

We Love LOST

Tonight is the next-to-last episode ever of LOST. I've been a fan since the start, watching the released seasons several times with different friends over the years. Even powering through the Season 3 slump =). Just for fun, Richard and …

May 18, 201027 comments

Pointer Events & Disabling Current Page Links

It is a long-standing web design standard that the logo in the header area links to the homepage of the site. Another standard is that when displaying the navigation of a site, to highlight in some way the "current" page, …

May 17, 201066 comments

Circulate

I had the occasion come up recently where I needed to animate something in a circle. It never occurred to me until then that there wasn't an obvious solution to this already with jQuery. So I figured out a way, …

May 12, 201066 comments

Reduced Test Cases

If you are having trouble with something while building a webpage, the most helpful thing you can possibly do is start building a reduced test case. "Trouble" could be anything: the CSS isn't doing what you think it should, the …

May 11, 201025 comments

Specifics on CSS Specificity

This article was originally published on August 11, 2008. I am updating it now to fix some inaccuracies in how this concept was presented.

I've never specifically covered this subject before. (rimshot!)

The best way to explain it is to …

May 10, 201069 comments

Dynamic Page / Replacing Content

This article is an update to this old article, which had an ugly demo and a variety of techniques in it no longer probably considered good practices. This new demo is much cleaner, up to date, and fuller featured.…
May 7, 2010105 comments

Organic Tabs

This article was originally published on October 27, 2009 and is now being updated to 1) be turned into a jQuery plugin 2) have multiple demos on one page 3) utilize jQuery event delegation and 4) prevent animation queuing. Edited…
May 5, 201092 comments

Table Row and Column Highlighting

In mid-2009 I did a screencast about tables which featured how to do row and column highlighting with jQuery. The method in the video isn't nearly as efficient as it could be, so this is an update to that. Shout…
May 4, 201038 comments

May is Maintenance Month

There are over 600 blog posts on this site over the course of nearly 3 years. Some of them are... better than others. I think it is the responsible thing to do is try to keep that content current and …

May 3, 201026 comments

jQuery UI’s Position Function (plus, MagicZoom from scratch)

Knowing how to position things where you want them is one of the most important tools in a web designer's toolbox. Understanding page flow, understanding everything is a box, understanding floats, etc. Once the basics are learned, a common …

April 30, 201032 comments

My Stuff from jQuery Conference

The Bay Area jQuery Conference was amazingly fun. I met TONS of great people who I've wanted to meet forever. It was kinda like a Bluegrass Festival in some ways. The sessions weren't recorded so unfortunately you can't check them …

April 28, 201023 comments

Different Stylesheets for Differently Sized Browser Windows

Otherwise known as "resolution dependent layouts". Single website, different CSS files for rearranging a website to take advantage of the size available.

There is a W3C standard way of declaring them. One way is to test the "device-width", like this:…

April 23, 201078 comments

Quick Critiques with CritiqueTheSite.com

I made a thing. The idea is to have a super-quick, nearly mindless way to get a critique-based conversation thread going based on any URL. See:

http://critiquethesite.com/css-tricks.com (it works best with big wide monitors, since there is the fixed left …

April 21, 201048 comments

Gift Message Printer

We have a client who sells a product in which customers specify a gift message when they check out. The site has been very successful for them and orders are coming faster than expected. The have been hand-writing the notes …

April 19, 201024 comments

Loading Dots jQuery Plugin

Loading.... It's a design pattern we've all seen before, because it's just good user feedback. This is a quick jQuery plugin to apply it to any element when called (exactly in the middle of it).
April 16, 201026 comments

Child and Sibling Selectors

Do you know what the difference between these selectors are?

ul li { margin: 0 0 5px 0; } ul > li { margin: 0 0 5px 0; }

I'll admit it took me longer than it probably should have …

April 14, 201053 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 …

April 12, 201088 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 …

April 9, 201030 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. …

April 8, 201031 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 …

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

April 6, 201017 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 …

April 5, 201043 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 …

April 2, 201033 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
March 31, 201040 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 …

March 30, 201044 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.

Multiple Text Shadows

The major empowering concept here is the CSS3 property text-shadow. Typically …

March 29, 201038 comments

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 …

March 26, 20100 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?
March 25, 201076 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 …

March 24, 201036 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 …

March 23, 201072 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 …

March 22, 2010122 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 …

March 19, 201056 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 …

March 18, 201029 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 …

March 17, 201069 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 …

March 16, 201093 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.

Winners

Of course all these people did a great job. For their …

March 15, 2010103 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 …

March 12, 2010214 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, …

March 11, 201028 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 …

March 10, 201017 comments

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