Grow your CSS skills. Land your dream job.

Article Archives

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

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

March 9, 201035 comments

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 …

March 9, 20100 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 …

March 8, 201049 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 …

March 5, 201064 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 …

March 3, 201032 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 …

March 1, 201027 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 …

February 26, 201018 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 …

February 24, 201025 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 …

February 23, 201032 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 …

February 22, 201065 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 …

February 19, 201089 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. …

February 18, 201034 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 …

February 17, 201077 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: …

February 13, 2010114 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 …

February 12, 201013 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 …

February 10, 2010250 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 …

February 9, 2010114 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 …

February 8, 201054 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, …

February 5, 201026 comments

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