Grow your CSS skills. Land your dream job.

Article Archives

SXSW 2012

I'm headed down to Austin in a few days here for my 2nd SXSW. Hope to see some of you folks there. I'm trying not too have much of a plan, but here's a few things I'm doing:

There is …

March 6, 20127 comments

ShopTalk Episode 8

This week Dave and I were joined by Christopher Schmitt, Chris Enns, and Dave McFarland, the fellas behind The Non-Breaking Space Show to do our second Cross-Over show. Brought to you by Hover and LessMoney.…

March 5, 2012

CSS Off Results

This year's CSS Off results are in. The Unmatched Style folks have listed out the top 25 entries and will be emailing everyone their results shortly. Congrats to all who entered. It was quite a load on all the judges …

February 29, 2012

Designing for Decoder Glasses, Print and Web

Michael Buchmiller of BlueHornet walks us through the process of designing a poster for tinted decoder glasses, and then bringing the same idea with a similar interaction to the web with the AnythingZoomer.
February 29, 201224 comments

Places It’s Tempting To Use Display: None; But Don’t

Help yourself be better at accessibility by using better hiding techniques that don't use display: none;. This involves some tricks like using more clever class names, being fancier with how you deal with JavaScript library animations, or avoiding hiding all together.
February 27, 201280 comments

Responsive Navigation Patterns

Brad Frost shows examples and covers the various techniques/pros/cons for handling navigation on small screens.…

February 25, 2012

Work for Treehouse

The main site sponsor around here, Treehouse, is hiring new teachers for creating new learning videos. It's not a job for just anybody. You need to know your stuff (PHP & WordPress, Front-End Design, Android, or Business & Marketing), be …

February 24, 2012

How To Create a Notebook Design with CSS

This tutorial, a guest post by young developer Allen Lawson, will show you how to create a notebook themed website using only CSS.
February 23, 201287 comments

My Slides from InControl 2012: What We Don’t Know

I know it's weird to go through slides of a presentation outside of the context of a real talk (and pales in comparison to the experience of being there) but nonetheless, there may be bits of goodness you can extract …

February 22, 201239 comments

I can’t design in the browser

Sarah Parmenter with some good honest thoughts about the popular idea of designing in the browser.

I’ve tried, goodness knows I’ve tried, but my designs end up suffering, looking boxy, bland and uninspiring.

Not that I'm that great of a …

February 22, 2012

ShopTalk Episode 6

This week Dave and I were joined by Zoey Gillenwater and we chat about print stylesheets, CSS formatting, icon fonts, spec mysteries, and much more.…

February 18, 2012

BarCamp Tour 2012

I'll be representin' Wufoo at a bunch of BarCamps again this year. Super fun. We need to figure out exactly what (U.S.) cities we are going to go to this year, so if you are organizing one, hit us up …

February 17, 2012

Things It Might Be Fun/Useful to Try the Universal (*) Selector On

What CSS properties might it make sense to apply to every single element on the page? We'll take a look at some that may (or may not) be a good idea.
February 15, 2012129 comments

ShopTalk Episode 5

Jeffrey Way, Dave and I talk shop about some newly released projects, -webkit-gate, and our weekly staple of Q&A.…

February 10, 2012

TL;DR on Vendor Prefix Drama

Quick overview of the hot drama regarding vendor prefixes.
February 10, 201251 comments

Musings on Preprocessing

I've been using SASS for pretty much everything I do recently. Here's some musings on the journey. From hold-ups, to trip-ups, to turn-offs. From apps and teams to workflows and syntax.

You Gotta Work Locally

The biggest contributor to me …

February 8, 2012100 comments

Speech Bubble Arrows that Inherit Parent Color

Interesting question:

css3 speech bubble question: for the "triangle"'s border color, how can I set it to whatever its parent div's bgcolor is automagically?

— Jin Yang (@jzy) February 1, 2012


By "css3 speech bubble", Jin means using a pseudo …

February 6, 201234 comments

A proposal to drop browser vendor prefixes

Interesting idea by Felipe G on using a new at-rule, @-vendor-unlock, to tell the browser to use it's experimental implementation of any particular property, rather than using a vendor prefix on that property. Unfortunately at this point, even if …

February 3, 2012

Digging Into WordPress 3.3

Digging Into WordPress (the book) is now updated to v3.3. Includes new chapters specially on what's new in 3.2 and 3.3, all the rest of the chapters tightened up and refreshed, better internal hyperlinking (in the PDF), and more. It's …

February 3, 2012

ShopTalk Episode 4

Dave, Jonathan Longnecker, Nate Croft and I talk shop. Topics include website building apps, where to start designing, when not to design for modern browsers, and more.

Sponsored by LessAccounting. …

February 2, 2012

New Poll: In The Next 10 Years, Will We See CSS Competitor?

What do you think folks? Is a new language going to come along in the next ten years that deals with layout / style / design and unseat CSS? Or at least give it a run for its money?

You …

February 2, 201293 comments

Star Ratings With Very Little CSS

Star ratings are one of those classic UX patterns that everyone has tinkered with at one time or another. I had an idea get the UX part of it done with very little code and no JavaScript.

The markup uses …

February 1, 201257 comments

Real-World CSS

A very serious not at all tongue-in-cheek gallery of CSS3 techniques that poo-poos the fancy in favor of the practical.…

February 1, 2012

Better Box Sizing

Paul Irish suggests the universal selector (*) to apply border-box box-sizing to every element. I've been wanting to try this forever because this box model is, in my opinion, just better. Imagine: elements with percentage widths and pixel padding without …

February 1, 2012

Firefox 10

...is now a stable release. It's notable because it's the first release with it's own built in developer tools (video overview). It's all HTML/CSS for now (not a Firebug replacement) but they are nicely designed and a great …

February 1, 2012

Poll Results: Internet Connection Speed

In this latest poll, I asked people to test their own internet connection speed then vote in the poll based on their result. The speed choices ranged from (what I would consider) blazingly fast, to mediocre, to nearly unusably …

January 31, 201236 comments

Twitter Bootstrap 2.0

If your web app doesn't look or work as well as Bootstrap does out of the box, it's time to have a pretty serious discussion with your team about why.…

January 31, 2012

1000px Grid for Responsive Web Design

To figure out your grid width percentages for a fluid design, you start with a fixed design and divide the column widths by the container width. Elliot Jay Stocks calls for us to stop the self-torture and use 1000px for …

January 30, 2012

Pictos Server

I've long been convinced icon fonts are awesome. Now Drew Wilson's new service (and article I'm linking to) put to rest any of the last possible arguments against them. Think they use unsemnatic markup? Apply them via pseudo element. …

January 29, 2012

Responsive Design Testing Bookmarklet

Bookmarklet by Benjamin Keen which automates an idea by Lennart Schoors where the current page is loaded into a bunch of differently sized iframes, so when working on a large monitor, you can see what a design looks like at …

January 29, 2012

ShopTalk Episode 3

Where Dave and I are joined by Chris Eppstein. Sponsored by LessAccounting and United Pixelworkers (who are offering a 10% discount on shirts with coupon code "shoptalk").…

January 26, 2012

Animate to an Inline Style

You already know that inline styles are "bad practice." Inline styles aren't reusable like CSS in separate files is, and thus, inefficient bloat. Unless of course, when it isn't. There are some instances where inline styles make perfect sense. Perhaps …

January 26, 201235 comments

Custom Fonts in Emails

A reader writes in:

Would it be possible to draw an entire typeface in CSS to be sent in emails? Our company needs to send out emails to about 20k people to introduce a new brand that we are launching. …

January 25, 201245 comments

Burst Title

During the previews for a movie I saw recently, there was an advertisement for an Oprah-related something or another. I wasn't paying attention because I was trying to get out my phone so I could snap a picture of it. …

January 19, 201237 comments

CSS1k

Back in the day, the CSS Zen Garden was a place to showcase the power of CSS. A single page was redesigned in vastly different ways with no change to the HTML. The CSS1k project (head up by Jacob Rask) …

January 18, 2012

ShopTalk Episode 2

In which we talk shop with guest Paul Irish. Sponsored by LessAccounting. …

January 18, 2012

SpriteRight Giveaway

There is a new Mac app called SpriteRight for doing CSS sprites that is pretty darn nice. I'm a fan of both SpriteCow (beautiful interface, design your own sprite) and SpriteMe (automatic combining of sprites, gives you real CSS). I …

January 17, 201243 comments

YouTube Popup Buttons

There is a certain style of button on the latest YouTube design (most easily found in the footer) where the default state of the button has a very subtle bevel to it, but on :hover and :focus states the button …

January 14, 201239 comments

Shop Talk Episode 1

The inaugural episode of Shop Talk where Dave and I are joined by Jonathan Snook and we answer a bunch of listener questions. Sorry about the sniffles and other rough edges, we'll get better as we go. Sponsored by LessAccounting

January 12, 2012

Troubles with HTML5 <audio>

  1. Microsoft funds Pixel Lab to make an HTML5 version of Cut The Rope originally by ZeptoLab.
  2. Nerds call it out for using some Flash.
  3. Robby Ingebretsen writes really interesting article explaining why.
January 12, 2012

Responsive Data Table Roundup

There has been a bunch of takes on responsive data tables since I first published about it.


View Demo

The idea of the original was to abandon the grid layout of the table and make each cell its own …

January 11, 201239 comments

PROTECT IP / SOPA Act Breaks the Internet

Here's a good video to watch explaining the huge problems that could come from PIPA (right on a page where you can do something about it). You've probably heard of SOPA. PIPA is the new SOPA.…

January 10, 2012

(Better) Tabs with Round Out Borders

A good-looking tab control usually has one feature that I've always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create this effect without using images.
January 10, 2012100 comments

ShopTalk

New thing! Dave Rupert and I are going to be doing a podcast called ShopTalk (@ShopTalkShow).

It's going to be a weekly show on (mostly) Thursdays at 10am Pacific / 1pm Eastern. Variations to that will be noted …

January 9, 201223 comments

Upcoming Speaking

My first half of 2012 is sprinkled with some web conferences I'm very much looking forward to.

February 20-21, Orlando, Florida - InControl

March 9-13, Austin, Texas - SXSW Interactive

April 26-27, Warsaw, Poland - Front-Trends

April

January 4, 201222 comments

CSS Profiling and Optimization

Just as I got done saying how I hope we can soon stop talking about CSS selector performance, Juriy Zaytsev publishes some great research on selector performance using Opera and WebKit's new "style profiler" as part of the dev tools. …

January 4, 2012

Looking to Hire Someone for Web Work?

The very first thing you should do is start writing. Just open a text file and define exactly who your ideal hire is. What they are like, what they hopefully know, what you'll need from them, and what you can …

January 3, 201219 comments

HTML5 Progress Bars

Comprehensive research by Zoltan Hawryluk on the <progress> element. Screenshots of default styling across different browsers, overriding that default styling, shadow dom, polyfills, states, and fancy replacement tricks.…

January 3, 2012

WebKit Selector Performance Changes

Nicole Sullivan covers some of Antti Koivisto's work on making CSS selectors faster in WebKit. Clever stuff, which Nicole helps make understandable for all of us. Mostly stuff that helps the browser "rule out" selectors more quickly. I hope other …

December 31, 2011

Responsive Multi Column Data Tables

Maggie Costello Wachs from Filament Group shares the best approach to responsive data tables I've seen yet. Remember the problem: exploring a large data table on small screen devices means a bunch of horizontal and vertical scrolling, which sucks. Her …

December 30, 2011

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