Article Archives

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 …

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 …

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

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 …

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

Update: WebKit

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 …

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 …

One of the new types of inputs in HTML5 is search.

<input type=search name=s>

It does absolutely nothing in most browsers. It just behaves like a text input. This isn’t a problem. The spec doesn’t require it to do …

Chrome users and CSS wranglers, check this out. It’s an extension which adds a “css” link on the right in your URL bar. Click it to open a CSS Edit-like pane on any website where you can click elements and …

The Oscars of web nerdery. I’m nominated for a flatteringly high number of categories! Web personality of the year? You know it.…

Have you ever tried to debug a site where a beginner web designer has loaded the page with scripts? There’s a couple copies of jQuery in various versions, maybe a little Prototype or MooTools thrown in. We can laugh a …

This is a very cool extension for Firebug (add-on for an add-on?) that expands Firebug’s capabilities with jQuery. For instance, a built in jQueryify button, showing attached event handlers in the Content / DOM tree view, and highlighting all elements …

Here’s some food for thought.

When designing something that you are reasonably certain the user is willing (or forced) to invest time in learning to use proficiently, is it beneficial to intentionally make some tasks just slightly more difficult than …

The latest poll was all about picking the best sentence to a user to perform a specific action on a website. The choices are listed below, sorted from most popular to least:

• 39% – Select a user and then click

…

Mike Harding with a desperately needed fix for when backgrounds “leak” out of elements with borders and border-radius.…

Quick public service announcement: The CSS-Tricks forums will be unavailable starting now as the undergo awesomeness upgrades. I’ll update this post when they are back!

And they are back! Might be a bug here and there. Definitely let me know …

If you asked me right now, Hey Chris, what’s your favorite browser? I wouldn’t know what to tell you! I’ve been a Firefox user primarily over the past few years, but over the last several months my allegiance is no …

That’s the title of my proposed talk for SXSW. I’m rather excited about it. I’m going to be talking a lot about this blog and how I’ve done things over the years and what has and hasn’t been successful for …

The following is a guest post by r0mk1n. I was able to easily follow along and have the demo app up and running on my machine in just a few minutes. It’s pretty cool how easy it has become …

Evan Black took my “slide to unlock” demo and made the actual finger-slider work with Mobile Safari using JavaScript touch events. I updated the demo on this site as well, making it work both on desktop browsers and Mobile Safari …

Let’s say you are creating a CSS file for a modular bit of a webpage. Perhaps you are the type that separates your CSS files into bits like header.css, sidebar.css, footer.css, etc. I just ran across an idea I thought …

I rolled out a new design this weekend! As usual it’s a bit of an aesthetic overhaul (blue!). I’m going to cover the why, the new aspects, and some of the new technology involved. RSS readers, you’ll have to …

One of the major bummers about Safari is that the “View Source” view is totally lackluster. No code highlighting, no live links, no line numbers, no refresh. Boooo. The BetterSource extension solves every one of those problems. I do wish …

Papa bear: HTML5 Boilerplate
Mama bear: HTML5 Reset
Baby bear: HTML5 site template…

There are a couple of WebKit specific properties that make giving text a gradient background possible:

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Those will allow the background of the parent element to become the background of the text inside. I gots to …

When you are coding up a brand new site, I think this is a pretty efficient workflow for how to handle CSS Sprites.

1. Ignore sprites entirely. Make every background image its own separate image and reference them as such

…

We’re giving away a friggin’ Battle Axe (and $3,000) to the winner of the Wufoo API contest. Cash prizes and Wufoo accounts for life to the second and third place winners as well. Developers, you have until the end of …

With the recent proliferation of touch devices, the web designers of the world are losing our beloved mouse pointer. There has been some interesting talk about how we essentially lose the :hover pseudo class in CSS as well as mouseenter, …

The idea here was to compare different styles of writing CSS and see how they affect the page rendering. So using all ID’s, using all classes, using OOCSS techniques, etc. I gave some best practices advice on this a little …

MediaElement.js is a jQuery-based package for allowing us to:

1. Use the HTML5 elements <videoand <audioand have them work cross-browser (including mobile WebKit)
2. Deliver a consistent UI for controls
3. Using only a single format

I’ll be using it in …

Way back when I used to do “Links of Interest” style posts. I’m happy to announce now that 1) There is a new design of this site coming within the next few weeks and 2) Linkage is coming back. I’m …

HTML5 has a new attribute, contenteditable, which can be applied to any element which allows it to be edited directly in the browser window. Think of text input with a predefined value, but it can literally be any element. Form …

When working with HTML5 today, many of you know that you’ll need to include the “HTML5 shiv” to ensure that CSS will recognize and be able to style those elements in browsers that aren’t yet hip to HTML5.

<!--[if IE]>
…

This is a guest post by Robin Thrift who wrote to me with some demo code for creating this effect. Together we turned it into a jQuery plugin. Enjoy!

I was browsing through a few Flash templates on ActiveDen when …

This is a guest post by Jacob Gillespie who started an interesting thread on Forrst about this topic. I invited him to post it here, to which he graciously accepted.

Over the past several years, I have taken an interest …

I had the honor of being on the jQuery Podcast #30 with Ralph Whitbeck and Doug Neiner. We talk about some of the different parts of CSS-Tricks, the jQuery conference, and the difference between designer and developers. We also …

CSS has a value for the display attribute called run-in. It’s like this:

h3 {
display: run-in;
}

The point is to allow a header to run into text below it, without sacrificing semantics or running into the problems you …

The crew from Unmatched Style are the folks that run ConvergeSE which I was lucky enough to attend this year. They are really great folks! While I was down there, I was interviewed by Gene for their podcast.

Thanks to …

Dude, you browse with JavaScript on?

Uhm, yeah, why wouldn’t I?

It’s totally insecure. Hackers could destroy your computer.

Hackers? What is this 1995? And, no they can’t.

They can definitely steal information about you without you knowing.

Like what?…

The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that’s your thing) with a single div and a single image. In this article I …

A little while back there was a guest post about Ajax image previews. It’s a nice technique but it left myself and a few other commenters thinking: wouldn’t it be cool if you didn’t have to upload the image …

Oh, <textarea>’s. How many quirks you posses. Here is a collection of nine things you might want to do related to textareas. Enjoy.

1. Image as textarea background, disappears when text is entered.

You can add a background-image to a …

The internet has the potential to put a global audience at your fingertips, but there’s far more to reaching across cultural divides than simply putting your website out there and waiting for people to visit it. There are issues to …

Google Maps has a JavaScript API now in it’s third version. I remember playing with some version of the API back in v2 and thought it was kinda cool but a bit obtuse. For one thing, v3 no longer requires …

Have you ever seen those two things (in the title) being used in jQuery? Here is a simple example:

$("a").click(function() {
$("body").append($(this).attr("href"));
return false;
}

That code would append the href attribute as text to the body every time a …

We’ve covered using CSS media queries to assign different stylesheets depending on browser window size. In that example, we changed the layout of the entire page based on the space available. It isn’t required that we make such drastic …

CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it’s called a pseudo element because it’s not actually selecting anything …

Today is America’s birthday and also (more importantly) the birthday of CSS-Tricks, which turns 3 today. If it was a human being, that means it would be starting to string together sentences of five words or more, socializing well with …

I first knew of Jeff through his website Perishable Press, which has long been a fantastic web design resource blog focusing on CSS, WordPress, and a lot of hard-to-find-elsewhere .htaccess stuff along with a good amount of Jeff’s personality …

If there is one (non-superpower) skill I wish I could acquire without having to spend thousands of hours practicing, it’s illustration. I took a bunch of drawing in college but I was never that great and I’ve let myself go …