Grow your CSS skills. Land your dream job.

Article Archives

CSS3 Finalize

jQuery plugin from Han Lin Yap which allows you to write CSS3 without vendor prefixes. This plugin will read through your CSS files and in-document <style> blocks, find the CSS3 stuff, then append a new <style> block to your …

CSS Gradients for IE9

This article by Robert Biggs goes into a solution for using SVG for gradients in Internet Explorer 9, because it doesn't support CSS3 gradients. The core benefit being that the SVG image format is XML and actually rather similar in …

69 comments

Breadcrumb Navigation with CSS Triangles

Did you know you can make triangles with pure CSS? It's pretty easy. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. They …

41 comments

Happy Halloween

HTML, CSS, and JavaScript got invited to a halloween party. They decided they would all dress up as each other!

HTML went as JavaScript:

<div id="pumpkin" onclick="alert('Boo!');"></div>

JavaScript went as CSS:

var jackolantern = document.getElementById('pumpkin'); jackolantern.style.color = "orange"; jackolantern.style.backgroundColor =

Rotating Molecules with 3D Transforms

Click-and-drag to rotate these complex objects through a pseudo three dimensional space. It's a familiar design pattern, but one that is particularly difficult to pull off. No Flash, not even canvas. Just some fancy JavaScript and CSS (WebKit 3D Transforms). …

48 comments

So You Need To Fill a Dropdown Dynamically

You have one dropdown menu, and depending on the user's choice in that one, a second dropdown gets filled with choices. Let's cover three different ways you can go about that.…

52 comments

Commas Before

Marc Grabanski brought up and interesting idea on Twitter yesterday.

Commas before or after the line on json objects and multi var definitions?…

109 comments

Garage Door Style Menu

Originally published on July 21, 2008 as only a jQuery technique. Now updated to include CSS3 and a combo technique which is mo' betta.

A garage door style menu is where an image (the "door") slides up to reveal something …

72 comments

Parent Selectors in CSS

Let's be clear here, just in case someone is finding this from a search engine: there are no parent selectors in CSS, not even in CSS3. It is an interesting topic to talk about though, and some fresh talk …

Formalize CSS

Framework by Nathan Smith for nice looking, HTML5 ready, progressively enhanced, cross-browser forms.…

41 comments

Fluid Width Equal Height Columns

Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element. But if one or more columns need …

181 comments

New Poll: Is Your Degree Related To Your Job?

The full question is:

If you have a degree from college and have a job, is that degree related to your current job?

It's pretty common to hear about folks who have made their way into the web worker world …

Boilerplate CSS3 Media Queries

A collection of media queries from Andy Clarke to get you started building responsive sites. Responsive is the new word for sites that react to the space they have available to restyle their content the best they can in that …

Digging Into WordPress v3 – Back in Print

Version three of my book, co-authored by Jeff Starr, has been revised from cover to cover ensuring everything is up to date and featuring a new chapter on WordPress 3. Now the print version is back in limited quantity sporting …

30 comments

Poll Results: Multiple JavaScript Libraries

The question was:

Do you ever use two JavaScript libraries on the same page?

My thinking in creating this poll was around two ideas:

  1. An excuse to educate people that using multiple libraries on the same page is generally a

WebP Image Format

Google has released a new image compression format called WebP (pronounced "weppy"). It is for photographic style images (like JPG) and also lossy (like JPG). Their example gallery has side by side comparisons where the WebP version is equal to …

40 comments

Drawing Table

I made a thing, in which you can use your mouse cursor to draw on a grid with different colors. You can then copy-and-paste the HTML from the design you made.…

Promote JS

Finding correct, current, and well written documentation on JavaScript can sometimes be rather difficult. The web has a lot of misinformation on it (can you believe it?!). This is an attempt to get Mozilla's high quality documentation at the top …

Dealing with Content Scrapers

Jeff Starr's response to my article on doing nothing about content scrapers. Among other ideas:

Sprinkling a few internal links throughout your posts benefits you in some fantastic ways: Provides links back to your site from stolen/scraped content, helps your …

Vendor Prefix Equivalents

Ever wonder what the Gecko equivalent to WebKit's -webkit-transition-timing-function is? This chart has got you covered. But more importantly, if the other rendering engines have those properties implemented at all.…

jQuery Summit

I'm speaking at the jQuery Summit, the 2nd Annual Online, Live jQuery Conference November 16 & 17th, 2010.

If you are interested, use coupon code JQUERY2CHRIS for 20% off!…

ProCSSor

The prettiest of the CSS prettifiers. I find these things quite helpful when I'm inheriting someone else's CSS and I want to get it into the format that I like the most without doing it by hand. Actually, I usually …

WebKit Native Asynchronous Script Loading

WebKit nightlies are now supporting this. The syntax looks like this:

<script async src="myAsyncScript.js" onload="myInit()"></script> <script defer src="myDeferScript.js" onload="myInit()"></script>

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to …

40 comments

Blockquote Bulge

In HTML, a block of text being quoted from elsewhere is marked up like this:

<blockquote>Hey, I'm a block of text from elsewhere.</blockquote>

In your CSS, you'll likely have special styling for these. Perhaps a bit of a background and …

248 comments

Group Design Project: List with Functions

Hey folks, let's design something together! I think it will be interesting and fun to try and tackle a simple design pattern as a group.

The Premise

The design pattern we are going to tackle is a list with functions

58 comments

Transparent Borders with background-clip

Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don't think Facebook sports the look anymore, but it's still rather neat.

You …

32 comments

Tuts+ Marketplace

You already know that Envato runs marketplace sites like ThemeForest, GraphicRiver, and CodeCanyon that help designers and developers get a jumpstart on projects through buying themes, graphics, and code to help out. You also already know that Envato runs tutorial …

HTML5 Pack for Illustrator CS5

Via Real World Illustrator:

You can designate certain attributes (i.e., fill, stroke, opacity) as variables right from the Appearance panel in Illustrator. When saved as SVG, developers can easily change the variable definition to "reskin" or modify the art…

Need a Font Identified?

Stephen Coles of Typographica has a new Twitter account:

Rapid, human, independent type research. Send an image, get the font name and link. Alternatives too.

WhatTheFont! is cool, but you can't beat professional human identification. Like the story of John …

38 comments

Adding Stroke to Web Text

Fonts on the web are essentially vector based graphics. That's why you can display them at 12px or 120px and they remain crisp and relatively sharp-edged. Vector means that their shape is determined by points and mathematics to describe the …

59 comments

Box Sizing

The "box model" in CSS works like this:

width + padding + border = actual visible/rendered width of box
height + padding + border = actual visible/rendered height of box

It's a little weird, but you get used to it. …

Missing Documentation for matrix3d Transforms

Documentation from Sebastian Deutsch on using -webkit-transform with matrix3d, which is rather complicated but can do cool stuff. Also, he used CoffeeScript for the demo (first I'm hearing of it) which looks kinda like SASS for JavaScript.…

49 comments

Ordering CSS3 Properties

When writing CSS3 properties, the modern wisdom is to list the "real" property last and the vendor prefixes first:…

41 comments

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 …

BonBon Buttons

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 …

33 comments

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.

Update: WebKit…

More on CSS Selector Performance

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 …

52 comments

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 …

50 comments

WebKit HTML5 Search Inputs

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 …

Stylebot

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 …

.net Magazine Awards

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

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