Article Archives

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?

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!

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.

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

The poll actually had a variety of options, including different options for Multi and Single line formatting. But what I found most interesting is the sheer domination of Multi line:

For the record, I’m a single line guy. Most multi-line …

Some friends of mine’s band recently went through a small member lineup change. They needed to replace the photo on their homepage. I thought it might be fun to do something slightly interactive there. We went with silhouettes of the …

I knew as soon as I released the previous version of the Editable Invoice that using some JavaScript to spiff it up would be a good idea. I was thinking of doing a screencast on it perhaps, but then multiple …

For the last two years, I’ve done a virtual guest lecture to Jeffrey Brown’s class in Maryland. Both times, I talked about how the skills they are developing with the web don’t lock them into any one particular career. There …

We are happy to let you know that we packaged up the source code and the Photoshop mockups from Colored Lists and are offering them up for your downloading pleasure. We made up a little homepage for the series, so …

When people are asked about features they would like to CSS, “variables” always seems to come up. Whether or not this is a good idea is still something I personally haven’t decided on, but I’d lean toward yes. Regardless, using …

It’s been a while since I’ve professed my love for Wufoo. Oh, sweet Wufoo. Thy delicious interface makes form building easy, nay, a pleasure. OK, a poet I am not. A solutions wrangler I am.

In creating a form …

I always like how in FreshBooks to edit invoices you literally just click and interact directly with a web page that looks like an invoice. I got to thinking it would be a kinda cool idea to create an editable …

Really simple concept today folks! A sidebar that “follows” as you scroll down a page. There are a number of ways to go about it. We’ll cover two: CSS and JavaScript (jQuery) with a bonus CSS trick.

View Demo   …

Hooray we made it! First of all, thanks for following along this whole journey. You can go check out the real live app for yourselves:

http://coloredlists.com

Below we’re going to wrap up a few things by talking about some of …

Our developer has already done a massive amount of work turning this idea into a real application. Now let’s make some more for him! The most important part of this app is creating and managing your list. We decided from …

It’s time to get our hands dirty with some markup!

We know we have a couple different pages to deal with here. The main page of course, which acts as both our list page and sales page depending on login …

Today we begin Part 1 of an 8-Part series on building a web application from absolute scratch to a complete product. I am going to kick things off by introducing the idea, and then I will be handling the design, …

Back in the sad ol’ days of the v1.0 API, everytime any site using it loaded the script, a database call was made to pull a fresh quote from the Quotes on Design archives. It worked, but it was slow …

There is probably a good chance if you read this blog that you also know David Walsh. David and I hail from the same hometown (Madison, Wisconsin) and have been friends for years. We’ve worked on a few projects together …

This is a pretty basic trick that will be obvious to many of you. But for whatever reason, the solution to it always kind of eluded me so I’m sharing it here. I like padded links. Where you give links …

I used to work in Pre-Press for a long time. Longer even now than I’ve been working on the web. I was in and out of InDesign documents all day every day. I’m not an uber-pro, but I know my …

Learn More / Buy Now

It’s ready! Jeff Starr and I started the journey of writing Digging Into WordPress in December ’08 and it’s finally for sale. It’s 400 pages packed full of WordPress learning. We go from setting things …

I originally wrote this over two years ago. It was getting a little long in the tooth, especially now that HTML5 has come along and made HTML far more beautiful than even XHTML 1.1 was. So I updated it!

I …

CSS3 can do some seriously neat stuff. Just check out some of the crazy 3D stuff you can do in WebKit. But as we all know, we need to be careful with what we choose to do with it. The …

The poll is in the sidebar, so jump down there to vote. You can see examples of the different ways to format CSS here. I think that covers most of the popular ways to format CSS, but if you …

When this poll first kicked off, the “late” options were way ahead. Over time, things have evened off a bit, and the results are closer than I thought they might be.

If you are in the on time or early …

Lots of folks joined in on the fun with the Show Off Your Sprites! contest. I used the ol’ random number generator and came up with Lee Kowalkowski as the big winner, congrats Lee! Now let’s take a look at …

As I do from time to time, I redesigned my personal site (redesign notes). I wanted to make the site a better vessel for writing, so the shell of the site has a much nicer structure for doing that. …

I can’t remember where, but a while ago I read something about using subdomains to serve up a sites resources as a way to potentially speed up loading. The theory was that the protocol that browsers use to communicate with …

I just updated my old CSS Sprites article yesterday, and I thought it would be kind of fun to ask everyone to share sprites that they have created themselves. Let’s make a quick giveaway out of it too!

I’ve finished …

This post was originally co-authored in late 2007 by me and Volkan Görgülü, I’m updating it now to improve it a bit and make it more current.
You’ve heard of them, but…

Do you really understand them? The name might …

I am really liking the new snippets area we have going here. I find myself using it all the time, which is exactly why I thought it was worth building. Remember there is an RSS feed just for snippets, which …

I like to be confident with post titles, but the reality in this case is a *possible* solution for very long dropdowns. The problem with long dropdowns is that the dropdown itself can go below the “fold” of the website. …

Hey folks, don’t salt your scotch with tears on my account, but I’m posting to tell you all I just suffered a complete data loss on my computer. I figured I’d go through how it happened.

I woke up on …

If you’ve been using The Printliminator, you may have noticed some updates to it. That’s the cool part about a bookmarklet that references external code, updates and new features can be pushed out without having to have everyone ditch …

There is an updated version of this!

The Plan

In this tutorial we are going to build a little chat program that is really easy to get up and running on any server running PHP. No database is required – …

Introducing The Printliminator!

I had this idea when I was at a lyrics site trying to print out some lyrics. The page didn’t have a good print stylesheet and was full of all kinds of crap. I copied the …

Twitter. They talk about it on the local news, they talk about it on ESPN… it’s mainstream. It’s almost a household name like YouTube, Facebook, or Johnson and Johnson. Businesses know that other businesses are using it, and they feel …

There is a new poll up in the sidebar. This time regarding when jobs that include completion dates actually get done.

There are reasons on both sides of the client/designer relationship that affect when jobs actually get done. How quick …

function drawShape(){
var canvas = document.getElementById(‘results-canvas’);
if (canvas.getContext){
var ctx = canvas.getContext(’2d’);
ctx.fillStyle = “rgba(0,150,197,0.8)”;
ctx.fillRect(0,0,302,50);
ctx.fillStyle = “rgba(81,203,84,0.8)”;
ctx.fillRect(0,50,120,50);
ctx.fillStyle = “rgba(203,184,81,0.8)”;
ctx.fillRect(0,100,103,50);
ctx.fillStyle = “rgba(203,87,81,0.8)”;
ctx.fillRect(0,150,46,50);
}
};
drawShape();

I drew the chart above with the <canvas> element. …

As I’m posting this, the marketplace websites that Envato runs (ThemeForest, GraphicRiver, etc) have been redesigned. It’s a pretty big overhaul… new logos, loads of new features for both buyers and sellers, the iconic “switcher” to change …

I think this is the coolest thing since Kayne carved cult symbols onto his head: each snippet in the Snippets area now has little links when you roll over them for adding the snippet to Coda or TextMate. I realize …

You know you should use JavaScript when the task cannot be accomplished with any other technology.

That’s what Doug suggested when I asked him for a nicer spin on a something that was going through my head:

JavaScript: If it …

There is a new snippets-only feed! This will always remain it’s own separate feed I think, and not be a part of the main feed. Mostly because I hope that the snippets will grow and grow and there will hopefully …

Using a <select> dropdown menu to create navigation isn’t as common as it once was, but it’s still around. It got ripped on pretty good for being an inaccessible / obtrusive. Indeed a lot of the scripts you’ll find out …

Text inputs on forms can be used to submit numbers. A common use would be a “quantity” input on an eCommerce site. Changing the quantity value, from the user’s perspective entails tabbing or clicking to the input, deleting it’s current …

The new design has been rolled out. Nothing to shockingly different I hope, just a refresher. It’s kind of hard to say, but I think this is the 5th significant iteration of the design at this point. The lines are …

A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can …

When printing a web page with <select> elements on it, the select dropdown prints just like it looks.

This is of course borderline useless on a printed page. It may even be hiding important details vital to understanding what the …

Hey ya’ll – I’ll let you in on a little secret here, there is a design update coming out soon here on CSS-Tricks. As usual, just a little realign / refresh / spit shine kinda thing. There are several reasons …