Grow your CSS skills. Land your dream job.

Article Archives

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

Reviews of Mac CSS Editors

There is some very nice software out there for creating and editing CSS files. Since I'm mostly a Mac guy, this review is Mac focused, but I would love to hear about Windows CSS editors if anyone has anything to …

October 8, 200712 comments Redesign, Sticks with Tables has been flogged a few times for it's weird use of "tabs" in it's design that don't really act like tabs. Well now we can start flogging it for all new reasons. They have gone with a really busy, …

October 7, 200711 comments

Internet Explorer Voodoo Doll

I found this hilarious IE Voodoo Doll over on Deviant Art. What an awesome way to take out your aggression! You can't buy them of course (copyrights...), but there is talk of a tutorial. Hopefully this will help some …

October 7, 20072 comments

Remember The Order of Margin/Padding Shorthand with TROUBLE

Recently I posted about a little trick about remembering the css anchor selectors. Now I have another little trick that is even more useful, using the word TROUBLE to remember the order of padding/margin amounts in CSS shorthand. The …

October 6, 200711 comments

When to use JPG and When to use GIF

Like many of you, I spend a fair bit of time saving out graphics for use on the web. So when I'm browsing around the web, just by second nature I spot optimization mistakes. Kind of like how a typesetter …

October 5, 200720 comments

Grabbing Hex Codes for Colors

Defining colors in CSS is all about Hex Codes. You know, those alphanumeric six-digit things like #990000. You might have a handful of them memorized. Like that one I just mentioned is a nice dark red. #cccccc is a …

October 4, 20077 comments

Beginner CSS Tips For Your Blog

For many people, their introduction to web design and the wonderful world of CSS is through blogging. They start off blogging because it's so easy and you don't need to know anything at all about design. Soon after, the desire …

October 3, 20074 comments

Tag Cloud with Varied Padding Thickness

Often times "tag clouds" use variations in font-size and font-weight to distinguish between heavy use and light use tags. Here is another approach: use rollover boxes of different sizes through varied amounts of padding.

You can set the different sizes …

October 3, 20074 comments

Submit With Style

This is how you create a super basic submit button:

<input type="button" value="Submit" />

All you need to do to replace this default button with an image is to change the type to image and then declare a source image …

October 2, 20075 comments

Better Blockquotes with CSS

Blockquotes are HTML elements that are meant to designate when a particular section of text is being taken from another website or other source. Different browsers have different built-in styling for blockquotes, often just a simple left margin. If you …

October 1, 200713 comments

* { margin: 0; padding: 0; } No Longer Cool

One the techniques I have advocated using for a long time is this:

* { margin: 0; padding: 0; }

This is part of the "CSS Reset" theory which helps keep your designs consistent across browsers, a very good thing. …

September 30, 20079 comments

10 Beautiful and Functional BLUE Web Layouts

Sometimes the best way to get inspired to design is to look at other great designs. These designs showcase beauty and function over flashiness. There are some amazing and flashy designs out there where I love the design but …

September 28, 20072 comments

List of Deprecated Attributes Still in Widespread Use

A "deprecated" element is an element the W3C has designated as outdated. These elements should not be used and are generally considered to be "bad code". If you use a STRICT DOCTYPE, deprecated elements will not pass validation.

The thing …

September 27, 200712 comments

“Real World” Web Design Still Needs to Accomodate 800×600

Check out the statistics for the screen resolutions of all you hip kids who read CSS-Tricks:

On this site, 800x600 doesn't even make the top ten. Knowing that, I designed this site to make use of that extra pixel …

September 26, 200715 comments

How To Remember The Order of Selectors: LOVE and HATE

I read a comment the other day over on CSS Drive from someone named Slackerbabe that I thought was worth repeating.

Heres a cool way to remember the order of the four selectors, "LVHA (link visited hover active)",....

Just think …

September 25, 20077 comments

Creating a Nice Textarea

A textarea is an element on a webpage that you can type into. These are commonly used as commenting areas, contact forms or address entry areas. All browsers have defaults styles for textareas which vary. You can take control of …

September 24, 200724 comments

CSS Page Loader Example

Reader Delang was having trouble with the CSS Page Loader concept I posted a while ago. So I went and made up an example page. It's very simple, and it just "fakes" actually loading something. As in, it's not …

September 23, 20077 comments

Resizing YouTube Videos with a simple URL hack

Someone over at Digital Inspiration asked the question:

"How can I send a YouTube Video so that when the person receives it there will not be any other videos in the sidebars that can be opened."

There is an awesome …

September 21, 20072 comments

Links of Interest

New minimalism in web interface design

You.. and me... and CSS simultaneous
Edit CSS code in Firefox and IE at the same time. Windows only.

Quick web typography tip: Give your <p> elements bottom margin.

ModalBox: easily the nicest download-modify-use …

September 20, 20072 comments

A Grunge Style CSS Menu (Free Download)

Grunge is a popular style these days. I thought I'd throw out there a fairly simple "grungy" menu for free download. Feel free to download, alter, and use however you want.



September 20, 20073 comments

A Fresh Look for CSS-Tricks

Welcome to the new look for CSS-Tricks. I decided it was time to get down to it and give CSS-Tricks a brand new look. I hope you like it. I think it's far nicer in both form and function than …

September 19, 200710 comments

A Non-Annoying a:visited Technique

As you may know, you can define a style for a:visited in your CSS, which will apply itself to links in visitors browsers that they have already visited. The usefulness of this is debatable, but no matter what, it's best …

September 19, 200712 comments

Set up “Variables” for Colors in CSS

I say "variable" because CSS doesn't natively support real variables. The debate is somewhat heated on whether it should or not. I'm not going to take a stand on that one, but there is a clever little hack bouncing around …

September 18, 20070 comments

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