Article Archives

If something was working, but now it’s broken, then something changed.

Many things are the same, some are different.

This is true with anything: your watch, a remote control, even your relationships. It’s certainly true with websites. If your website …

Pseudo class selectors CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover:

a:hover {
/* Yep, hover is a pseudo class */
}

They are immensely useful in a variety …

Back in the summer of last year, I did a little roundup I called The “Light” CMS Trend. Ironically enough, one that wasn’t included was LightCMS. I’ve been checking it out (yes, this is a sponsored review) and …

Alright so after one missed deadline, the results are here! You can browse all the scores and see peoples entries on the CSS Off results page.

Winners

Of course all these people did a great job. For their …

A bit of a cookie-cutter poll this time, but sometimes those lead to the biggest and most interesting discussions. This is for the folks around here who are more of web developers than web designers:

What is your server-side language …

Quite a lot of people weighed in on this poll that went out in January. The question was:

Should tags like em and strong go <em(outside)</empunctuation characters, or (<stronginside them</strong)?

Like many polls around here, …

I was telling everyone to check back Wednesday for CSS Off results. Well… #facepalm. Huge apologies, we still aren’t quite ready. As it turns out judging 136 entries is quite a huge task. The important bit: come hell or high …

CSS3 is a big mess! 4+ rules for making a corner round or adding a drop shadow! Preposterous! Where are the standards?!

I’ve been hearing a ton of that. There is something of a point here. We all like standards, …

If you were interested in that CSS Tabs stuff from yesterday, check out the new demo. I got a little obsessed with it and tried out a bunch more things. Still nothing I’d call a 100% perfect replacement to …

MORE CURRENT ARTICLE: Functional CSS Tabs Revisited

When you think of “tabs”, your mind might go right to JavaScript. Watch for a click on a tab, hide all the panels, show the one corresponding to tab just clicked on. All …

Reader Kartlos emailed me in pointing to me to an interesting article by the great Mr. Snook from a few years back. I don’t think I had seen it before and it’s a bonafide “CSS Trick” so I thought I …

In the past we’ve covered adding +/- buttons to number-based inputs to help user interface (it’s easier than typing in some circumstances). Reader Hitesh N Chavda emailed me with the idea of doing it with the scroll of the mouse …

We sold out of our first batch of Digging Into WordPress books in a matter of weeks. We could have just ordered more as soon as supplies were low, but it just so happened that right about that time WordPress …

I’ll be speaking at the CMS Expo this May 3rd – 5th (I speak the 4th and 5th). It’s in Evanston, IL, basically, Chicago.

I’ll be doing two sessions, one Tuesday, on Wednesday. One of them will be on advanced …

I’ve added two new buttons to all of the code snippets in the Snippets section of the site. Now a button to add directly to Snippets.app and a button to directly copy to the clipboard join the Coda and Textmate …

This is a little specific… but I figured what the heck maybe it will be useful for someone. I recently had occasion to make multiple different login forms on a single page. With CSS we know we can apply styling …

Can you spot the difference between these two selectors?

#header.callout { }

#header .callout { }

They look nearly identical, but the top one has no space between “#header” and “.callout” while the bottom one does. This small difference makes …

This is an update to original Chat Room we published here on CSS-Tricks. In some ways, the technology is the same. We are going to employ PHP to talk to the server, jQuery to keep the chat rolling, and the …

PHP has a cool function that automatically highlights PHP code called highlight_string(); Theoretically this could be used to roll your own code highlighting on a site, rather than rely on JavaScript or some kind of external service to do it. …

Wave that checkered flag! Comments are closed and the entry form is shut down as the deadline for the CSS Off has now passed. We had an incredible 136 entries! A few right at the buzzer which makes me worry …

CSS has the ability to target HTML elements based on any one of their attributes. You probably already know about classes and IDs. Check out this bit of HTML:

<h2 id="title" class="magic" rel="friend">David Walsh</h2>

This single element has three attributes: …

I met Jonathan at a conference last year. Jonathan was giving a presentation about ExpressionEngine and how good it is for designers. He gave me a good natured ribbing about my use of WordPress. Read the interview below where I …

Alrighty folks, here’s the deal. I have a whole bunch of stuff I want to give away. Mostly books on web design and development. I’ve been deep in thought trying to figure out the best way to give them all …

These “sliding” style navigation bars have been around a while, I just thought I’d take a crack at doing it myself as the opportunity came up recently. Turns out it’s really pretty darn easy. I put two examples together for …

There is a CSS selector, really a pseudo-selector, called nth-child. Here is an example of using it:

ul li:nth-child(3n+3) {
color: #ccc;
}

What the above CSS does, is select every third list item inside unordered lists. That is, the …

Two things today.

First, have you guys heard of Threadsy? I hadn’t, but apparently they got 2nd place at TechCrunch 50, which is pretty great. It’s a web application that combines several of your online “input streams” (e.g. Email, …

A reader recently emailed in asking if I knew a way to have links be underlined, and then have the underline grow upwards on hover and turn into a background/highlight effect. I ended up trying three different things, with varying levels of success.

Totally free template for ya’ll today. It is fully of AJAX navigation goodness, so subpages load dynamically with no page reload. If you don’t like that part (for example, you are trying to put JavaScript demos on the subpages and they won’t load that way) just remove the JavaScript files from the header and it will revert to regular nav. Enjoy!

On this current design of CSS-Tricks, you may have noticed how all links bump themselves down one pixel as you click them. I started noticing this effect on sites of luminaries like Tim Van Damme and Andy Clarke, so …

Before January slips away from me, I want to get my annual Thank You post out! Thanks to TheDoc (our resident prolific forums guru) for reminding me.

Milestones

Snippets Launched

The biggest addition to this site in 2009 was the …

… have a good design sense and understand the fundamentals / design principals.
… know all the major design software including the entire Adobe Creative Suite.
… have some basic video editing skills.
… know HTML, CSS, and JavaScript.
… …

This year on 24 Ways, Jeffrey Zeldman wrote an article about the rending problems of “real fonts” on the web. The one line summary: different browsers and different platforms do “hinting” differently which can be bad news. Of course, …

I decided that in 2010, I was going to design more things. I didn’t do as much just straight up designing of things in 2009. So rather than wait around for opportunities to come to me, I am going to …

In an effort to provide a permanent resource to the question “are there any books you recommend?”, I created the CSS-Tricks Bookshelf. It had slowly gone out of date, so now I’ve bought it back up to date …

Using RGBa for progressive enhancement is getting more and more popular, which is awesome. Even nearly a year ago it was pretty much ready to rock. A great way to handle the progressive enhancement part is just to declare …

There is probably a right and wrong answer for this, so if that emerges, I’ll update this article and mention it in the results. Regardless, I don’t think it’s obvious, so this poll will should be answers on what you …

This article has been updated from an older version (originally Sept 24, 2007). I just wanted to expand it and make it more clear.

If you read this blog, there is a 99% chance you’ve had a hair-pulling experience with …

My intention with this poll was to be kinda vague, so that people would respond about what they like the best instead of thinking of one particular instance of usage. Usage could be where ever you need to manually name …

What? Yeah sorry, dumb title.

Here’s my point: when websites offer awesome things that seemingly would reduce the amount of traffic they get, the cumulative effect is increasing traffic.

APIs

Flickr offers robust APIs. With them, you can upload, download, …

A reader named Arjan recently emailed me telling me about a website that The Printliminator didn’t work on. They had traced it back to the fact that the site used a bunch of “overlays” with ridiculously high values for z-index. …

The background property is a major player in what makes the awesome CSS designs of today possible. There are just a few properties that make it up: background-color, background-image, background-position, background-repeat, and background-attachment. Very simple, very powerful. I have a …

Long comment threads on blog posts are a mixed blessing. It is great to have stirred up such great community discussion. But anything beyond, say, 20 comments is beginning to get beyond what anyone is willing to actually read. What …

If you have multiple display ads of the same size in a block on your site, a good thing to do is randomize their position in the block. It’s more fair to the advertisers and the different layouts reduce ad …

I recently said that I thought the current “standard” pixel dimensions for ads are ridiculous. 728×90? 88 x 31? Wha? I have a new idea: ad sizes that make sense.

Let’s start with a basic building block. 125×125 is very …

This is an update to the first version of filtering blocks I did a while back. The idea is that you have a long list or large set of “blocks” on the page. Each block belongs to a certain group. …

<iframe>’s which display content from different domains have security measures in place to prevent all sorts of stuff. For example, you can’t have JavaScript access anything inside it. It can be very frustrating, for example, if you just want to …

On this week’s screencast I talk about online advertising. What it is, how it works, and mostly, my opinions about it. I thought I’d recap here and touch on some things I forgot about.

Content Websites vs. Product/Service Websites

There …

A friend of mine recently sent me her résumé to look over. I’m definitely not a professional job hunter but I think in these situations any extra set of eyes can help fine tune the final product. As it was, …

When a great musician hears a great song, what do they hear? I am not a great musician so I can only speculate. I would guess that they listen for the emotion behind the song. Great songs are great because …

The print version of Digging Into WordPress the book is now available here. It’s been an awesome journey, taking this from idea to final product and having 100% control over everything. That is a story for another post, for …