Article Archives

Web design studio The Design Canopy (update October 2012: Design Canopy link is dead) is a beautifully designed site that makes use of a variety of beautiful web typography techniques. Here are some screen shots from different areas of the …

Table Cloth

Alen Grakalic of CSS Globe has released Tablecloth, a really nice table framework.

The Glass Wall

I know I’m almost 6 years late on this one, but I just read “The Glass Wall” for …

Here is a little trick for randomizing banners on your website. A bit quick and dirty. It needs to be on a PHP page to work.

First off we need to setup a folder on your server where the pictures …

Read Kevin writes in:

A css file will have something like…

background:url(../images/topheader.htm) top left no-repeat;

…where topheader.htm is just an empty file. In this same directory is a jpg named topheader.jpg. How does this work? Why is it done this …

Reader Blake writes in:

What I’m trying to do is a fairly standard 3 section layout. The header needs to be 75 pixels in height and 100% in width. Below that, I need a sidebar section 160px wide and a …

Let’s say you want to change the color of your links on just your contact page to red. They are blue on every other page, but it just makes sense for them to be red on your contact page (for …

There was lots of great feedback from the rough draft model of the CSS Skill Levels. I have tried to take everyones ideas into account and rework things. The biggest consensus was that there needs to be another level …

Link Value Factors

Wiep.net has a really interesting and comprehensive look at how the value of links are determined. Of course there is now way to really know, so each factor is valued by a “wisdom of the crowds” approach. …

The best part about CSS is that it allows web developers to achieve more with less. What exactly does that mean? Well, for a start, CSS allows developers to:

• Code much, much less XHTML
• Separate website formatting from content
• Control

…

Reader Patrick, an IT Software Architect, wrote in with a question I though was really interesting:

For my company, I am developing a scheme where our developers can check which level for a specific knowledge area they are on. For …

PSD to HTML Service by PSD2HTML.com is one of the sponsors of this blog, so I figured I would introduce them a little bit, explain what they do, and share my past experience with them as a customer. I’d like …

Just this past week I finished up with a redesign project for a client and took the project live. Later on in the afternoon the day of the launch, the client called me:

Client: I just clicked on our …

I wrote a guest tutorial over on Web Designer Wall detailing how to create an All-Expandable Box. This is a box that will expand both vertically and horizontally when text is resized in a browser, while maintaining the graphically …

Reader Shane left a comment:

If using transparency on a block element it makes the text inside transparent as well. Is there a way I can prevent that from happening? I tried putting the text in another div and …

Keep your list items INSIDE

There is quickie CSS trick over on Free CSS Templates reminding about the list-style-position property and how you use it to keep your list items inside your list instead of (weirdly) defaulting outside.

 …

Articles

Update April 2013: This article is pretty old. This isn’t very hard. Just give the list centered text (e.g. ul.nav { text-align: center; }) and the list items inline-block (e.g. ul.nav li { display: inline-block; }…). If you

This is kind of a Links of Interest post, but I wanted to highlight these things extra-specially:

A Preview of HTML 5

I know everyone and their mother is going to be linking to this article, and I also know …

Note: this should only be used for the powers of good! Don’t go around stealing people’s background images and using them on your own site without asking!

Many sites employ the use of a background image. They range from absolutely, …

Due to user privacy issues, more modern browsers severely limit how you are able to style :visited links, which renders this article rather useless. You can read more about it here.

Web browsers know which links on a page have …

If you come from a print background at all, one of the things you might sorely miss is the concept of “tabs”. For example, think of a restaurant menu where the title of the dish is on the left, then …

Since I published my article on using CSS in HTML emails a few days ago, there has been a couple of great articles published on the same subject. I want to highlight some of these, and some other related articles …

UPDATE October 2012: This article is almost five years old. It contains a bunch of stuff I’d never do anymore. Rather than delete it, I’m going to update each section with better information.
1. em strong

Perhaps more than I …

You are likely aware of the page-centering technique of adding auto left and right margins to an outer div:

#page-wrap {
margin: 0 auto;
}

One of the shortcomings of this technique is that when used on websites with multiple …

Should you be sending HTML emails at all?

This is surely a debated issue, but ultimately I say if you have a message you feel would benefit from a nicely designed email you should go for it. If you just …

If you’ve ever had to deal much with your .htaccess files, you know it’s like learning a whole new cryptic language onto itself. It’s high time someone made it easy. This online generator takes you through the options in …

With more power, comes more responsibility.

One of the things that CSS allows you to control is the hover state of many objects, most notably, anchor (<a>) elements. Typically, the hover state is styled with color changes, or perhaps something …

A quick intro to semantics

When we talk about semantics in HTML, we are talking about how HTML tags are used to describe the content. Good semantics means that the tags are being used well to describe the content. Bad …

Why bother?

Most people know how to print a web page, so including a “Print This Page” button on a website is often overkill. But there are some circumstances where it really makes sense. I just came across one of …

• I wrote a guest post over on Tutorial Blog about taking control of image rollovers. In the tutorial, I show 5 different techniques for image rollovers ranging from relatively simple borders, to going from black and white to color,

…

I recently needed to make a placeholder page for a site. I wanted the logo image to be centered exactly in the middle of the screen, that is, both vertically and horizontally centered. Quickly, I thought I’d just give the …

So, what do we really have here?

As far as variety of font choices, things are pretty bleak. But Helvetica isn’t on pretty much every computer in the world because it’s a bad font. It’s actually a great font if …

1. Use Labels

You don’t need labels for your form to work, but as one CSS-Tricks reader once put it, it is an accessibility crime not to use them. Labels are what signify what the input box is for and …

Show off your inner design nerd with these CSS-themed T-Shirts. The holiday season is coming up too… if you know any hardcore CSS buffs that need some style for their body =) Click the T-Shirts for links to their respective …

Matthew Mullenweg (of WordPress) clarifies his thoughts on a WordPress theme marketplace. I’m all for it!

Foohack has a nice post up on 5 problems with CSS (Not like common mistakes, but problems with the CSS spec itself).

Not …

Reader Brian left a comment recently with what I thought was a really cool idea:

I was thinking it might be neat to have a floating div with the random letters of half a secret message, with the other half …

Here is the deal: you gotta test in IE. You don’t have to use it, you don’t have to like it, but you have to test in it. But which version do you test in? A normal windows configuration only …

First of all, what is “Page Size”?

Page size refers to the sum of all the elements it takes to render your page. That includes the HTML file, the CSS files, the images, the scripts, the multimedia…everything. Generally speaking, you …

Transparency is one of those CSS properties that has a weird history and requires lots of different properties and values to ensure cross browser compatibility that goes back as far as you can. To cover all your bases, you need …

My buddy Jermayn recently wrote a post about best practices for writing out URLs with multiple words. This got me thinking there could be an easy way to do this with CSS just using the simple <span> tag.

Let’s say …

The winner of the CSS Menu Maker iPhone contest was announced. The winning entry is really nice. I entered that sliding doors example I did a while ago, but it’s not nearly as nice as the winner. It’s a free …

I’m not sure this is the best way to go about this or not, but the need arose for me to do this recently and this is how I did it. This tutorial is focused on the scenario of “closing” …

Bye Bye BlogRush.
I really wanted to give BlogRush a healthy try, so it’s been in the sidebar here for over a month, if not two. They have just released Phase 2, and it was just what I have been …

By some estimates, up to 10% of the male population of the world suffers from some form of color blindness. The most common being Protanopia, or Red-Green color blindness, the inability to distinguish between red and green hues. There …

Good web designers spend a lot of time making their pages accessible. One way to think about accessibility is to think about the extreme case scenario of having every single thing deactivated on your site except plain old HTML. I’m …

Ordered lists are boring! Sure you can apply background images and do quite a bit of sprucing up to a regular ordered list, but you just don’t get enough control over the number itself. Here is an example where you …

I did another guest post over at CSSJuice on a technique using the same background image for different objects on a page.

Along the lines of the perfect fluid width layout that I did a while ago, Dwight House has …

The following post is a guest post, authored by Volkan Görgülü (email link) who has a passion for developing usable and accesible websites and writing well structured CSS and semantic (X)HTML.

You may know the classic link style …

I’ve touched on the “sliding doors” theory here a little bit before, but never with a full-blown example. If this is the first you are hearing of it, sliding doors is a technique which allows you to expand graphics “from …

The guiding theory behind CSS frameworks is saving time. If you write a lot of CSS, you know you write a lot of the exact same code over and over and over. There is something to be said of learning …

Here is a bona fide little CSS-Trick for ya’ll.

I knew I could make a “matrix” of squares with rollovers. Then I got to wondering if I could duplicate that matrix of rollovers elsewhere on the screen. I figured I …