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

Article Archives

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 …

66 comments

Exercise to Get Better at Web Design

Getting better at anything takes considerable time and effort. Feel like you are in a rut with progressing your web design skill? Try this:

  1. Find a web site you really love the design of. Maybe browse a design gallery.
  2. Open up your design program of choice and try to copy it identically*. Take a full page screenshot of the site for reference and quick overlays.
  3. During this copying process, there will be many opportunities to put your own
83 comments

Navigation Markup After Content

I am not an SEO expert. I said not long ago that I believe it's mostly just a matter of common sense. However, I do find the subject interesting. Being the #1 result for a search term is a big deal. It can mean big bucks. For those of us with clients, they desire this and look to us to help. So if there are reasonable steps we can take to help with this, I think we should.

One …

42 comments

Auto-Moving Parallax Background

A while back I did a little demo on parallax backgrounds. As a quick review, parallax is that effect where there are different layers of backgrounds that all move at a different rate creating a very unique 3D effect (think Sonic the Hedgehog). In that original demo, the only way to see the parallax action take place was resize the browser window.

Recently, Paul Hayes took that example and ran with it. He used the extremely cool -webkit-transition attributes …

66 comments

Need Something Changed On Your Website? Treat Me Like a Six-Year-Old (Really)

I used to work in pre-press before I got into web design. I worked at three different somewhat large printing shops. Pre-press is the department that is in between clients (designers) files and actually getting those files to press. It might not be obvious, but there is a TON of work that needs to be done to prepare client files to actually be printed and through the bindery. This isn't the time or place to get into all that grisly …

23 comments

Filtering Blocks

One of our eCommerce clients at work had a number of products they wanted to put on special to promote on the web. Each product has a different "reason" why it's on special. Perhaps it's discontinued, perhaps its special pricing, perhaps it's free shipping. Originally they wanted a special page built for a new type of discount: "rollback pricing". We argued that in general, a visitor on the web doesn't really care why a product is on sale, just that …

12 comments

AMSU: Three Tiers of Premium + iPhone App v2.0

We've been chugging along over at Are My Sites Up keeping things running smoothly and working on new features for ya'll. First and foremost, we were closed for new registrations for a while there while we worked out some growth issues. We're happy to say that's been worked out and we are open for new registrations again. So if you don't have a free account yet, go get one.…

27 comments

Highlight Certain Number of Characters

I had a unique programming challenge the other day that I thought I'd share here. It's rather specific and probably won't be of huge general use, but hey, it might be interesting.

The idea was to have 160 characters become "selected" when you click on any letter in a block of text:

117 comments

Design Refresh

It was time for another design refresh! The best part about this one, for me, was that all the work I did last time made this one very easy to do.

As usual, it's not extremely drastic. Evolutionary, not revolutionary. The old one wasn't bad, I just felt playing and improving where I could.

Feel free to critique. Good or bad, but try to keep it constructive.…

31 comments

Building a Simple Quiz

I had to build a quiz for a client a little while ago. A few multiple choice questions, submit button, and it grades the quiz and tells you how you did. It's kinda dorky and really really simple PHP, but I figure it might be a good starter for some folks and a good primer in the basic theory of building a form in HTML and dealing with the data on another page with PHP.

 

View DemoDownload

37 comments

Layout Packs

I thought I would take a crack at a couple of common multi-column fluid-width layout styles that are notoriously quirky with CSS.

One way to accomplish a multi-column fluid layout is to set the columns with percentages. For example, floating a left column that is 19% wide and a right column that is 80% wide (keeping it under 100 prevents them from knocking into each other and knocking down). I really dislike doing it this way. It prevents you from …

Q&A v4…

...is now up on Smashing Magazine. I answer questions about equidistant spacing on elements, CSS image/font replacement, "max sides" on images, and a bunch of "quickfire questions".…

63 comments

IE Fix: Bicubic Scaling for Images

Devthought had a little CSS tip the other day that is definitely worth repeating. It's not new, it's just an important little trick to know.

And here it is:

img { -ms-interpolation-mode: bicubic; }

If you use width or height tags to resize images in your markup, IE will ensure they look incredibly awful unless you use this little snippet. In general, resizing images in the browser isn't recommended, but of course there are always exceptions.

66 comments

Unique Pages, Unique CSS Files

I received a question the other day from someone who was curious how I handle multiple different page styles and layouts across one site with CSS. It's a very common scenario I think. For example, you have a homepage that is different from your blog post pages that is different from your about page that is different from your contact page.

Here are some considerations:

There should always be one main stylesheet

In all liklihood, there is quite …

78 comments

So Your Client Has This Idea…

...and you think it's a bad idea

You think it's a bad business move on their part. It's going to cost them a lot of money and you don't think it has a snowballs chance in hell of making any money back.

I mused this (totally hypothetical) situation on Twitter a few days ago, and quite a lot of people had something to say about it. I was actually quite surprised, most people said do the job. My initial feeling …

60 comments

Image Rollover Borders That Do Not Change Layout

It's a fact of CSS life that the 'border' of any block level element gets factored into its final box size for layout. That means that if you add a border on a hover to an element that didn't already have a border of that exact size, you will cause a layout shift. It's one of my pet peeves, for sure, when I see it in final designs. I find those little shifts, even 1 pixel, jarring and awkward. …

41 comments

jQuery UI Tabs with Next/Previous

Tabbed areas are lovely, but when you start getting to more than 3 or 4 different tabs, they start to get a little crowded and it makes sense to provide alternative navigation of them. I think it makes sense to supply universally located Next/Previous buttons, so without even moving your cursor you can click through each of them.

View Demo   Download Files

jQuery UI makes creating tabbed areas very easy, so the framework is based on that. But we …

28 comments

Generate a Random Number

For the last two book giveaways I did, I promised I would pick a winner totally at random from the comments. There were hundreds of comments, so I wasn't about to write the numbers on little bits of paper and pick them from a hat. I actually have a dice-rolling iPhone app I was going to use, but then I figured what the heck I might as well build a little webpage to do it quick.

View Demo   Download

9 comments

News: Joomla! Book Winner & New Tuts+ Tutorial

Congratulations to itaniumdesign, the randomly selected winner of the Joomla! Template Design book contest. These last few book giveaways have been fun. Next time I do it I'll try to get more stuff to give away so everyone has a bit better of a chance. Thanks to all for playing!

In other news, I have put together a pretty cool tutorial for net.tuts+ this week: Build an Awesome Popup jQuery Calculator. It's a tutorial complete with written instructions, …

19 comments

Links of Interest

Links of Interest aren't "back", but I have some cool ones I really wanted to share, I'll probably do this from time to time, but just not on a planned schedule like they were.

LyricSift

Richard had a neat little idea to build a music discovery site based on great lyrics. He coded it up, I designed it. Reload the page, get a new lyric. If you like it, go check it out on iTunes, Last.fm, or Amazon. It's called …

48 comments

Remote Linking

Remote Linking is what I call it when a single anchor link has multiple clickable areas in different locations. It can be used for pretty neat effects and requires nothing but CSS.

It's not a brand new idea and in fact I've covered it before, but I thought I'd put together a more 'real-world' example for ya'll.

View Demo   Download Files