The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

Article Archives

Rotating Molecules with 3D Transforms

Click-and-drag to rotate these complex objects through a pseudo three dimensional space. It's a familiar design pattern, but one that is particularly difficult to pull off. No Flash, not even canvas. Just some fancy JavaScript and CSS (WebKit 3D Transforms). And it works on Mobile Safari with touch events as well!…


So You Need To Fill a Dropdown Dynamically

You have one dropdown menu, and depending on the user's choice in that one, a second dropdown gets filled with choices. Let's cover three different ways you can go about that.…


Commas Before

Marc Grabanski brought up and interesting idea on Twitter yesterday.

Commas before or after the line on json objects and multi var definitions?…


Garage Door Style Menu

Originally published on July 21, 2008 as only a jQuery technique. Now updated to include CSS3 and a combo technique which is mo' betta.

A garage door style menu is where an image (the "door") slides up to reveal something behind it. We'll do this in two ways, with CSS3, and with jQuery. Then we'll combine them into a progressive enhancement way to handle it. …


Parent Selectors in CSS

Let's be clear here, just in case someone is finding this from a search engine: there are no parent selectors in CSS, not even in CSS3. It is an interesting topic to talk about though, and some fresh talk has surfaced.

Back in 2008, Shaun Inman suggested the syntax:

a < img { border: none; }

[Corrected the following sentence]: In this example, it would select a tags but only if they contained an img tag. (Aside: this would …

Formalize CSS

Framework by Nathan Smith for nice looking, HTML5 ready, progressively enhanced, cross-browser forms.…


Fluid Width Equal Height Columns

Last updated in February 2015 by Marie Mosley.

Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element. But if one or more columns need to have their own background, it becomes very important to the visual integrity of the design.

THE PROBLEM: Three columns with different amounts of content only grow as tall as they…

Make a ‘View Source’ Button

Remy Sharp's cool site for HTML5 demos has a "View Source" button on each of the individual demo pages. Click it, and you see the entire source code for the page you are looking at. It's not a popup or a new tab, it just shows the source right there on the page. I thought that was cool so I set out to recreate it my own way.…


New Poll: Is Your Degree Related To Your Job?

The full question is:

If you have a degree from college and have a job, is that degree related to your current job?

It's pretty common to hear about folks who have made their way into the web worker world from some completely unrelated field. Hear enough stories like that and you might start thinking nobody who works on the web actually went to school for it. But is it true? How will real poll numbers look?

To clarify a …

Boilerplate CSS3 Media Queries

A collection of media queries from Andy Clarke to get you started building responsive sites. Responsive is the new word for sites that react to the space they have available to restyle their content the best they can in that space.…

Digging Into WordPress v3 – Back in Print

Version three of my book, co-authored by Jeff Starr, has been revised from cover to cover ensuring everything is up to date and featuring a new chapter on WordPress 3. Now the print version is back in limited quantity sporting a new fancy black glossy cover and black spiral bind (lays flat!).

It's not cheap at $70.00 (+S&H), but that's what it took to create this full-color beauty. Of course that comes with the PDF and free lifetime updates to …


Poll Results: Multiple JavaScript Libraries

The question was:

Do you ever use two JavaScript libraries on the same page?

My thinking in creating this poll was around two ideas:

  1. An excuse to educate people that using multiple libraries on the same page is generally a bad idea and not necessary.
  2. Uncover interesting scenarios where using multiple libraries on the same page was useful/required.

I was specifically talking about the big libraries that are general-purpose helper libraries for making working with JavaScript easier: jQuery, MooTools, Dojo, …


AnythingSlider 1.4

Since the AnythingSlider has been on GitHub, a number of people have pushed the project forward. Big props to ProLoser, Mottie, meancode, betzster, and kalasoft for committing code to make it more feature rich, smarter, and more optimized. …

WebP Image Format

Google has released a new image compression format called WebP (pronounced "weppy"). It is for photographic style images (like JPG) and also lossy (like JPG). Their example gallery has side by side comparisons where the WebP version is equal to in quality or better with smaller size. The download they offer though, has strangely different results... I've heard some murmors that the quality of WebP is worse, but also like JPG, there are quality settings so I'm not sure if …


Drawing Table

I made a thing, in which you can use your mouse cursor to draw on a grid with different colors. You can then copy-and-paste the HTML from the design you made.…


10 Mouthwatering Tips on Can Achieve Mega Blogging Success!!

That's what I titled a quick presentation I put together for this past Barcamp Tampa Bay. I thought I'd publish the slides here.

I'll also summarize:

  • Never title things like that. It's sensationalist, poor English, and doesn't say much about what lies ahead.
  • Of course you have to be passionate about what you blog about it. In other words, your life should already be about what you are blogging about, and the blog is an extension of that.
  • Don't

UI Pattern Ideas: List with Functions

Last week I asked people to participate in a group design project on a specific design pattern: a list with functions. The premise was:

The design pattern we are going to tackle is a list with functions. Think of a list of five names. The primary function of this list is to click the names. The secondary function of the list is that the list needs to be manageable. There needs to be some kind of functionality to edit and …

Promote JS

Finding correct, current, and well written documentation on JavaScript can sometimes be rather difficult. The web has a lot of misinformation on it (can you believe it?!). This is an attempt to get Mozilla's high quality documentation at the top of search engine results by having folks put specially crafted links on their site that link to specific sections of their JavaScript documentation.

These JavaScript kids are also so clever. Here is mine:

Dealing with Content Scrapers

Jeff Starr's response to my article on doing nothing about content scrapers. Among other ideas:

Sprinkling a few internal links throughout your posts benefits you in some fantastic ways: Provides links back to your site from stolen/scraped content, helps your readers find new and related pages/content on your site, makes it easy for search engines to crawl deeply into your site.…

Vendor Prefix Equivalents

Ever wonder what the Gecko equivalent to WebKit's -webkit-transition-timing-function is? This chart has got you covered. But more importantly, if the other rendering engines have those properties implemented at all.…

jQuery Summit

I'm speaking at the jQuery Summit, the 2nd Annual Online, Live jQuery Conference November 16 & 17th, 2010.

If you are interested, use coupon code JQUERY2CHRIS for 20% off!…


The prettiest of the CSS prettifiers. I find these things quite helpful when I'm inheriting someone else's CSS and I want to get it into the format that I like the most without doing it by hand. Actually, I usually start doing it by hand and then go: Oh yeah! Computers!

This is the one I was using before, which is functionally great and I like the style in which it asks you what to do (e.g. After brace insert …

WebKit Native Asynchronous Script Loading

WebKit nightlies are now supporting this. The syntax looks like this:

<script async src="myAsyncScript.js" onload="myInit()"></script> <script defer src="myDeferScript.js" onload="myInit()"></script>

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before …


Blockquote Bulge

In HTML, a block of text being quoted from elsewhere is marked up like this:

<blockquote>Hey, I'm a block of text from elsewhere.</blockquote>

In your CSS, you'll likely have special styling for these. Perhaps a bit of a background and padding:

blockquote { padding: 10px; background: #eee; }

If the quote is multiple paragraphs, there may be paragraphs nested within the blockquote (both are block-level elements so that's fine). Quotes are also likely to be within larger areas of …


Group Design Project: List with Functions

Hey folks, let's design something together! I think it will be interesting and fun to try and tackle a simple design pattern as a group.

The Premise

The design pattern we are going to tackle is a list with functions. Think of a list of five names. The primary function of this list is to click the names. The secondary function of the list is that the list needs to be manageable. There needs to be some kind of …


Transparent Borders with background-clip

Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don't think Facebook sports the look anymore, but it's still rather neat.

You might think it would be as simple as this:

#lightbox { background: white; border: 20px solid rgba(0, 0, 0, 0.3); }

However, setting a transparent border on an element will reveal the elements own background underneath the border.

In the …


Tuts+ Marketplace

You already know that Envato runs marketplace sites like ThemeForest, GraphicRiver, and CodeCanyon that help designers and developers get a jumpstart on projects through buying themes, graphics, and code to help out. You also already know that Envato runs tutorial blogs like Nettuts+, Phototuts+, and Psdtuts+ which also help designers and developers through teaching.

In a brilliant-in-its-simplicity move, Envato has combined these two worlds into the Tuts+ Marketplace. Now their premium tutorials are available à la carte. I think …

HTML5 Pack for Illustrator CS5

Via Real World Illustrator:

You can designate certain attributes (i.e., fill, stroke, opacity) as variables right from the Appearance panel in Illustrator. When saved as SVG, developers can easily change the variable definition to "reskin" or modify the art

And other interesting stuff like:

You can select an object on the Illustrator artboard and then choose Object HTML5 Canvas Make. These elements are rasterized and included as canvas elements when saved as SVG, giving developers the ability to control …

Need a Font Identified?

Stephen Coles of Typographica has a new Twitter account:

Rapid, human, independent type research. Send an image, get the font name and link. Alternatives too.

WhatTheFont! is cool, but you can't beat professional human identification. Like the story of John Henry, only for type nerds. This is a cool service to offer, I hope Stephen can keep up with it!

Update: Justin Callaghan wrote in to offer up three additional venues for font identification:


Adding Stroke to Web Text

Fonts on the web are essentially vector based graphics. That's why you can display them at 12px or 120px and they remain crisp and relatively sharp-edged. Vector means that their shape is determined by points and mathematics to describe the shape, rather than actual pixel data. Because they are vector, it would make sense if we could do things that other vector programs (e.g. Adobe Illustrator) can do with vector text, like draw a stroke around the individual characters. Well, …


Box Sizing

The box-sizing property can make building CSS layouts easier and a lot more intuitive. It's such a boon for developers that here at CSS-Tricks we observe International Box-Sizing Awareness Day in February.

But, how is it so helpful and beloved that it deserves its own internet holiday? Time for a little bit of CSS history.

Box Model History

Since the dawn of CSS, the box model has worked like this by default:

width + padding + border = actual visible/rendered …

Missing Documentation for matrix3d Transforms

Documentation from Sebastian Deutsch on using -webkit-transform with matrix3d, which is rather complicated but can do cool stuff. Also, he used CoffeeScript for the demo (first I'm hearing of it) which looks kinda like SASS for JavaScript.…


Ordering CSS3 Properties

When writing CSS3 properties, the modern wisdom is to list the "real" property last and the vendor prefixes first:…


How Long Should We Ban IPs?

There are all kinds of reasons IPs get banned. A forums manager might ban an IP because the user at it is spamming. An admin of an email server might also ban IPs for spamming. A web service might ban an IP for using an API in an unapproved way.

On this site, we used to ban IP's in the forums all the time (the new forums have been much better in spam prevention). I also sometimes ban …

BonBon Buttons

These are way above and beyond the level of any other "CSS3 buttons" I've seen. Multiple backgrounds combining gradients and images, uneven border-radius, pseudo elements, HSL coloring, @font-face icons, transitions, box shadows, text shadows, hover and active states... the list goes on. Every trick in the book masterfully employed.

They make my button maker look dull and flat. …


Digging Into WordPress, The Book, Version 3

When we first released the book Digging Into WordPress, we thought of some reasons why people might not want to buy it. A big reason is because tech books can go out of date quickly, especially when the subject is a fast-developing technology like WordPress. So, we fixed that. When you buy this book, you get PDF updates to it for life.

Today is just such an event. WordPress 3.0 has been out for a while now, and so …


Percentage Bugs in WebKit

Using percentage values for certain things can have slightly unexpected results in WebKit based browsers. For instance, if you have a series of columns set in percentage widths with percentage padding, WebKit can calculate their sizing rather strangely.

Update: WebKit now has subpixel rendering, which should clear up this issue. The red lines indicate the column as rendered with WebKit. The background shades of gray are accurate placement of those columns in percentage widths.

It's percentages in general that seem …

More on CSS Selector Performance

This is a direct link to a PowerPoint file by Steve Souders (in April 2009). Of particular interest is pages 19-33 with all the information on CSS selectors. Evidence points to yes, there are efficiency differences in how you write selectors. But efficient CSS can sometimes come at the cost of larger CSS (bad) and that a "real world" levels even "costly" selectors aren't that big of a deal.…


CSS is to HTML as a CMS is to… HTML

From the desk of important beginner concepts:

You have a website with 100 pages on it. All 100 pages use the same style.css file. You'd like to change the background color of every single page. You make one adjustment in the CSS file, and that background color adjustment will be reflected across all 100 pages. You don't need to edit each of those pages individually. That's the core benefit behind CSS: abstracting the design away from the markup.

Now you …


WebKit HTML5 Search Inputs

One of the new types of inputs in HTML5 is search.

<input type=search name=s/>

It does absolutely nothing in most browsers. It just behaves like a text input. This isn't a problem. The spec doesn't require it to do anything special. WebKit browsers do treat it a bit differently though, primarily with styling.

A search input in WebKit by default has an inset border, rounded corners, and strict typographic control.…


Chrome users and CSS wranglers, check this out. It's an extension which adds a "css" link on the right in your URL bar. Click it to open a CSS Edit-like pane on any website where you can click elements and adjust their CSS on the fly. The CSS that you edit will automatically be applied any time you visit that domain, allowing you to make persisting changes to the sites you visit. …

.net Magazine Awards

The Oscars of web nerdery. I'm nominated for a flatteringly high number of categories! Web personality of the year? You know it.…


New Poll: Multiple JavaScript Libraries

Have you ever tried to debug a site where a beginner web designer has loaded the page with scripts? There's a couple copies of jQuery in various versions, maybe a little Prototype or MooTools thrown in. We can laugh a bit, but many of us went through that stage where we just didn't really understand things well enough to know there was any problem with that. And is there? Aside from the bandwidth concerns, most libraries have steps you can …


This is a very cool extension for Firebug (add-on for an add-on?) that expands Firebug's capabilities with jQuery. For instance, a built in jQueryify button, showing attached event handlers in the Content / DOM tree view, and highlighting all elements in a jQuery collection. I don't think it's new but I hadn't seen it until I finally watched Remy Sharp's debugging tools screencast from last month. …


Intentional Difficulty

Here's some food for thought.

When designing something that you are reasonably certain the user is willing (or forced) to invest time in learning to use proficiently, is it beneficial to intentionally make some tasks just slightly more difficult than they could be?

Not incredibly hard, not convoluted, not outright counter-intuitive. But perhaps making some information a little more buried, or placing an action in a slightly strange place. If the user is really looking, they'll be able to find …


Poll Results: Action Verb Clarity

The latest poll was all about picking the best sentence for a user to perform a specific action on a website. The choices are listed below, sorted from most popular to least:

  • 39% - Select a user and then click the Update button.
  • 37% - Select a user and then click Update.
  • 8% - Select a user and Update.
  • 7% - Select a user and then press the Update button.
  • 5% - Select a user and then press Update.
  • 3%

Fixing Background “Bleed”

Mike Harding with a desperately needed fix for when backgrounds "leak" out of elements with borders and border-radius.…


Forums Downtime

Quick public service announcement: The CSS-Tricks forums will be unavailable starting now as the undergo awesomeness upgrades. I'll update this post when they are back!

And they are back! Might be a bug here and there. Definitely let me know if you see one.…

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed