Article Archives

IzzyMenu

This is another one of those automatic menu builder sites. I think this one is pretty nice though. Lots of customizable features, you can save your menus there, you can download them and they come nicely packaged up with …

I am interested to know how many of you CSS-Tricks readers actually write CSS as part of their job or career.

• 0% – You don’t do anything CSS related at work
• 1-25% – You use CSS a little bit but

…

Tabbed boxes are all the rage these days. Check out the “Explore” section on MSNBC, or the Premium News Theme to see how they can be used in a blog setting. I think it’s for a good reason. It …

When I say CSS image replacement, I mean taking a page element that isn’t normally an image and turning it into an image. This is a very common trick and popular because of it’s semantic meaningfulness and SEO …

If you haven’t seen the mysteriously cool Silverback app teaser page you should check it out. The Gorilla was designed by Jon Hicks (yep! the same site with the cool body-border technique). Make sure you resize your browser around …

Challenge: CSS Globe vs. CSS-Tricks

Someone started an XHTML Challenge between CSS-Tricks and CSS Globe. At the time it was started I was working on that new subscribe section and there was a screwed up tag causing the site …

Whenever I have a problem with an image “not showing up” on a web page, the first thing I do is take a close look at the file path that references that image. If that file path is relative (meaning …

I get the question from time to time what plugins I use on this blog. Since I just got through installing a brand new one (Open ID), I thought this might be a good time to run through the list.…

As of late yesterday here are the results:

I wasn’t surprised to see the Meyer’s reset in the lead. It is very popular, thoughtful, and effective. I was surprised to “What’s a CSS Reset?” at a narrow second place. In …

Alpha-transparent PNG’s, (“PNG-24″ for those of you saving out of Photoshop) are an amazing thing for web designers. We can make a button with a drop shadow on it and it will multiply that shadow onto whatever happens to be …

Photoshop Cryptoquote Challenge

This has nothing to do with CSS, but I thought it might be a fun little for any Photoshop gurus out there. Someone spraypainted a message on the side of one of my neighbor’s houses. Before I …

This is way past due…but it’s finally here: a print stylesheet!

I’ll start by showing you the entire stylesheet, then I’ll explain a little bit about what I was thinking.

body {
font-family: Georgia, serif;
background: none;
color: black;
}
…

Creating a horizontal row of objects that are equidistant from each other is another one of those things in web design that is much more difficult than it should be. This can be a very useful thing to do, especially …

CSS-Tricks reader Norm writes in to ask me about a problem he is having with color on a new site he is designing:

I have a graphical question about my test site. The header and main page background are …

CSS Rand

I was kind of confused when I first went to CSS Rand, because it just looked like some random nice website (not a gallery) then I figured it out… It’s a new kind of design gallery, where …

It took a little while, but the CSS-Tricks Video Screencasts are now listed properly in the iTunes podcast directory.

Even cooler, you can just straight up search for “CSS” in the iTunes search area and it comes up as one …

1. Redirect links from external sites to your “DON’T STEAL” graphic

There are numerous tutorials on how to do this around the web, but I most recently read about it on David Airey’s article “How to deter thieves from …

Different browsers have different default settings for page elements. In an effort to keep web pages looking as consistent as possible between browsers, many web designers use what is commonly referred to as a CSS reset to wipe away these …

C.S.I in XHTML and CSS coding.

Dor Dan has a nice article on keeping both your HTML and CSS clean with a consistent system of Comments, Spacing, and Indents. Now that’s some beautiful code.

 …

Detailed Look at

This article is co-authored by David Walsh of
The David Walsh Blog :: PHP, CSS, MooTools, and Everything Else

UPDATE: This post was updated on April 30th, 2008 to account for a minor change in how Yahoo! was serving up …

This is has been an interesting poll! It’s almost a dead-heat. Through the course of it, it has actually gone back and forth for the lead a bit.

The winner by a nose: It is the MOBILE DEVICES job to …

DZone has recently rolled out a footer on their new “Zones” that I designed/coded for them. If you want to check it out live, you can see it at any of the zones like the CSS Zone. I thought …

Did a little pre-spring-cleaning around here today

• Lightened up the whole feel with the lighter textured background.
• Added a link to the new videos section.
• Make the subscribe section more obvious, and included the new video feed.

Really, it’s not …

Arial or Helvetica?

Once there was a typeface called Helvetica. It was extremely popular. Later came a software company called Microsoft. Can you tell the difference between the original and the rip-off in these ten examples?

 …

Blind Text Generator

One of the many good suggestions I got for hosting these video files was to use the Amazon S3 (Simple Storage Service). I had heard about this before, but didn’t know much about it. Nothing like trial by fire to …

Alright I’m just gonna publish the link and see how it goes…
CSS-Tricks Video Screencasts

DISCLAIMER: These are my very first screencasts ever, so the quality is sort of rough, folks. I am going to keep at it though …

If you are familiar with the concepts of “floats”, you know that if you float a page element to the left, that the next page element will move up next to that element on the right, if possible. But have …

That’s just a little teaser graphic there for ya’ll =)

Here is the scoop. I’m all set up to start doing some Video Screencasts for CSS-Tricks. I actually already sort of shot the first one. I am on a Mac, …

The Funkiest Ampersand’s You Have Ever Seen

Spoon Graphics has an awesome roundup of funky ampersands. I mentioned in the comments a cool thing to “use the best ampersand available” is to wrap the ampersands in an unique …

Hide an image in your text!

Reader Erik left a comment linking to an amazing example of what can be done with the CSS3 selection color technique I just posted about. You have to see it to believe it.
…

A

One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. At the time of this writing, only Safari and Firefox are supporting …

I was interviewed by mao at snap2objects. Check it out if you want to hear me ramble on about CSS =)…

Most web browsers make resizing text an easy thing to do*, but not all web browsers will resize images along with that text**. Good web designers know this and go to great lengths to make sure their web layouts don’t …

Sub Pixel Problems in CSS

John Resig has an interesting writeup of how different browsers deal with sub-pixel problems. By sub pixel problems he is referring to the rounding of pixels when widths are defined with percentages and the …

Imagine the common scenario of a large header containing a horizontal menu. You want the entire header area to be clickable as a “home” button, but obviously you need your menu items to be clickable as well.

Let’s write the …

January is coming to a close already so I thought I’d better get this out! I want to do a little wrap up of 2007 and give my thanks where thanks is due.…

Thanks to all you readers, subscribers, and

What is an CSS Attribute Selector?

CSS provides a way to style elements based specifically on attributes of the link, rather than the type of element alone. For example, you already know that you can style a header element:

h1 …

Reader Sansan generously worked up my little GridControl idea into a javascript snippet that was very simple to make into a bookmarklet.

Just drag the link button below up into your bookmark bar, and then click to activate on any …

Designing by grid is as old as design itself.

Grids are a fundamental concept to design that transcend trends. Long after the shiny, sans-serify, reflective shadows of web 2.0 are gone, grids will still be here. When we access digital …

Wow.

That sums up my reaction to all the responses from this article. You guys really had something to say on this subject!

As of Wednesday evening, there have been 430 votes on the poll and a whopping 123 comments …

Seasonal CSS

I enjoyed this idea by John Leschinski over on Blogging Tips on how to use a little PHP and CSS to make “seasonal CSS“. You simply spit out the date right inside the class name of …

I have a Happy New Year’s gift for all you CSS-Tricks readers! It’s a big roundup of all those web design galleries that are so popular these days. I’ve been wanting do a round of these for a while, and …

I promise I won’t go poll crazy, but since we had so much fun with the CSS Skill Level poll I thought I’d open up a new one. This one asks for your CSS editor of choice.

If I …

While screwing around at the ol’ Zen Garden, I ran into a pretty neat little effect for underlined links. We’ve talked about this before, but never incorporating animation.

A “walking link” is a link with a dotted underline …

….and the results are in!

As of this morning, 735 people responded to the CSS Skill Level survey. This was really interesting for me because until now I really had no idea what kind of skill level the readers of …

I really like one of the typographic tricks Mark Boulton makes in his “Better Typography” presentation. (Slideshow of the presentation here. Around slide #109) He suggests “using the best ampersand available”. This just means that on some typefaces, the …

1. PNG is great, but I can’t use them because they don’t work in Internet Explorer.

This is one is almost entirely false. PNGs of any flavor will display in Internet Explorer, even back to some pretty old versions. The …

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 …