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

Article Archives

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

10 comments

Five Questions with Richard Felix Jr.

I've been friends with Richard for years. In between sending funny links back and forth to each other, we've been able to kick out a few projects (Are My Sites Up, LyricSift). I design, he develops. I've always been impressed with Richard's work ethic, problem solving ability and how he always has his finger on the pulse of the tech industry.

Richard's personal company is ShiftedFrequncy, he works at Gatorworks in Baton Rogue, blogs at FreshArrival

24 comments

Five Questions with Soh Tanaka

In looking back through some emails, I found an email from Soh in October 2008. It was a very nice message introducing himself, saying he has enjoyed CSS-Tricks, and that he was just getting into blogging and if I had any advice. This is what I said:

My best advice? Write, write, write. Write good original content and keep at it! Be honest, be real, and keep working on your site to make it the best it can be. And …

19 comments

Five Questions with Jeffrey Brown

I first met Jeff when he emailed me in early March of this year introducing himself as a High School Web Design Teacher at Damascus High in Maryland. He told me he makes his advanced students subscribe to this blog! Jeff is passionate about teaching and web design, and I wouldn't be surprised if his 4-Year curriculum at Dasmascus was the best in the country.

As part of the Advanced Web Tools class, Jeff brings in speakers from the professional …

36 comments

Five Questions with Collis Ta’eed

Collis Ta'eed is the kind of guy that every web designer with a little entrepreneurial spirit wants to be. He is a trend-setting designer who's work is seen, used, and interacted with by millions of people a day on Envato's sites like PSDTUTS and FlashDen. I would list all of the sites here, but there is just too darn many of them it would take up the whole paragraph! If Collis merely designed all these sites, that would be …

18 comments

Five Questions with James Padolsey

If you are like me and commonly find yourself Googling around for JavaScript solutions to coding problems, there is a good chance you've come across James Padolsey's Blog. James is a prolific blogger with a clear teaching style I think we all appreciate when looking for solutions. I've referenced his articles many times, for example, when needing to dynamically resize textareas, shuffle DOM elements, or animate to a particular CSS class. All this, and James is …

17 comments

Next Week: Five Days, Five People, Five Questions Each

I've gotten to be interviewed a few times, but I've always wanted to be the interviewer myself. I've finally made that happen. Next week on CSS-Tricks I'm going to be posting interviews all week long. Here's the plan:

  • Monday: a JavaScript developer 10 years younger and 10 times smarter than me
  • Tuesday: a CEO, Web Designer, and mad genius Entrepreneur
  • Wednesday: a Teacher trying to change the game in web education
  • Thursday: a rising star Web Designer and Blogger
  • Friday:
12 comments

So Much Power, So Few Options

David Berlow commenting on font rendering abilities in the browser:

...it’s not treated beyond a fourth-grader’s crayoning abilities; no shadows, in-lines, outlines, fill variety, twisting, perspective, set on a bouncing line, or opaque over another object, much less in motion. If the web’s imaging language is going to call the mighty capabilities of digital outlines for display type all the way to the user’s PC, when will it be a worthwhile shift of rendering power? Can we aim a little …

68 comments

What is Vertical Align?

CSS has a property called vertical align. It can be a bit confusing when you first learn about it, so I thought we could go through it's use a little bit. The basic usage is like this:

img { vertical-align: middle; }

Notice in this usage case, it is being applied to the img element. Images are naturally inline elements, meaning they sit right inline with text if they are able to. But what does "sit inline" mean exactly? …

114 comments

px – em – % – pt – keyword

When it comes to setting the size of type in CSS, you have lots of options. You can apply a "keyword", like p { font-size: small; } or a numerical value. When using a value, you need to declare a unit of measure which itself has four options. Which is best? It depends of course. Let's take a look:…

58 comments

Looking for a Publisher

Hey everybody, I have some news. I've alluded to it a few times in the past, but now I'm officially saying it: I'm writing a book. I am not going to share too much detail about it now, but here are the facts:

  • It is focused on WordPress
  • It is co-authored between me and Jeff Starr
  • It is going to be awesome

We have been working on it for quite a while now and I'm very pleased with it. Both …

97 comments

CSS is like…

I mused on Twitter recently:

CSS is like chess. You can learn the basics in a day and spend a lifetime mastering it.

I quickly thought it would be fun to collect other people's ideas on what CSS is like. Here is what you said:

@BenTortora:

CSS is like a girlfriend. No matter how hard you try, she will always interpret it a different way.

@colinismyname:

CSS is like marching orders for pixels.

@peterwilsoncc:

CSS is like …