Treehouse: Grow your CSS skills. Land your dream job.

Article Archives

60 comments

Make an Editable/Printable HTML Invoice

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 HTML invoice of my own. This of course can't do nearly all the awesome stuff FreshBooks can do, but it might be useful to some of you with extremely lightweight invoicing needs.…

13 comments

Creating a Web App from Scratch – Part 6 of 8: Adding AJAX Interactivity

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 the get-go that this was going to be an AJAX-y app. We didn't chose AJAX because it's a popular buzzword, we chose it because we know it's the best path toward making a responsive, easy to use, natural feeling application …

29 comments

Creating a Web App from Scratch – Part 4 of 8: HTML & CSS

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 status. But then we have sign in and sign up pages and account pages. So let's be smart and work modularity. That means we'll make files like "header.php" and "close.php" that we can include on multiple pages so we don't …

49 comments

Creating a Web App from Scratch – Part 1 of 8: Basic Idea and Design

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, UI, and general front-end stuff. We are going to be going back and forth from here over to my friend Jason Lengstorf's site Copter Labs. Jason will be handling the back-end stuff like application planning and database stuff. At

8 comments

Quotes on Design API v3.0 (+ Widgets!)

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 and clearly not going to scale well.

Version 2.0 was put together to solve those problems. A CRON job was used to run one DB query every 10 minutes and write the quote and markup to a .TXT file. Then …

16 comments

Five Questions with David Walsh

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 and have written a bunch of double-posts together. Mostly I just bug him with questions I have about PHP and JavaScript and he always is there to help me out. I'm finally getting around to grilling him on a few …

38 comments

Fix Padded Image Links with Negative Margins

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 in body content a little padding, background, and rounded corners.

a { padding: 2px 6px; background: #eee; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
A "padded" link…
62 comments

Print Design to Web Design: Comparative Analogies

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 way around pretty well. Recently I've been finishing up laying out my new book Digging Into WordPress (which you can buy now!) and during that time I was thinking about some of the ways working in InDesign is similar …

59 comments

The Book: Digging Into WordPress


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 up, to explaining how things work (really get to know the loop and how to use functions to display the things you need), to SEO, to using WordPress as a CMS, to security, and more! The book gets into it …

269 comments

What Beautiful HTML Code Looks Like

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 can't help but view source on every nice looking website I see. It's like if you had x-ray glasses that allowed you to see any person you ever saw in their underwear at will. How could you not? It's just …

53 comments

Quickie CSS3 Tricks with Fallbacks

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 most cutting edge techniques are fun to play with, but since since only a sliver of browsers support them fully, we can only use them in circumstances where they fall back to otherwise perfectly acceptable styling. Let's look at a …

122 comments

New Poll: How do you format your CSS?

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 have your own unique way, feel free to post some code or a link to an example CSS file in the comments!…

12 comments

Poll Results: When Do Jobs Get Done?

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

31 comments

Holy Sprites

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 some of the submissions. Looking at sprites I find strangely fascinating. It's like this strange secret language of the web that only us performance nerds really understand =)…

32 comments

Redesigned Personal Site

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. It's 100% WordPress of course. I did break one major rule: the design is a complete overhaul of the previous site, rather than an evolutionary step. I just felt like evolution wasn't going to cut it this time. And besides, …

89 comments

Images on a Subdomain (?)

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 servers only allows some limited number of things to be download concurrently from a single domain (like 2 or 4?). But a site fairly commonly has dozens of resources. So if you were to create a subdomain (e.g. images.css-tricks.com) and …

197 comments

Show Off Your Sprites!

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

275 comments

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

This article has been revised and re-written several times since its very first publication in 2007, to keep the information current. The most recent revision was done by Flip Stewart in January 2015.

What are CSS Sprites?

Spoiler alert: they aren't fairies that write your stylesheets for you. I wish. In short: CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance.

Sprite may seem like a …

12 comments

Some Nice Recent Snippets

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 doesn't come across the main feed. I only mention it because I have yet to integrate a link to it anywhere easily findable on the site... I gotta get to that soon.

I wanted to mention a few nice …

82 comments

Solution For Very Long Dropdown Menus

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. That is, below the visible area of the browser window. So in order to access those menu items down below, you need to scroll your browser window. For those of us with scroll wheels of some kind on our mice …

Data Disaster

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

29 comments

Printliminator Update

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 the old one and get the new one!

  • Undo button! Anything you can do in Printliminator, you can now undo, one step at a time.
  • Added note about using ALT key on PC instead of Option.
  • Slight design change. Square
94 comments

Quickly Make Any Page Print Nicely (with The Printliminator)

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 source code and made a local version of the site and dumped some simple jQuery stuff in there to make it so any thing I clicked on was eliminated from the page. Turns out it's the current version of the …

38 comments

So Your Client Says They Want To Get On Twitter…

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 like they are potentially missing the boat on something big. Because it's web related, they turn to us, their web designers, for guidance. What do we say?…

38 comments

New Poll: When Do Jobs Get Done?

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 you are as a designer, how efficient communication is between parties, how long it takes to receive requested materials, how busy everyone is in general...

So the question isn't trying to place blame on one side or the other, or …

21 comments

Poll Results: How Do You Email?

The runaway winner was Pure Cloud, with 53% of people that exclusively use an online mail service, through a browser, like GMail or Yahoo or Hotmail or whatever else.
137 comments

Envato Marketplace Redesign

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 between marketplaces is integrated right into the site identity. Collis himself breaks it all down in this launch post.

The #1 thing I was secretly hoping for is better (and less buried) search. They really came through on that, …

26 comments

Giving Snippets “Add to” Coda & TextMate Buttons

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 this is way Mac-specific, but if you roll that way and use either of these programs it's way cool. I hope to make a copy-to-clipboard function that will be useful for anybody. [example]

64 comments

You Know You Should Use JavaScript When…

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

24 comments

New Snippets Feed & How-To

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 be a lot of entries and I think that would overwhelm the regular articles feed. Snag it:

Code Snippets Feed

Getting this to work was a bit of a journey, so I thought I'd document it here!…

30 comments

Unobtrusive Dropdown Page Changer

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 there for creating a menu like this are this way. Bummer. Let's make one that works with OR without JavaScript!

View Demo

36 comments

Add (+/-) Button Number Incrementers

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 content, and typing in a new value. Expected behavior that nobody is going to yell at you for, but these number inputs could be a little friendlier. Through use of JavaScript (yes, jQuery), let's do just that.

152 comments

Design Refresh (Version 5)

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 fuzzy since the design evolves in between those iterations quite a bit. One of these days I'll have to do a post showing snaps of all these old Photoshop files of old design ideas. Holy cow there is some awful …

47 comments

Style a List with One Pixel

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 use that to create a depth-chart looking unordered list:

25 comments

Make a Select’s Options Printable

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 printed page is about (e.g. options for a product).

Unfortunately I don't know of any really simple and clean ways of handling this. One option is to succeed all select HTML elements with an unordered lists duplicating the same content. …

66 comments

Beta: New Snippets Area!

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 for it. Number One - I have a new area of the site I've been working on that I wanted to get integrated into the main navigation, and there simply isn't room with this current setup. The new area? Code

134 comments

New Poll: How Do You Email?

I just tossed out a new poll. I've been wanting to do this one for a while, and the short-but-global GMail outage yesterday confirmed now is a good time. The question is:

How Do You Email?

There are people that like to do the cloud thing, and there are people who like to roll their own email. Then of course there are combinations therein. I find this interesting not just because of the variety of methods, but because of how …

27 comments

Five Questions with Vitaly Friedman

You probably recognize his name, but if you don't, you certainly recognize his work. Smashing Magazine is a juggernaut in the design and development web publishing world, and soon to cross over into traditional publishing as well. Vitaly is the most public figure behind Smashing Magazine, and I got the chance to ask him some questions I have always wanted to. Read on for my questions about naming posts, the strange meta nature of our work, and even the server …

44 comments

Preventing Widows in Post Titles

Widows, typographically speaking, are single words that awkwardly break down onto their own line. It looks uncomfortable, and it reads uncomfortable. Article titles are especially prone to this because of the large type / short line length, and look exceptionally awkward with a widow. For example on this blog:

69 comments

Inappropriate Uses

Database is forcontent HTML is fordescribing and displaying content CSS is fordesign JavaScript is forfunctionality

 

Those are the appropriate uses for these technologies. Inappropriate use is when you cross those lines and create a mismatch.…

60 comments

CSS Sprites with Inline Images

CSS Sprites is a technique where you use a background-image, a set width and height, and adjust the background-position to display only the portion you need to show. This way you can use a single image and display lots of different graphics with it, saving server requests and speeding up page load times.

The "sprite" is the single, combined graphic. We can use this same theory, only instead of using background-image to show the graphic, we can use an image …

208 comments

AnythingSlider jQuery Plugin

Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it's got lots of cool features.

Here on CSS-Tricks, I've created a number of different sliders. Three, in fact. A "featured content" slider, a "start/stop slider", and "moving boxes". Each of them had some cool interesting feature that I needed to build at the time. All were well-received, but as is the case with these things, people want …

34 comments

2009 .net Magazine Awards

The voting is now open for the 2009 .net Magazine Awards. I'm stoked this year to be nominated in both the Best Blog category and Best Vodcast category.

Voting is quick and easy and if you feel so inclined, go vote!

19 comments

Results from Anniversary Survey

I collected a bunch of data from you guys when you filled out that form to enter the 2-Year Anniversary Giveaway. I figured I'd aggregate it into some graphs, courtesy of Wufoo.…

34 comments

The Heating Company Analogy

What helps a design business stay healthy and successful over time is having regular clients with regular monthly billable work. The one-off jobs might be more glamorous and more fun, but in the long run it's probably your regulars that keep the lights on.

With print work, projects are absolute. Once ink hits paper, you bill, and that's that. But with the web, projects remain malleable indefinitely. This is an opportunity for you as a web design business to offer …

29 comments

Front-End Design Conference ’09 Wrap-up

The Front-End Design Conference was made from a lot of "firsts". Many of us speakers were speaking in front of an audience of peers for the first time since college Speech. For Dan Denney, it was his first time organizing and promoting an event. For me, it was my first time speaking or even attending a design conference, not to mention my first Gator-meat taco. But the overwhelming response from the attendees was that nothing felt first-time about it. …