Grow your CSS skills. Land your dream job.

Article Archives

CSS Gradient Patterns Gallery

Gradient wizard Lea Verou compiles all her crazy I-didn't-know-that-was-possible patterns into one library with easy to snag code samples. Make sure to click the patterns for full screen view.…

April 15, 2011

Value Bubbles for Range Inputs

HTML5 range inputs, in supported browsers and by design, don't show the user the actual value they are submitting. If you want to use the cool slider, but show the value, you'll have to do that yourself. Here we use the output element and jQuery to show the current value in a bubble that hovers above the range input.
April 13, 201116 comments

IE 10

Right on the heels of IE 9's release, there is already a platform preview for IE 10 (video).

Awesome: Flexbox, Grid, Multi-column, Gradients, (and soon), Transitions and 3D Transforms

Not awesome: No text shadow, No HTML5 Forms support…

April 12, 2011

Front End Design Conference

July 22, 2011 - St. Petersburg, Florida. This is the third year going. Two years ago, I spoke at the first one which was my first "real" speaking gig ever. This year I'll be talking CSS, which, strangely enough, I've …

April 12, 2011

:any()

Marco Kuiper with some real world examples of how the :any() selector (already live in Firefox 4 and WebKit nightlies) can clean up otherwise clunky selectors. …

April 11, 2011

Play Sound on :hover

Use JavaScript to trigger the playing of a sound (an HTML5 audio element). A couple of ways to do it are presented here, along with a few gotchas to watch for.
April 11, 201148 comments

WhatFont Bookmarklet

  1. Oooh that's a nice looking font!
  2. Click bookmarklet
  3. Hover over font
  4. Font name knowledge acquired.
April 9, 2011

The Cicada Principle

So there is this bug... also prime numbers... and... just read it it's really neat and has practical web design implications. …

April 7, 2011

What if there was no position: static;?

A fun thinking exercise for CSS nerds! What if all elements defaulted to relative positioning instead? What are the advantages, disadvantages, and caveats to consider...
April 5, 201136 comments

Reveal a Background Image upon Text Selection

Highlight text, reveal an actual image beneath! Not possible with the text selection pseudo class, but is possible by wrapping selected text in spans via an open source JavaScript library and adding the background image to that.
April 4, 201125 comments

Glowform

Super hot color gradient glowing action by Kayla Rose.…

April 2, 2011

Absolutely Positioned Textareas

Snook reminds us we can set the top/left (or bottom/right) when absolutely positioning textareas, but not all four values (which cannot out-force the width/height). …

April 1, 2011

Griddle

Get a gridded up background-image on-the-fly.
April 1, 2011

Slide In Image Captions

Reader Jason Lucchesi send me in a neat demo of image captions sliding in overtop an image on rollover. The effect used a bunch of nested divs to get it done, so I thought I'd do my own version of …

March 29, 201161 comments

New text-align Value

You can align text to the left, right, or centaur.…

March 28, 2011

CSS Pivot

CSS Pivot allows you to apply your own CSS to a site and then share the results (you get a unique URL which opens up that site in a top-bar/iframe dealy). Pretty clever stuff. If you saw a tweak of …

March 27, 201141 comments

Hover on “Everything But”

Hover states are easy, but what if you want to apply a hover state to every element besides the one you are hovering over? We can do it with a little trickery.
March 23, 201158 comments

Converge SE 2011

June 24-25, 2011 in Columbia, South Carolina. It was awesome last year and this year should be ever better as it's at a nicer venue and I'll be speaking at it! $150 bucks for both days = super affordable as …

March 22, 2011

How to Avoid Common CSS3 Mistakes

Article I wrote for the new online version of .net magazine.…

March 22, 2011

Comma Separated WebKit Animation Keyframes

Another little thing I learned from Estelle at the SXSW 2011 CSS3: Beyond The Basics panel was that you can comma separate the keyframe values in a WebKit animation declaration. Let's say you wanted to create a pulsing effect as …

March 22, 20116 comments

ZEN Audio Player

Really cool audio player by simurai using HTML5 <audio, jPlayer (jQuery plugin), and CSS3 for the fancy animations. This made the rounds a few months back but I decided to wait until it was on GitHub, which then happened …

March 21, 2011

Get Your CSS Easing Code Here

A code generation and visualization tool by Matthew Lein for CSS3 transition timing functions. Biggest triumph? Making cubic bezier understandable. …

March 21, 2011

The Current State of HTML5 Forms

By me!

If you see any mistakes or missing info, please report it. We want to make this as accurate and comprehensive as possible.…

March 21, 2011

IEMobile Conditional Comment

Heads up: there is a conditional comment for targeting Internet Explorer on Windows Phone 7 mobile devices. Plus, other random thoughts.
March 21, 201132 comments

Crivestivus

This has almost nothing to do with web design, but I want to help promote an event going on in Northern Wisconsin put on by some friends of mine: Crivestivus.

They used to hold it just for friends and …

March 19, 20117 comments

New Poll: Conditional Tags for All Browsers

There is a very low chance this would ever happen, and as far as I know nobody is talking about it seriously. I think it might make for an interesting discussion and poll though:

Do you wish there was conditional …

March 18, 201194 comments

currentColor

CSS variables are always a hot topic when "the future of CSS" is discussed. They are actually coming natively, but using them in production (without a CSS preprocessor framework) is a long way off. However there is a feature that …

March 17, 201118 comments

Google Map as a Background

Cool idea and execution by Wade Hammess.…

March 15, 2011

Progressively Enhancing HTML5 Forms

This is what I'm thinking is the best current way to progressively enhance forms. That is, use HTML5 features when they are available and fall back to JavaScript alternatives when they are not.

Load up Yepnope.js <script src="scripts/yepnope.js"></script>

Yepnope is …

March 13, 201149 comments

SXSW + HTML5 Forms

If you are at SXSW, Kevin Hale and I are talking about HTML5 forms and using them to improve lead generation (and generally how to make your forms better). It's a 2.5 hour workshop which we intend to be fun, …

March 11, 2011

Wolf in Sheep’s Clothing

Roger Johansson has a neat quick-tip style article on centering page content both vertically and horizontally by making the html element display: table; and the body element display: table-cell; with vertical-align: middle;. See the full code to make it …

March 10, 201141 comments

Styling Texty Inputs Only

A CSS3 technique for selecting only texty inputs, without the burdon of listing every single attribute selector for every single new HTML5 input type. Plus alternates.
March 8, 201159 comments

What We Learned Publishing Digging Into WordPress

Long writeup about the experience Jeff Starr and I had self publishing our book.…

March 8, 2011

Method & Craft

New must-subscribe-to site. Under the hood: curiously not HTML5. Almost feels rare these days. …

March 7, 2011

Open Source Ampersands

Little download packages by Mark Pilgrim that contain @font-face files that are super tiny because they contain just a single character: the ampersand. They come with an HTML demo so using them is an easy copy-and-paste job.…

March 7, 2011

It’s The Final Countdown

Microsoft themselves is tracking and promoting the demise of IE 6. China? 34.5%? Seriously?

And I can't help but hum a little Europe:

We're leaving together
But still it's farewell
And maybe we'll come back
To earth, who can tell?…

March 4, 2011

More Generated Content Tricks

Trevor Davis from Viget Labs with some clever and real-world implementations of pseudo elements.

There is so much to talk about with these pseudo elements it's crazy. I'm speaking at a few conferences coming up and I'm putting together a …

March 3, 2011

Quick Thoughts on Sharing Buttons

Randomly this week, I've had more-than-normal number of comments from folks who ask me something like:

Went to go tweet/share a blog post of yours, and noticed you don't have any of those on your site. Interesting, any reason why?…

March 3, 2011102 comments

Show and Edit Style Element

Kind of a classic little trick for ya'll today. You know the <style> blocks you can put in the <head> of your HTML to do styling? You don't actually have to put those in your head, they can be anywhere …

March 2, 201157 comments

Sans-Serif

Declaring just 'sans-serif' as the font-family means you'll get Helvetica on Mac, Arial on PC, and still have the good generic keyword fallback.
February 28, 201154 comments

Generated Background Noise

jQuery plugin by Daniel Rapp to fill any element with background noise. Uses <canvas> to create, then turns it into an image and sets a repeating background-image. Even if you'd be against using this on a production site, it's …

February 27, 2011

Stacking Order of Multiple Backgrounds

Multiple background images is a cool feature of CSS3. The syntax is easy, you just comma separate them. I find it's easiest/best to use the background shorthand property so you can declare the position and repeating and whatnot and keep …

February 25, 201134 comments

CSS3 Progress Bars

Just a fun experiment creating progress bars made with just CSS3 (no images). Loads of progressive nerdery packed into one little element.
February 24, 201147 comments

Bokeh with CSS3 Gradients

Bokuh is the effect of backgrounds in photographs with deep depth of field. Shapes round out and get blurry. Think of a really out of focus picture of a lighted Christmas tree. Divya Manian creates that effect in WebKit by …

February 24, 2011

I found it!

Funny article from Thierry Koblentz on CSS selector efficiency. Although there are cases where multiple ID selectors are needed, a selector like #nav li ul li a#active is almost certainly too heavy and inefficient. …

February 21, 2011

Letter Flipper

Randomly, I made a letter flipper thingy the other day. I saw a similiarish effect on a Flash site and tried doing it with JavaScript instead. You can view source on that page to see the simple code. It's just …

February 20, 201126 comments

Poll Results: HTML5 Features in Use on Production Sites

As a follow up to asking people if they are using HTML5 or not, I asked the people who are:

What features of HTML5 have you used on production sites?

These are the levels of popularity, from almost 3,000 …

February 17, 201131 comments

How Should We Calibrate Monitors for the Web?

When designing for print, having a properly calibrated monitor makes all the sense in the world. If done perfectly, what you see on the monitor should look like what you get on paper from a printer. No surprises.

When designing …

February 15, 201176 comments

Fade Image Into Another (within a Sprite)

Creating an image rollover is pretty easy with CSS. Give the element a background-image, then on it's :hover, change the background-image. It's best practice to combine both images into one and shift the background-position rather than use two …

February 14, 201144 comments

The Bright (Near) Future of CSS

Just in case anyone doesn't read Smashing Magazine, Eric Meyer has a long excerpt from his latest CSS book here which is loaded with good stuff. I particularly liked the bit about clearing :nth-child elements combined with media queries.…

February 11, 2011

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