Grow your CSS skills. Land your dream job.

Article Archives

How to Redirect index.html to index.php

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

December 10, 200724 comments

The All-Expandable Box

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 …

December 9, 20073 comments

Non-Transparent Elements Inside Transparent Elements

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 …

December 8, 200740 comments

Links of Interest

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…
December 7, 20072 comments

Centering List Items Horizontally (Slightly Trickier Than You Might Think)

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…
December 6, 200740 comments

Big Stories on Web Design this Month

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 …

December 5, 20076 comments

How To Steal A Websites Background Image

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,

December 4, 200722 comments

“Checkmark” Your Visited Links with Pure CSS

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 …

December 2, 200752 comments

Links of Interest

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 …

November 30, 20077 comments

More Information Regarding HTML Emails

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 …

November 29, 20073 comments

My 5 Favorite WordPress CSS Tricks

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 …

November 29, 20075 comments

Eliminate “Jumps” in Horizontal Centering By Forcing a Scroll Bar

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 …

November 28, 200734 comments

Using CSS in HTML Emails: The Real Story

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 …

November 26, 200724 comments

Links of Interest

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 …

November 25, 20072 comments

Avoid “CSS Jitter”

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 …

November 23, 200719 comments

Utilizing the Underused (But Semantically Awesome) Definition List

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

November 20, 200728 comments

Quick Tip: Making a ‘Print This Page’ Button

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 …

November 19, 20078 comments

Links of Interest

  • 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,
November 17, 20073 comments

Quick CSS Trick: How To Center an Object Exactly In The Center

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 …

November 14, 200739 comments

Making the Most of the Limited Choices in Web Typography

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 …

November 12, 200712 comments

Tips For Creating Great Web Forms

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 …

November 11, 200782 comments

9 Awesome CSS Themed T-Shirts

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 …

November 9, 200736 comments

Links of Interest

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 …

November 9, 20076 comments

Make a “Secret Message” with CSS Positioning and Transparency

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 …

November 8, 200723 comments

Internet Explorer Testing Done Right

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 …

November 7, 20079 comments

What is the Ideal Page Size for Quick Loading Pages?

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

November 6, 20077 comments

CSS Transparency Settings for All Browsers

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 …

November 4, 200778 comments

Quick CSS Trick: Using Span to Break Up Words in URLS

My buddy Jermayn recently wrote a post (update: offline now) 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 tag.…

November 3, 20078 comments

Links of Interest

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 …

November 2, 20071 comment

Combine All the Posts From Two WordPress Blogs Into One

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

November 1, 20076 comments

State of the Blog: Statistics and Updates

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 …

October 31, 20074 comments

Accessibility Basics: Testing Your Page For Color Blindness

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 …

October 30, 20071 comment

Accessibility Basics: How Does Your Page Look To A Screen Reader?

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 …

October 29, 20073 comments

Better Ordered Lists (Using Simple PHP and CSS)

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 …

October 27, 200758 comments

Links of Interest

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 …

October 26, 20070 comments

Alternative Style Links

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 …

October 25, 200716 comments

Simple Tabbed Menu Using Sliding Doors (Downloadable)

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

October 24, 20076 comments

CSS Frameworks Roundup (and some thoughts)

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 …

October 23, 200716 comments

Matrix of Rollovers

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 …

October 22, 20076 comments

Links of Interest

Nice article from 456 Berea Street on maintaining the quality of your markup once you pass a design along to a client. It advocates the use of Big Red Angry Text, which is a CSS trick for highlighting any …

October 20, 20070 comments

A Nice & Simple Contact Form (Downloadable)

There are a million contact form examples out there, why this one?

  • It's SIMPLE
  • It's FREE
  • It WORKS
  • It's VALID
  • and it's styled with CSS

Take a look. Download it. Take it apart. Use it for whatever you'd like.

Check …

October 19, 200766 comments

10 Beautiful and Functional RED Web Layouts

Sometimes looking at other sites is all the inspiration you need! Here are some nicely designed sites that I feel stay focused on functionality as well.

This post is brought to you by the color RED. (Also, see 10 Beautiful

October 18, 200711 comments

Multiple Remote Linking: An Example and How-To

What is remote linking?

Remote linking is a rollover that affects another object on the page. The rollover can affect itself as well. This can be done with PURE CSS, making it a very cool and lightweight technique.

In …

October 17, 200711 comments

Guest Post: Blue Flavor Header Design Technique

The following post is a guest post by authored by Jermayn Parker of GermWorks, a web and multimedia blog.

Headers are an important factor in web design, they can either make or break a design. Since web 2.0, we …

October 16, 20073 comments

Links of Interest

Jared Schwager has an interesting idea on compressing CSS on-the-fly using PHP. Works pretty well. The end result is slightly quicker downloads and slightly quicker render times with a slightly higher burden on the server.

Fadtastic has a nice roundup …

October 15, 20072 comments

Fluid Width and Floating Object Possibilities

The typical technique for making a fluid width layout is to have your main content have a minimum and maximum width and then make sure it is working in all browsers with various techniques.

Another way is to give elements …

October 14, 20074 comments

The Perfect Fluid Width Layout

I've been thinking a lot about screen resolution lately and how the use of fluid width websites is the best way to accommodate all visitors screen resolutions. The alternative, static width websites, have to make a choice. You can optimize …

October 11, 200775 comments

Links of Interest

Polishing your website. Nice overview about the subtleties and details of web design and how those details are what makes great websites.

Honeypot Captcha. It's like the Un-Captcha. Basically you hide the captcha with CSS. Bots see it, Humans …

October 10, 20070 comments

Subtle Animations of Page Elements Using GIFs

I really like it when pages use really subtle animation to enhance different page elements. Check out the E-Junkie site and their little flame dude in the stamp as their logo. Every once in a while he blinks and it's …

October 10, 20075 comments

CSS3 Idea: Rotation of Page Elements

There is discussion about making rotation part of the CSS3. Here are some important points:

There are two types of rotation: rotation that happens during layout (and pushes aside content below it), and rotation that happens after layout.

width: auto

October 9, 20076 comments

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