The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Article Archives

Outer Border Radius Tabs

Imagine a real-life tabbed folder. The tabs on those aren't only rounded at the top of the tab, but they also connected to the folder with a rounded edge. Top corners, easy, just border-radius. Bottom corners, not so easy. Steve Smith has a published a neat technique utilizing pseudo elements to do it.

I tackled this same exact idea that I'm using for some upcoming talks and this is how I did it.…

Border Radius on Images

If you ever tried to use border-radius on <img>'s, you know that it doesn't always work (even if the browser supports that CSS3 property, like Firefox 3 and Opera 11). The root of it is that the image is content, not a container, and the container is what gets rounded with border-radius. Jonathan Neal has a demo to make this work. Essentially it sets the background of the image element to itself, and then changes the src of …


Browser Support for :before/:after Pseudo Elements

The exact (pretty much) browser support levels for these style of pseudo elements. It's pretty darn deep, folks, and you can do really cool things with them while keeping your markup clean.

Font Sizing with REM

One of the problems with using "em" as font sizes is that they cascade, so you are forever writing rules that select nested elements to reset them back to 1em; CSS3 now has rem ("root em") to prevent that issue. Just declare a px fallback and you can use it today. Snook shows us they way.…


Custom Scrollbars in WebKit

You can customize scrollbars in WebKit browsers. Here's the CSS you need to know about to get it done, with examples.

Responsive Data Tables

Tables of data can only squish horizontally so far, so they can be a pain to browse on small screens (like mobile devices) where you may need to scroll both horizontally and vertically to browse the information at readable text sizes. We'll explore a CSS-based possible-solution to this issue.

New Poll: Working Environment

The new poll (in the sidebar) asks:

In what environment do you primarily work?

I've worked from home for a lot of years but that will soon be changing. I'm interested to know the environment readers of this site work in.

If you don't work at the moment, there is an option for that. If you are a student, there are options for that. If you are a student that works, vote based on the working part. …

CSS Gradients from Image

Nicole Sullivan thinks "wouldn't it be a nice if there was a tool to convert an image of a gradient into CSS code?" The community responds with some newly-created tools to do just that. I couldn't get either of the non-command-line tools to do a multi-stop gradient, but they are only a few days old.…

CSS Stress Testing

Bookmarklet from Andy Edinborough which analyzes your page by removing class names one by one from all elements and testing the pages scroll performance. In other words, if you are having trouble scrolling a page and suspect it's fancy CSS3 stuff slowing down the party, this bookmarklet may help you track down exactly what it is.…


Poll Results for Conditional Comments

How did people respond when asked if they wanted the power to serve content conditionally to any browser? The results are pretty interesting...

Fun With Blurred Text

We'll cover how to blur text with CSS3 and do it safely by feature-detecting first. Then we'll do a bunch of experiments with individual letter blurring and also some clever jQuery which gives us deeper access into specific values of a text-shadow.


Trent Walton designs a website then codes it up two ways: new school CSS3, and old school image slicing with no CSS3. Going new school meant 1) he could do it faster 2) the page size was smaller 3) less HTTP requests needed and 4) it's easier to update. Not that you all need convincing around here.…

Micro Clearfix

Nicolas Gallagher challenges some old assumptions about what's needed to make the pseudo element style "clearfix" work. …


Faking ‘float: center’ with Pseudo Elements

Using a couple of floated pseudo elements on the elements containing columns of text, we can knock out a part in the middle making it look like text is wrapping around an image both directions.

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


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.

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…

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 never talked about live before. Specifically, pseudo elements.…


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


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.

WhatFont Bookmarklet

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

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


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

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.


Super hot color gradient glowing action by Kayla Rose.…

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


Get a gridded up background-image on-the-fly.

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 it using the standard HTML5 structure for an image with a caption, and CSS3 it up.…


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 someone elses that you really liked and wanted to make it persist, you could use this Chrome extension.

I'm posting this as an article instead of a link so we get the comment thread thing going if anyone has …


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.

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 far as these things go.…


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 an animation. One way to do that would be to have an animation which changes the opacity on 0% and 100% and then set the iteration-count to have it run a couple of times. But you can accomplish the same …

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 and I missed it. Oh well, it is now and it's awesome.…

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


IEMobile Conditional Comment

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


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 friends-of-friends, but this year it's opening up to the public. It's like a very casual three day camping party. Live music (my old Irish band is getting back together and playing), outdoor games like bocce and cornhole (one year they …


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 comments for all browsers?…



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 actually has some browser support now that has a CSS variable feel to it, and that's the currentColor value. …


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

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, ultra comprehensive, and practical. Between Kevin's ability to give super engaging presentations and my ability to make fart jokes (and the ridiculous amount of research I've done on this), it should be hopefully be a good one. Tuesday March 15, …


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 happen in the article.

I'm down with that. Works in all modern browsers and IE 8 plus.

I disagree on this though:

I’ve seen people saying that using these CSS properties to create “CSS tables” is no better than using …

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed