A Web Design Community curated by Chris Coyier

Latest Articles RSS

How Long Should We Ban IPs?

There are all kinds of reasons IPs get banned. A forums manager might ban an IP because the user at it is spamming. An admin of an email server might also ban IPs for spamming. A web service might ban an IP for using an API in an unapproved way.

On this site, we used to ban IP’s in the forums all the time (the new forums have been much better in spam prevention). I also sometimes ban…

Posted on: 9/3/2010 with 30 Comments Read on! →

Fluid Width YouTube Videos

I saw that Andy Clarke had added a fluid width YouTube video to a particular page on one of his sites. His code relies upon a wrapping div and then images and video within this wrapper are set to the width of the wrapper:

.img img, .img object, img embed {
width: 100%;
}

I love the idea. It’s essentially the classic technique for dealing with images in fluid width designs. Andy’s code sets max-width to 100% here…

Posted on: 9/2/2010 with 29 Comments Read on! →

Digging Into WordPress, The Book, Version 3

When we first released the book Digging Into WordPress, we thought of some reasons why people might not want to buy it. A big reason is because tech books can go out of date quickly, especially when the subject is a fast-developing technology like WordPress. So, we fixed that. When you buy this book, you get PDF updates to it for life.

Today is just such an event. WordPress 3.0 has been out for a while now, and so…

Posted on: 9/1/2010 with 30 Comments Read on! →

Percentage Bugs in WebKit

Using percentage values for certain things can have slightly unexpected results in WebKit based browsers. For instance, if you have a series of columns set in percentage widths with percentage padding, WebKit can calculate their sizing rather strangely.

Posted on: 8/30/2010 with 29 Comments Read on! →

CSS is to HTML as a CMS is to… HTML

From the desk of important beginner concepts:

You have a website with 100 pages on it. All 100 pages use the same style.css file. You’d like to change the background color of every single page. You make one adjustment in the CSS file, and that background color adjustment will be reflected across all 100 pages. You don’t need to edit each of those pages individually. That’s the core benefit behind CSS: abstracting the design away from the markup.

Now…

Posted on: 8/28/2010 with 52 Comments Read on! →
Latest Screencast

#91: The WordPress Loop

There is no shortage of documentation on WordPress’ famous content-spewing structure, but I still feel like there is more confusion and mystery surrounding “The Loop” than there should be. In this screencast I try and explain what it is, how it works, related parts, and then demonstrate some alterations and various tricks. Things like running multiple loops, writing your own custom queries, and handling pagination with your own custom loops.

Links from Video:

Latest Snippets

BonBon Buttons Direct Link →

These are way above and beyond the level of any other “CSS3 buttons” I’ve seen. Multiple backgrounds combining gradients and images, uneven border-radius, pseudo elements, HSL coloring, @font-face icons, transitions, box shadows, text shadows, hover and active states… the list goes on. Every trick in the book masterfully employed.

They make my button maker look dull and flat.

HTML, CSS, and Javascript from the Ground Up Direct Link →

I’ve done my own The VERY Basics screencast, but this full series from Google, targeted at just-starting-out beginners, would be a good place to go directly after my intro, to take things further along.

More on CSS Selector Performance Direct Link →

This is a direct link to a PowerPoint file by Steve Souders (in April 2009). Of particular interest is pages 19-33 with all the information on CSS selectors. Evidence points to yes, there are efficiency differences in how you write selectors. But efficient CSS can sometimes come at the cost of larger CSS (bad) and that a “real world” levels even “costly” selectors aren’t that big of a deal.

* This website may or may not contain any actual CSS or Tricks.