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

Article Archives

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 …

86 comments

Web Nerd Terminology (Explained)

As happens with any weird niche societal group, us web nerds have developed some language of our own. Some of this language is perfectly acceptable English, but still sounds weird to an outsider. I thought I'd throw together a list of these words and attempt to explain them in plain English as a reference for non-nerds.

Browser - A browser is a software application that is used to visit websites. Firefox, Internet Explorer, Safari, etc. If you think this is …

91 comments

404 Best Practices

A 404 error on the web is what a web server responds with when it is tasked with serving up a resource that it can't find.

1. It should still look like your website

If you don't specifically tell your web server how to handle 404 errors, it will serve up a very plain and generic looking error page. That just says something like "Not Found - The requested URL was not found on this server." on a plain …

37 comments

Review of WP Coder

I was recently asked by the guys at WP Coder if I would do a review of their service. I don't do it very often, but they seemed like nice guys and WordPress is of particular interest to me lately. As it happens, I was tinkering with a theme in Photoshop right as they asked me so it was perfect timing. I finished up the theme and shot it over to them to start the process. I thought their order …

Digging Into WordPress

Got a little news for ya'll. Remember when I announced me and Jeff Starr were looking for a publisher for a book about WordPress? Well, that worked, and we talked a number of different publishers. They were all very nice, but after weighing everything out we decided that when we are done we'll be self-publishing it as a PDF for now.

The book itself isn't ready yet. It's going to take us a while to get it all together and …

12 comments

Intimacy Hierarchy

Pete Pinnell in a video about fine art and ceramic cups talking about human behavior:

We'll look at things that we won't nudge with our foot.
We'll nudge things with our foot that we won't pick up in our hand.
We'll pick things up in our hand that we won't put up to our mouth.
We'll put things to our mouth that we won't put in our mouth.

There is an intimacy hierarchy in web design too.

There are websites …

57 comments

Pricing Order

We were recently re-doing the signup page for Are My Sites Up, and we were looking at the way we were ordering our plans. At the time, it was from least expensive (free) to most expensive (Premium Pro). We looked around at a couple of other web services to see how they were doing it, and at first look it seemed like everyone was doing it the opposite way:

56 comments

What’s The Best Way To Handle Page Titles?

First-level Navigation

Or, "the homepage". Here are some possibilities:

  1. [ NAME OF SITE ]
    Short and to the point
    Ex. CSS-Tricks
  2. [ NAME OF SITE ] - Short Tagline
    Taking the opportunity to explain the site
    Ex. CSS-Tricks - A Web Design Community
  3. [ NAME OF SITE ] - Keywords
    Site titles are SEO Opportunities
    Ex. CSS-Tricks - Web Design, jQuery, Downloads, Screencasts, Forums
  4. Other?
76 comments

Sending Nice HTML Email with PHP

This is going to be a continuation of the Website Change Request Form demo we've been using around here for a while. If you need to catch up, first I talked about it, then I built it, then I screencasted it, then I secured it. Throughout all of this, the end result has been a boring text-only email that gets sent to a single email address.

We're going to improve that output, and make the email

17 comments

Five Questions with Matthew Kammerer

I first heard of Matthew while exploring UX Booth, a darn nice little blog and resource site dealing with user experience by four young folks. Then I heard he joined the team at BuySellAds, a company I take great interest in both because of their success and because it's a wonderful service that I use here on CSS-Tricks. I thought I'd catch up with him for a few questions...

22 comments

Affiliate Program for Are My Sites Up

There is now an official affiliate program for Are My Sites Up where you can earn money through referring people to our service.

Here are the basics:

  1. You sign up.
  2. You get an email when you are approved with a link to your special affiliate page. Here you get your unique affiliate URL which you can use anywhere you like as well as custom graphics and copy-and-paste code.
  3. You earn 20% on any sale. That's five bucks on Standard,
87 comments

The CSS Box Model

At the risk of over-repeating myself: every element in web design is a rectangular box. This was my ah-ha moment that helped me really start to understand CSS-based web design and accomplish the layouts I wanted to accomplish. We've talked about the positioning of these boxes a bit, and about their behavior.

What we haven't talked about much is the box itself. How is the size of the box calculated exactly? Here is a diagram:

64 comments

The CSS Overflow Property

Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height …

125 comments

Applications: One Day in the Life of a Web Designer

It's incredible how many applications we interact with on a daily basis. It's no wonder we are so critical of them sometimes, Below is a timeline of a typical day for me and the different applications I deal with at certain times. The truth is of course that I interact with these applications as needed and I don't adhere to any sort of timeline, it was just kind of a fun way to present it.

6:00am GMail


I live in …

5 comments

Links + This Week

Couple of links to share this morning of my content elsewhere. The latest Ask Smashing Magazine is up with loads of questions on CSS answered by me. Also Chris Spooner interviewed me on Line 25 about my past, blogging, and getting ideas.

As a quick note: I'm out on vacation this week Wednesday through Sunday, and I'll be totally off the grid. I do have some articles lined up though. Tuesday I'll be posting a journey through the applications I …

19 comments

Quotes on Design API v2.0

I know at least a couple of you ended up using the original Quotes on Design API. It was kind of an experiment, but it did the trick in that it was an easy way to quickly add random design-related quotes to any site, with full CSS control.

It's major weakness was that on every single page load on every single site using it, it had to hit the database. It was a tiny and quick query, but still, not …

32 comments

CSS-Tricks Mobile

UPDATE: CSS-Tricks.com is now responsive, so no more separate mobile version of the site. Not that I'm against that, I'm just a fan of responsive for this site.

There is now a mobile version of CSS-Tricks, thanks to the service and fine folks at Mobify.

It's not just an iPhone version, but should be pretty compatible with most mobile devices. The best part though, is this isn't just a way to read the articles like previous mobile versions …

59 comments

Serious Form Security

The Website Change Request Form has been a running topic around here for a little while and I'm gonna run with that for a little while. We are not going to rehash all the HTML and JavaScript that makes the form work, so if you need to catch up, go check out that first article.

What we have at this point is a pretty nice looking form that has a pretty nice user experience to it. I feel like it's …

21 comments

.net magazine

I've had articles in several recent issues of .net magazine. I thought I'd snap some pics for posterity.

63 comments

Vertically Center Multi-Lined Text

If you only have a single word or a single line of text, there is a clever way to vertically center it in a block with CSS. You set the line-height of that text to be equal to the height of the box. Works great, but is a major fail if that text needs to wrap.

A "speech bubble" is a classic example of somewhere we might want text to be centered both horizontally and vertically and be adaptable to …

41 comments

Don’t Rely on Background Colors Printing

At work I recently rolled out a new system for one of our clients, the Rick Wilcox Magic Theater. Their site is largely informational about them and their show, and a portal for selling tickets to their show online. As their theater is part of a vacation destination, people often buy tickets far in advance. The best method for presenting their show schedule is literally in a calendar format where people can see months of show dates at a …

28 comments

Front-End Design Conference

I will be speaking at my first conference ever! I'm really looking forward to it and I have already started preparing my presentation. It's going to be focused on jQuery and using it to accomplish things that CSS does poorly, can't do yet, or will likely never be able to do. Lots of real-world examples and implementations.

87 comments

Override Inline Styles with CSS

This damn juicy CSS trick has been around for a while now, but I wanted to make a special post sharing it again to spread the good word.

Often we think of inline styles as a way to override styles we set up in the CSS. 99% of the time, this is the case, and it's very handy. But there are some circumstances where you need to do it the other way around. As in, there are inline styles on …

177 comments

New Poll: Sans-Developer Tools Browser Choice

I bet a lot of us around here use Firefox as our main browser. I really like Firefox. I think the interface is pretty nice, but what put its so far ahead of the other browsers for me is the huge ecosystem of Add-ons. And not just the killer eye candy stuff, I'm talking about hardcore development tools that make our jobs as designers and developers immeasurably easier. I'm talking about of course things like Firebug, Web Developer Toolbar

30 comments

Poll Results: CSS3 Features

Almost 7,000 people have weighed in on this poll so far, making it the biggest yet! The question was:

If CSS2 and CSS3 was fully supported in all browsers tomorrow, what would you be MOST excited about?

As always, very interesting results. It was EXTREMELY close for first place, going back and forth a number of times between the three top contenders.…

69 comments

Website Change Request Form

Last month I wrote about how I wished when clients had a change request for their site, they would treat me like a six-year-old. The point was, those change requests are often far too vague which leads to confusion and ultimately wasted time. It would be more efficient if those change requests contained everything needed to make that change without confusion.

I thought this idea would make for a good demo of a web form with some advanced functionality.…