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

Article Archives

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

74 comments

So You’ve Already Decided, Eh?

It's funny how fast people can decide on things. People can see a website redesign and love it or hate it right away. It might take someone 15 seconds of seeing it before they are furiously writing up a comment one way or another.

I had a micro example of this with the recent AnythingZoomer plugin I did. Like a lot of the stuff I do around here, it's one part proof-of-concept, one part good-excuse-for-a-tutorial, and hopefully, one part useful. …

22 comments

Banner Code Displayer Thing

Authentic Jobs is a long-running, respected, and successful web design/development job board. I'm sure a lot of that success is due to the beautiful, minimal, and thoughtful design by owner and proprietor Cameron Moll. There is also a generous affiliate program, the screens for which share the thoughtful UI of the rest of the site. Take a look below at the screen for approved affiliates:

I thought this was a clever way to handle delivering graphics and code snippets …

98 comments

Date Display Technique with Sprites

LearningjQuery.com has a pretty cool presentation of the dates of their blog posts. Check it:

The typeface and the year being vertical should tip you off right away that images are being used to accomplish this. But also note that the date information is presented as text, as it should be, in the markup:…

67 comments

Text Blocks Over Image

Someone recently asked me about this technique and my first reaction was that it was probably a little too mundane to cover as a tutorial. But then I got to thinking that there is actually a few interesting things happening here and the style is trendy enough people might be interested.

The idea is just to overlay some text over an image, but as blocks that stick out from the left with an even amount of padding all the way …

47 comments

eCommerce Considerations

Building an eCommerce site? There are a zillion options. In a recent group interview about eCommerce, I talked a bit how I think it's weird that all these eCommerce software solutions are also CMSs. At the root of things what you really need is a cart and a way to process credit cards (which is why I like FoxyCart).

But of course there are also a zillion different considerations. A CMS solution might be perfectly ideal. This article is …

27 comments

Combining Hand-Drawn and Digital Illustration Techniques

The following is a guest post by the first-rate illustrator Joe Lifrieri. Joe walks through his own process showing us not only how he does things but why. You can see Joe's portfolio and blog at Hugs for Monsters, email him at joe@hugsformonsters.com, or catch him on twitter @hugsformonsters.

In a medium that relies heavily on geometric shapes and synthetic textures, handmade illustration serves as a great way to make a site feel a little less …

66 comments

AnythingZoomer jQuery Plugin

You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I'm not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there.

It's flexible in many ways, in that the "small", "large", and "zoom" areas are all pretty easy to customize (via CSS). It's inflexible in other ways, in that it …

164 comments

Different Ways To Format CSS

This post will focus on the different ways to format CSS, which differs from the different ways to organize CSS. Definitely related concepts, but I think organization has more to do with how things are grouped and ordered while formatting has to do with spacing and indenting.

Formatting has nothing whatsoever to do with how the CSS functions. These are merely aesthetic choices by the coder. But that's not to say formatting isn't important. That would be like saying …

77 comments

Better Password Inputs, iPhone Style

Recently renowned usability expert Jakob Nielsen wrote an article Stop Password Masking in which he claims that hiding users passwords as they input them is bad practice. What he is referring to is the default browser behavior of <input type=password ... /> elements, where text entered into them turns into bullets rather than showing the real characters typed. He says it reduces user confidence in what they type and thus beginning a string of problems like more typing errors, users …

130 comments

All About Floats

What is "Float"?

Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap". Here is an example of that.

In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. Ignoring the text wrap …

83 comments

2-Year Anniversary GIVEAWAY

Happy Fourth of July all! A lovely day filled with fireworks and usually a day off of work (in the US, anyway). It's also the anniversary of CSS-Tricks. It's been two years now. It actually feels like it's been longer than that sometimes, just because of how far the site and myself have come. Last year we didn't do anything special, but I thought this year we'd kick it up a notch and celebrate a little harder. That's right, …

125 comments

New Poll: Would You Work on a Website You Thought Was a Stupid Business Idea?

I've mused about this before, but I thought it would be good to put it to a poll this time. The discussion before was absolutely fascinating. Many folks saying that it's our ethical duty to inform clients of our true opinions, and that part of the value of what we provide is those opinions. Many folks saying we should take the work and do it, as it's not our job (or expertise) to judge business ideas (e.g. do you want …

35 comments

Poll Results: Browser Choice Sans Developer Tools

Yes, all the major browsers have development tools now, but I think most people are in agreement that you just can't beat Firebug and the slew of other development-specific addons for Firefox. Outside of these tools, I often hear people complain about Firefox being slow, memory hungry, or crashy. I thought it would be interesting to ask about people's browser choice if these development tools were not a factor, so just judging by UI and speed and features and such. …

94 comments

The “Light” CMS Trend

CMSs are beautiful things. Just as CSS allows us to abstract the design away from the markup, a CMS allows us to use a database to abstract the content away from the markup. There are a zillion of them, each with different backend UI's and different ways to doing things.

But CMSs are for web people. Even my beloved WordPress can be challenging to train/explain to someone who has no experience working with websites. Perhaps this is the motivation toward …