Grow your CSS skills. Land your dream job.

Article Archives

12 comments

404 Page on a Static Site

Here's a very quick, but very useful trick. You can catch 404 errors (page not found) on a static site and serve up a custom 404 page with a one-liner in your .htaccess file:

ErrorDocument 404 /404.php

The "/404.php" part …

7 comments

Links of Interest

Let's talk about text

Dan Kaufman on online text readability.

First, the more distinguishable each character is from another, the easier it is to read. This is why typefaces with serifs (the little lines on the end of letter …

30 comments

Typeface.js – A sIFR Alternative

My last screencast was on how to use sIFR3, a long proven technique for using non web standard fonts on the web (like we'll be doing until @font-face has wider spread support). I like sIFR, it has been around …

15 comments

Question & Answer Wrap-Up: Quickies

Mackinley Drummond

What's the deal with the "cardboard cutout" CSS-Tricks look?

Nothing metaphorical or especially significant. I just like texture in general. I also wanted to make the site look unique and not fall into any preconceived mold of what …

35 comments

Should You Host Your Clients Websites?

This question was sent in by jamie y.

I have been asked before when talking to potential customers if I could host their site. Right now I have been referring them to a hosting company. But I was wondering …

75 comments

How Much Should You Charge for a Website?

This question was sent in by Tom Nowell.

Tom said he was a university student and has been building websites for people lately. He says that he does it on his own time so it doesn't cost him anything, …

30 comments

XHTML 1.1 or HTML 4.01?

NOTE: This article is super old. As I write this warning in mid-2013, there is only one DOCTYPE that should be used, the HTML5 <!DOCTYPE html>

Aaron Bazinet originally posted this question in the forums.

I'm going to go ahead …

29 comments

How Would You Recommend a Novice Get Started Using CSS?

This question was sent in by Nikita James.

I get this one a lot and it's surprisingly difficult to answer. The problem is that the question doesn't include the persons background, which will in many ways determine the best …

40 comments

Do You Need To Be a Good Designer AND Coder?

This question was sent in by Greg Arndt.

Is being proficient in both design and coding fairly common in web design or is a person usually better in one rather than the other. I find my trouble is that …

28 comments

Is There Any Dedicated CSS Hacks For Safari or Opera?

This question was sent in by Marcin Lachowski.

Back in the day, there used to be a hack for Safari using the pound (#) sign. Safari didn't like that symbol, so you could declare something like this:

p {
28 comments

What Do You Think is the Best Online WYSIWYG Editor?

This question was sent in by Edwin.

To clarify, I believe Edwin is asking about these JavaScript scripts you can use on website which turn regular <textarea>s into more robust editing environments. You'll recognize one in use right here …

5 comments

Next 10 Days: Your Questions, Answered!

For the next two weeks, I'm going to change up the regular programming! I'll be back home in Wisconsin for a friends wedding and to visit family and friends, catch some football games, and have fun! So to makes things …

80 comments

CSS Wishlist: 21 Designer/Developers Sound Off

I asked a bunch of designers what they thought needed to change in CSS.

Wolfgang Bartelme

Designer at Bartelme Design

I'd love to see cross-browser support for gradients, shadows, opacity masks and rounded corners. I guess that would not just …

9 comments

Poll Results: How do you back up your websites?

It's nice to hear so many people have a backup plan! It's probably a much rarer situation that your web host loses your data than it is that your own computer fails. But still... backups can save your ass in …

8 comments

Links of Interest

Automatic Numbering with CSS Counters

The CSS 2.1 spec makes inserting counters into content possible. This has always been possible with ordered lists, but this counter system is much more robust allowing you to insert counters on any type of …

37 comments

Your Go-To Hex Code Color

A few days ago I mused on Twitter:

When I need to pick a hex code color out of thin air, I always pick #ccc

Turns out, lots of folks have their own favorites! It's little mini conversations like this …

25 comments

Modal Login Pages

Wikipedia has a succinct opening sentence about modal windows:

In user interface design, a modal window is a child window which requires the user to interact with it before they can return to operating the parent application, thus preventing …

35 comments

The Usability Problems of useit.com

Jakob Nielsen has written some damn smart things about usability, and his work has probably done great things for the web in general. You hate to beat up on a guy like that, but c'mon, it is beyond ridiculous to …

29 comments

Styling Scrollable Areas

The scrollbars on browser windows are not styled by the website itself, or even generally by the browser. They come from the operating system itself.

The desire to customize the style of these scrollbars is strong. When you are starting …

10 comments

Lifestream Website with Sweetcron

I wrote a tutorial for NETTUTS that has been published:

Sweetcron is "The Automated Lifestream Blog Software". It is still in public beta, but is already a very nice blog software package. The beauty of Sweetcron is that new posts …

38 comments

Body Border 2: Fade In with Gradient

A while back I showed you how to create a Body Border with CSS. Basically, we used four fixed position DIV's to ensure all edges of the screen got a border and that the border would sit on top of …

8 comments

Links of Interest

Test Your Color IQ

I would think designers would be better at this than most folks. You can test your color IQ by arranging blocks of color into hue order. There are 20 blocks per row and the hue change …

29 comments

Drag ‘n Drop Cards

In the next week or so we are launching refreshed site for one of our clients at Chatman Design. The client is Beacon Athletics, a company that sells equipment for athletic fields. The homepage is of course of particular importance. …

18 comments

A Business Card Microformats Site

All microformats are are standardized ID and Class names to wrap data in. Really. That's it.

Say you are having a birthday party next week and you are posting about it on the web. That event has a name (Birthday …

15 comments

Will Font Embedding Ever Become A Reality?

I have to admit I don't have my head fully wrapped around this whole font-embedding controversy. At it's root, it comes from us web designers being frustrated by the lack of options font options for our web pages. We want …

5 comments

Links of Interest

IE 8 Proprietary CSS Attributes

IE 8 will have a number of proprietary CSS attributes. Not a big surprise, all the major browsers have them. It's a way to have support for a) stuff that is truly proprietary to …

29 comments

Screencasting Setup

I get a fair number of questions about how I record the screencasts, so I thought I'd do a post on it that is both of interest now and that I can refer people to later.

Hardware

Mac

I …

8 comments

From The Forums

Yesterday I "upgraded" the forums from phpBB 3.0.0 to 3.0.2. It was a bit of a debacle, probably mostly my fault, and it was down for a lot of the day. It's back up and running now though! Apparently it …

21 comments

Messing With Firefox’s View Source CSS File

Firefox has a number of core CSS files that it uses to render web pages. Most of them are filled with sensible default values for all those pages out there which don't provide their own styling. For example, Firefox has …

10 comments

Links of Interest

Tutorial Search

When I was doing that video on Google Search I thought to myself wouldn't it be cool to make a search engine that only searched through design/development sites? I talked myself out of it, because I started …

8 comments

How To Deal With An No-Longer-Semantic ID or Class Name

Errol writes in:

What's your thoughts on a situation where you've started
naming classes and then halfway through you realize that
you need the same class but the naming isn't semantic.

Do you create a duplicate class, rename the existing …

25 comments

Improving the Default Directory View

You've all seen a page like this:

That's when you are viewing a directory on a server (or locally), that doesn't have an "index" page to show you, but does have permissions set to allow you to see the directories …

5 comments

Links of Interest

Fade Out Bottom (revisited)

The first post that was ever popular on CSS-Tricks was my tutorial on fading out the bottom of a website. Reader Pascal Moret wrote in with some suggestions for fixing it up for IE 6. …

91 comments

IE 6 Blocker Script

Fed up with supporting IE 6? Ready to just cut it off? I don't blame you. I generally feel that most problems people have with IE 6 are pretty easy to work around with practice, but that is not always …

32 comments

Launch: Status

Today is the unveiling day of a new web application I've been working on the past few months. I am pleased to announce: Status. I worked on it with my friend Richard of Shiftedfrequency.


What is Status?

Status

20 comments

Links of Interest

Automatically back up your entire web server files and databases to Amazon S3

Christina Warren has a comprehensive and excellent tutorial on creating a Ruby script to back up your entire web server, including databases, and upload them directly to …

48 comments

Date Badges and Comment Bubbles for Your Blog

One of the things you run into when your blog becomes bigger, is that you need to cram more info into less space, to make it possible to display all the information you want to show. One of the things …

12 comments

Screencast Archives Updated!

It was a long and grueling process, but I finally finished updating the entire video archive. Here are the improvements:

  • Videos play on the web in Flash. From time to time I would get a note from someone either saying
62 comments

New Poll: How Do You Back Up Your Websites?

What if you hosting provider calls you one day and tells you they had a catastrophic fire at their facility and every bit of data on their (your!) servers is gone!

It's highly unlikely, of course, and it's more likely …

3 comments

Links of Interest

Google Docs: Forms

This isn't exactly breaking news, but I only just heard about it so I thought I'd share. The free service Google Docs allows you to build web forms from within it. It has a pretty limited feature …

32 comments

Poll Results: What is your favorite CMS?

WordPress was the clear winner in the most recent poll asking What is Your Favorite CMS?

I'm a bit surprised there weren't more people commenting that WordPress isn't really a CMS (which I disagree with). WordPress had more than …

4 comments

Links of Interest

Want More Sales? Become an Authority

This latest article from Search-This, Thinking Outside the SEO Box, is about small-guy eCommerce stores and what they really need to do to compete in the ever-saturated online store space. The main advice? …

*May or may not contain any actual "CSS" or "Tricks".