Grow your CSS skills. Land your dream job.

Article Archives

Performance of CSS Selectors

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 …

August 10, 2010

Cross-Browser HTML5 Video and Audio

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 …

August 10, 2010

Linkage Returns

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 …

August 10, 201019 comments

Expanding Images using HTML5’s contenteditable tabindex

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 …

August 9, 201045 comments

Fix Inserted HTML5 Content with HTML5 innerShiv

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]>
August 5, 201044 comments

Inset Border Effect jQuery Plugin

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 …

August 3, 201057 comments

Guidelines for URI Design

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 …

August 2, 2010111 comments

Guest on jQuery Podcast

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 …

July 30, 20109 comments

CSS Run-in Display Value

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 …

July 29, 201041 comments

Interviewed on Unmatched Style Podcast

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 …

July 28, 201018 comments

Dude, you browse with JavaScript on?

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

July 26, 2010199 comments

Understanding border-image

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 …

July 21, 201033 comments

Local Previews of Images from File Inputs (fail)

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 …

July 19, 201023 comments

Textarea Tricks

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 …

July 16, 201088 comments

Tips for Web Design that Crosses Cultures

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 …

July 14, 201024 comments

Google Maps Slider

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 …

July 12, 201055 comments

The difference between ‘return false;’ and ‘e.preventDefault();’

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 …

July 8, 201038 comments

CSS Media Queries & Using Available Space

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 …

July 6, 201048 comments

CSS Content

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 …

July 5, 201079 comments

Happy Fourth!

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 …

July 4, 201046 comments

Five Questions with Jeff Starr

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 …

July 2, 201017 comments

Illustrators I Like

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 …

June 29, 201044 comments

New Poll: Action Verb Clarity

Let's say you were writing some text-only documentation describing how to do something on a website. The idea was that you came to a point where someone was presented with a list of users and their job was to select …

June 28, 201061 comments

Poll Results: How Many Websites Do You Launch Per Year?

  • 20+ (14%)
  • 10-20 (12%)
  • 5-10 (24%)
  • 2-4 (31%)
  • 1 (13%)
  • 0 (6%)

I'm probably in the 2-4 camp myself, which is the winning choice. I don't freelance, but I do do sites for family and friends once in a while. …

June 27, 201027 comments

On Boagworld

In more podcast news, I got to be on Boagworld as well! I was interviewed by Paul Boag himself in the final interview ever on Boagworld. Bittersweet, isn't it? We talk about CSS-Tricks, CSS3, Flash, and you know, just some …

June 23, 201012 comments

On WordPress Podcast

I got to be on the WordPress Podcast with Joost de Valk yesterday. It's already out and you go to the blog post (with player and show notes), or snag it from iTunes.

We had fun talking about Digging

June 23, 20106 comments

CSS for Blockin’ Stuff

I am not a big proponent of ad blockers. Besides than the fact that this site has ads on it, I generally just don't mind it. I am a big proponent of you doing whatever you want to on your

June 22, 201027 comments

Feature Table Design

I ran into the feature table design from Shopify over on Pattern Tap and I was like DAMN SHOPIFY, that is one sexy table. I was inspired to try and replicate it. First in Photoshop, then in HTML/CSS. Recreating cool …

June 21, 201034 comments

Should you use a template?

I absolutely think that beginner web designers should use templates. And by templates, I mean something that you might buy off ThemeForest or other template selling service. Here are a few reasons why:

  • Tweaking = learning. Templates need to be
June 18, 2010109 comments

Photography and CSS

It sure seems like a heck of a lot of web designers are also photographers, doesn't it? And by "photographer", I mean they own a DSLR and heavily consider aesthetics when taking a picture. Why the overlap of interests? Well …

June 16, 201054 comments

Yay for HSLa

Huge sogging longbottoms? High strength low alloy steel? NOPE, we're talking Hue Saturation Lightness (and alpha) and it's a way of declaring color in CSS. It looks like this:

#some-element { background-color: hsla(170, 50%, 45%, 1); }

It is similar …

June 15, 201041 comments

To Wufoo

When I decided to leave my last job, I decided I was going to leave at the beginning of the Summer. I was going to bum around the Summer not doing much, maybe even extend that for a whole year. …

June 14, 201079 comments

Ajax Image Uploading (With Less Suck)

This technology demo is courtesy of ZURB and the post was co-authored by ZURB and Chris.

How do you upload images now?

You select a file and click upload. Simple right? Except once you select your image you can no …

June 10, 201046 comments

Instant Productivity

All jobs are a series of tasks needing to be completed. Let's look at a construction worker. Today she needs to bust up a bunch of cement. Here is one path of action:

Put hardhat on
Start jackhammer
Bust up …

June 9, 201055 comments

NetNewsWire Theme: Fixed

I love me some Google Reader. I got all my feeds up in there and it's like having the longest most interesting newspaper ever. It brings me great pleasure to know that when people build all these RSS reading …

June 8, 201025 comments

Transparency in Web Design

How is it done? Let's take a gander at four different ways. Each of them handling the illusion in a different way, and each completely appropriate depending on the situation at hand.

Totally Friggin Fake It
From the Spectrum Theme
June 6, 201062 comments

CSS3 Button Maker

Drag things, pick colors, make a nice class for your buttons... introducing the Button Maker.


Boy, that's a nice button right there.

I'm saying "CSS3", because these make use of gradients, shadows, and rounded corners which contribute greatly to …

May 30, 201079 comments

New Poll: How many websites do you launch per year?

There is a new poll in the sidebar. RSS readers, you'll have to make the jump. The question is:

How many websites do you launch per year?

The idea is to gauge how many different projects you all are involved …

May 27, 201098 comments

Poll Results: Server side language of choice?

Over 18,500 people voted on this last poll, making it the most voted-upon poll in this site's history, when I asked:

What is your server-side language of choice?

Now I'm definitely a front end guy writing about mostly front end …

May 26, 201080 comments

Parallax Background of Stars (plus CSS3 keyframe animation)

This idea was originally published on 3/12/2008, where you had to resize the browser window to see the parallax. I updated it on 4/6/2009 to utilize jQuery to move the stars automatically. I'm now updating it again to use CSS3…
May 25, 201027 comments

Efficiently
Rendering CSS

I admittedly don't think about this idea very often... how efficient is the CSS that we write, in terms of how quickly the browser can render it?

This is definitely something that browser vendors care about (the faster pages load …

May 24, 2010112 comments

Google Font API & Interview

Google announced their new Font API yesterday, including a font directory and preview tool. They teamed up with TypeKit, to build and open source the WebFont Loader.

I quite like how they have done it. You just hotlink

May 20, 2010107 comments

RGBa Browser Support

This article was originally published on February 2, 2009 and is now being updated to clarify the concept and update the information for modern browsers.

RGBa is a way to declare a color in CSS that includes alpha transparency support. …

May 19, 201074 comments

We Love LOST

Tonight is the next-to-last episode ever of LOST. I've been a fan since the start, watching the released seasons several times with different friends over the years. Even powering through the Season 3 slump =). Just for fun, Richard and …

May 18, 201027 comments

Pointer Events & Disabling Current Page Links

It is a long-standing web design standard that the logo in the header area links to the homepage of the site. Another standard is that when displaying the navigation of a site, to highlight in some way the "current" page, …

May 17, 201066 comments

Circulate

I had the occasion come up recently where I needed to animate something in a circle. It never occurred to me until then that there wasn't an obvious solution to this already with jQuery. So I figured out a way, …

May 12, 201066 comments

Reduced Test Cases

If you are having trouble with something while building a webpage, the most helpful thing you can possibly do is start building a reduced test case. "Trouble" could be anything: the CSS isn't doing what you think it should, the …

May 11, 201025 comments

Specifics on CSS Specificity

This article was originally published on August 11, 2008. I am updating it now to fix some inaccuracies in how this concept was presented.

I've never specifically covered this subject before. (rimshot!)

The best way to explain it is to …

May 10, 201069 comments

Dynamic Page / Replacing Content

This article is an update to this old article, which had an ugly demo and a variety of techniques in it no longer probably considered good practices. This new demo is much cleaner, up to date, and fuller featured.…
May 7, 2010105 comments

Organic Tabs

This article was originally published on October 27, 2009 and is now being updated to 1) be turned into a jQuery plugin 2) have multiple demos on one page 3) utilize jQuery event delegation and 4) prevent animation queuing. Edited…
May 5, 201092 comments

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