Article Archives

Sprites and Retina Displays

CSS sprites are often used for small icons. That is exactly what looks bad on retina displays. Maykel Loomans has a way to deal with that that doesn't make our CSS twice as complicated: 1) Make sprite exactly twice as big 2) Swap out background in media query 3) Shrink background-size in half so coordinates are still correct.

Judging CSS / Spotting Bad Code

In a recent Q&A article on Smashing Magazine, a question was asked about how to tell if a developer has written bad CSS. Specifically:

What are the signs that the CSS is sub-optimal, or that the developer hasn’t done a good job? What do you look for in CSS to determine how good or bad it is?

I thought that was an interesting question and I'd expound upon my answer a bit.


UI Pattern Ideas: Email Settings

Last week I asked people to participate in some group design thinking around a specific design pattern: email settings. This was the premise:

Imagine there are three events that can happen in a web app that could trigger an email. We want to allow the user to decide whether or not they receive emails when those events happen.

I looked through all the responses and these are the ones I thought were the most interesting and effective. (more…)

Beefing Up Dull Text in WebKit

While doing a bit of cross-browser poking around on CodePen, I noticed that the font for the code editors was notably duller and weaker in WebKit browsers (Safari and Chrome) than it was in Firefox or Opera. I quite like Chrome and it was sad to me knowing that I would be spending a lot of time looking at inferior looking text, so I set about looking for solutions.


Set Text on a Circle

There isn't any super simple standardized way to set web type on a circle (or any kind of curve). But it can be done! We'll explore one way to do it here. But be forewarned, we're going to use some CSS3 and JavaScript and not give two hoots about older browsers that don't support some of the required tech. If you're interested in this for a real project, this kind of thing is probably still best served by and image with proper alt text, or proper feature detection which can flip out the image for this fancy technique in browsers that can handle it.


Kickstarter Funding Closing

As I type, 36 hours left on the Kickstarter project for redesigning this website. Backing the project will get you the least expensive access ever offered to the video library of it all.

Reader Survey

I'd love to gather some statistical data from ya'll if you have a few seconds. It will help with the big redesign.

Podcasts I Like

I do this podcast called ShopTalk Show with Dave Rupert. If you like this blog you'll probably like that show. We bring on guests but it's mostly a listener Q&A show. I've had a few folks ask me what podcasts I listen to, so I thought I'd make a list and attempt to keep it updated.


CSS Regions and Shadow DOM

One of my issues with CSS regions (we explored them a bit here) was the use of empty container divs for layout options. Razvan Caliman talks about fixing that by building out your own Shadow DOM tree. Clever, cutting edge stuff. You can see it work in Chrome Canary.

Transition Delay Delays

A while ago we covered a cool "hover" technique by Doug Neiner where an informational popup was displayed when you hovered over a picture. The first time you hovered over, there was a delay. This was to prevent accidental or fly-by mouse overs, as opposed to intentionally focusing on a particular picture. Subsequent hovers showed the popup immediately. The idea being that you're already in that exploratory mode.

Doug used jQuery for the animations and some fancy dancing to keep track of the hover state and how it should be behaving. Let's do it a bit of a different way using CSS transitions with delays, and then just a touch of jQuery to keep track of the state.



A collection of tools by Filament Group to assist with building cross-device websites. For example AjaxInclude which provides a pattern for including non-essential bits of content when the conditions are right.

Move Website Hosting with MediaTemple SiteMover

CSS-Tricks has always been hosted on MediaTemple. It started out on their inexpensive grid service (gs). In all honesty, I was never a huge fan of (gs). It eventually outgrew (gs) and I moved it to their dedicated virtual (dv) service and I've had very few issues in the many years it has been there. Nothing major and nothing they couldn't quickly resolve. They have pretty great customer service, including paying attention on Twitter (all too rare).

MediaTemple is now declaring EOL (End of Life) for the 3.0 and 3.5 versions of the (dv) service. Their main reasoning is that the installed version of Plesk, the server management software on those servers, is also being EOL'd by the company that makes it. I'm not sure why Plesk can't be upgraded, but nonetheless, I've been wanting to move everything to a 4.0 (dv) because they are more badass anyway. They are more upgradable, faster in general, running newer software, and, you know, not going away.

Dreading the Move

I have 20ish sites between two (dv)'s. My process would likely be:

  1. I'd use FTP to download all the files from each of the sites (I don't yet have every single site on my servers with complete version control).
  2. Re-upload them to the new server. That would probably mess with a bunch of file permissions and be slow as dirt.
  3. Google for the 100th time the exact terminal commands to export a database as a mySQL file (30-40 of those).
  4. Log in via Plesk again and use the file browser thing to download those files.
  5. Upload them to the new server and figure out the commands to make new databases and import the data. During that process I'd probably screw up character encodings or something else weird and crazy that's never happened to me before.
  6. Switch the DNS to point at the new server. But first I'd forget to set the "time to live" on the DNS to a short period, so when it screwed up and I had to re-point back at the old site, it would take 24 hours each time.
  7. Go insane.

I know just enough about server stuff to get it done, but I'd probably go completely gray and be a generally unlikeable person for a week.

So instead...

I noticed MediaTemple starting to offer a SiteMover service. For $150 per site, they'll move it. Of course they will move it from some MediaTemple hosting to different MediaTemple hosting, but they will also do it from other hosting services or even away from MediaTemple.

I totally jumped on this. I would way rather spend my time working on all the other fun and important projects I have going on right now than spend time moving sites.

Full disclosure: MediaTemple hooks me up with free hosting as they do many other web design-y sites. I do see this post as a thank you for that, but I absolutely wouldn't do it if I thought their hosting or support sucked.

My experience

My experience with SiteMover was fantastic. I did, as you would expect, almost no work at all. I'd say it took them about 3-4 hours to move the 5 or so sites I have on the CSS-Tricks (dv). There were a couple of minor things we needed to fix (e.g. ensure WordPress media uploader worked), which they did readily. They even helped re-install some third-party server level software that I never would have been able to figure out.

My only gripe was that they probably should have been more clear about the data transfer timing. They did warn me not to post any new posts, but I didn't think about the forums. I think we lost about and hour or two of new forums posts, which is a bummer, but not a disaster. We may have lost a couple of blog comments as well, not quite sure. We would have been better suited tossing up a quick "down for maintenance" page across the site and then yanking it down after the transfer was done.


They can move your domain as well, which can be just as this.

I should also say, if you decide to go with MediaTemple hosting, the coupon code csstricks20 gets you 20% off the monthly cost. Coupon no longer valid.

CodePen Beta

More big news this week: We've launched CodePen into a public beta! It's a site for building stuff from HTML, CSS and JavaScript. Perhaps for yourself to remember later, perhaps to suss out a bug or make a reduced test case, or to show off some cool idea you have. It's all about education and inspiration.


Screencasting a Complete Redesign (Get Access on Kickstarter!)

Hey folks, I got some big news. Part of me going off on my own is that I plan to work harder on CSS-Tricks. Part of that is doing the biggest and best redesign ever. So I figured, why do all that in a cave? Instead, I'll screencast every last bit of it and make it available to you. It will be available in a private access area that you can get access to by backing the project on Kickstarter.


ShopTalk Episode 21

This week Dave and I were joined by Nicole Sullivan where we talk trolls, OOCSS, tools, and more. Thanks to the CSS Summit for sponsoring (of which all three of us will be presenting).

Notes to an Agency Starting Their First Responsive Web Project

This past week I talked with a design agency who was about to embark upon their first responsive web design project. It sounded rather app-like. They were interested in hearing about my experiences, what to expect, what the process is like or could be like, what the deliverables should be, things to watch out for, and things like that.

This is what we talked about:


First Sighting: CSS Variables

The very first native browser implementation of CSS variables are here. Stoyan Stefanov shows them off. It will be a long while until we can use them in production but hey, onward and upward!

Crafting Minimal Circular 3D Buttons with CSS

The following post is written by Brandon Pierce. Brandon saw some nicely designed buttons by Wouter on Dribbble and set about building them with CSS. They came out nicely and he agreed to post about the process here.

Here's what we are going to make in this tutorial:

View Demo   Download Files

The Base HTML

We will be using a simple unordered list1 within a <nav> tag to create our buttons.

  <ul class="nav">
    <li><a href="#" class="icon-home"></a></li>

    <li><a href="#" class="icon-cog"></a></li>

    <li><a href="#" class="icon-cw"></a></li>

    <li><a href="#" class="icon-location"></a></li>



Some Resources

  • These icons in the buttons come from the Fontello icon font and web app.
  • The textured background is from Subtle Patterns.

CSS for the Icon Font

There are a few ways to go about this, but we'll go with this:

@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot');
  src: url('../fonts/fontello.eot?#iefix') format('embedded-opentype'),
       url('../fonts/fontello.woff') format('woff'),
       url('../fonts/fontello.ttf') format('truetype'),
       url('../fonts/fontello.svg#fontello') format('svg');
  font-weight: normal; font-style: normal;

[class*=" icon-"] {
  font-family: 'fontello';
  font-style: normal;
  font-size: 3em;
  speak: none;

.icon-home:after     { content: "\2302"; } 
.icon-cog:after      { content: "\2699"; } 
.icon-cw:after       { content: "\27f3"; } 
.icon-location:after { content: "\e724"; }

CSS for the Buttons

The buttons will be arranged horizontally by making the list items inline-block. We'll make them butt up against each other with a little negative margin (or see these other techniques).

.nav {
  list-style: none;
  text-align: center;

.nav li {
  position: relative;
  display: inline-block;
  margin-right: -4px;

The lovely three dimensionality of the buttons comes from a subtle gradient and bevel and embossing courtesy of a pair of box-shadows, one normal and one inset. The width and height of the buttons are identical creating a square, which turns to a circle with border-radius. The line-height matches the height and text-align is set to center, so the icons will be both horizontally and vertically centered.

.nav a {
  display: block;
  background-color: #f7f7f7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
  background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7); 
  color: #a7a7a7;
  margin: 36px;
  width: 144px;
  height: 144px;
  position: relative;
  text-align: center;
  line-height: 144px;
  border-radius: 50%;
  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;

We can flatten out the buttons a bit on :hover to create a pressed look. You may want to save that for :active and do something else for :hover, but we'll leave that up to you.

.nav a:hover{
  text-decoration: none;
  color: #555;
  background: #f5f5f5;

At this point our buttons should look like this:

Not bad, but we have a ways to go.

Now on to the fun part, were going to be using pseudo elements to give us some additional elements to work with to create the rest of the effects. To create the horizontal "groove" you see between each button were going to add the pseudo selector :before to our list items. Using negative z-index we can keep it beneath everything. The double border give it the inset look. The negative margins we used on the list items earlier are what allow this groove to look continuous. We take advantage of absolute positioning to center the line.

.nav li:before {
  content: "";
  display: block;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #fff;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: -1;

For that extra three-dimensionality, we'll create a "well" around each anchor that the button sit inside. We can create this again with no additional HTML by using a pseudo element.

.nav a:before {
  content: "";
  display: block;
  background: #fff;
  border-top: 2px solid #ddd;
  position: absolute;
  top: -18px;
  left: -18px;
  bottom: -18px;
  right: -18px;
  z-index: -1;
  border-radius: 50%;
  box-shadow: inset 0px 8px 48px #ddd;

The size of the well (a bit larger than the button itself) comes from absolutely positioning itself behind the button and stretching itself out by using negative positioning values (top/bottom/left/right). The 3D look this time comes from a top border and inset box-shadow creating an internal shadow.

And we're done!

That wasn't so bad was it?

View Demo   Download Files

Browser Support

These buttons use a good bit of CSS3 and some pseudo elements which are CSS 2.1. Nothing too overly progressive though. Any version in the last few years of Safari, Chrome, Opera, or Firefox will have no trouble. IE 8 doesn't do CSS3, so it falls back to this:

Not a big deal.

IE 7 is similar only without the "groove" line as it doesn't do pseudo elements. Also not a big deal.


1 Unordered lists may not actually be ideal for navigation. We still used them here because we needed the extra element.

Notes from my “Web Designer’s Workflow” Workshop at Interlink 2012

I was just at the Interlink conference in Vancouver, Canada. I did my first ever workshop: a 3 1/2 hour romp I called "A Web Designer's Workflow". We literally went from nothing (creating a folder on the desktop) to a totally deployed website. We covered a lot of ground so I thought I'd write up some notes. And hey, why not blog it eh?

  • We started with absolutely nothing. Just made a folder on the desktop called "Interlink Workshop".
  • We opened up the folder in Sublime Text 2 and made an index.html file.
  • We looked at a couple of websites we were going to base ours off: UXMad and BarCamp Tour. They both have a gridular, modular kind of structure.
  • We hand-wrote the HTML structure. Basically a doctype, basic <head>, and some divs for columns. We didn't use any HTML5 (other than the doctype) just because there wasn't anything that warranted it yet.
  • We set up a very simple three-column grid using percentages for widths and gutters. We discussed using a last class to deal with the right-most column where we wanted to remove the margin, but ended up using :nth-child instead since last has no semantic value in a responsive enviornment where that column man not always be "last."
  • In case we needed to use padding within those columns, we used universal box-sizing border-box to make sure the padding wouldn't expand the columns and destroy our grid. We also covered why it's pretty much awesome all the time and we'd marry it if we could.
  • We needed some content inside some modules so we used HTML-Ipsum to copy/paste some stuff in there.
  • We started to write a bit more complicated CSS, so we decided to start using Sass. We made a "scss" folder in our project and made a global.scss file.
  • To make Sass trivially easy to start using, we used CodeKit. We simply drug the folder into the CodeKit window then told CodeKit to process our global.scss file into a global.css in a "css" folder. That CSS file is what we linked to from our index.html file.
  • We made sure CodeKit processed the scss into "compressed" format which is the most efficient way to serve CSS and also as a reminder to anyone accidentally opening the file that they shouldn't be editing it.
  • Windows users that can't use CodeKit, check out the Beta LiveReload. Linux users, you're so fancy you don't need any help here.
  • We watched as CodeKit injected new CSS styles into the page without reloading, which is wicked sweet for stated applications.
  • We set up some typographic styles for our modules. Part of the fun was making the module header bars, which we used negative margins to pull back out from the padding in the modules.
  • For fonts, we showed how quick and easy it is to use Typekit to use lovely custom fonts. To make it easier to download and use at home, the final version is using Google Fonts.
  • We made sure to watch which font weights we were using. We picked as few as possible to accomodate our needs, keeping things fast, as the file size of font files can add up quick. We specifically declared font-weight to exactly what we have available to avoid gross faux styles.
  • We used a little bit of CSS3. At first, we wrote our own mixins.scss file but then decided doing that would be problematic long term and we switched our project over to use Compass instead, which was very easy in CodeKit.
  • We made a special file for variables we could then use in our CSS. We set up some colors and a special number value, $globalPadding, which we used all over the place to keeping spacing nice and consistent.
  • We needed a sexy subtle background, so we went and got one.
  • We had to fart around in the Finder a bunch, as you do, so using the split screen feature of TotalFinder was nice.
  • We thought we had a good start and was about time we got started with some version control. Because we are good-looking, we went with Git.
  • We were thinking about GitHub, but GitHub doesn't help with deployment, so we made a git repo on Beanstalk instead.
  • Beanstalk is nicely integrated with the Mac app Tower, which we used to work with Git locally.
  • We looked at GoDaddy, where I bought the domain from. All we had to do there was get through the 56 up-selling dialog boxes and buy the domain for 12 bucks or whatever. Then we set the nameservers to point at Media Temple, where I have some hosting we could use.
  • I logged into Plesk, the server management software that comes installed on Media Temple (dv)'s and created the domain there, so we get an FTP username and password to log in to.
  • We could have used software like Coda 2 to log into our server and deploy our files. But then we decided that an FTP workflow is too dangerous. #FTPBOOFOREVER.
  • Instead, we set up deployment with Beanstalk so that every time we committed to that git repo, it moves the files over to our server for us. Doing this means we're in a great place for working with a team, rolling back changes, and all the other awesome stuff that version control affords us. Here's a screencast on that.
  • We started putting some images into modules. We found some neat ones searching Creative Commons licenced stuff on Flickr. One image was too big and broke out of its module. We dealt with it by applying some simple fluid images techniques. We didn't get too fancy, but we got the images resizing and maintaining aspect ratio. We could have gotten fanicer.
  • We dropped a video into a module as well. We tried to use the same fluid technique as images, but unfortunately it didn't work so well.
  • To solve that, we loaded up jQuery on the site (copied the script from ScriptSrc), loaded up the FitVids.js plugin, and called it.
  • We explored some of the JavaScript features of CodeKit. It can check our JavaScript with JS Hint, which will find errors. We also figured out that we can drag-and-drop scripts in the UI of CodeKit which will allow us to combine (append or prepend) scripts, minify them, and create a new script for us to use. This allows for a nice JavaScript workflow similar to what were were able to do with CSS preprocessing.
  • With another image, we played around making it responsive by setting it as a background image in CSS and using fancy CSS3 background sizing.
  • To round out the whole responsive aspect ratio thing, we played around with padded boxes, which we learned was the same concept that FitVids.js uses.
  • We got into the idea of using icons to enhance the design by adding them into header bars. We looked at Pictos Server and saw how easy it was to create custom hosted icon sets. We talked about how in production it's probably best to self host. We also looked at IcoMoon, an awesome icon set and even awesomer app for creating your own icons fonts with any base icon font set. The final version of the site uses this.
  • There was a question about forms, so we looked at how Wufoo can help with that. Even if you don't need all of Wufoo's features, you can design a form in Wufoo and download the HTML/CSS/JS for free. The structure of Wufoo forms is fantastic for environments that need to be highly adaptable, for instance, being able to change around label placement or deal with right-to-left languages.
  • Every once in a while we needed to Google stuff, and we looked at how adding " mdn" to the end of searches often gets you to the Mozilla Developer Network which is some of the best documentation out there for front end stuff. Heck you could always search on CSS-Tricks too =).
  • We looked at the HTML5 Boilerplate. We didn't start our project with it, but we looked at the index file line by line and copied stuff over from it that we forgot to add ourselves.
  • We looked at Normalize.css and discussed how it does both more and less than CSS resets and how the workflow for it is much nicer (i.e. download, don't remove anything but change or add stuff, @import into global).
  • We made a logo for the website. The new HF&J font Idlewild just came out so we got that and used it in the logo.
  • The logo used a bunch of fun colors that were inspired from a sweater I saw on my walk over to the venue. Remember inspiration comes from anywhere.
  • We worked for a while just opening our index.html file in a browser at a file:// URL, but then after a while that became problematic so we set up a proper domain in MAMP so we could work on a local server at a "real" domain.
  • MAMP gave us the ability to use PHP, so we switched the index.html file to index.php so we could use server-side comments which are cleaner than HTML comments. We also used server side comments to give us a blank module template we could copy and paste, without worrying about cluttering/bloating the HTML.
  • We touched on how using PHP includes on simple sites can allow us to work in smaller chunks of HTML just like we've been doing in CSS and JS.
  • We organized a table-like structure for a time table by using an unordered list with strong tags inside. The strong tags were set to inline-block and right-aligned.
  • We touched on the idea of Opt-in Typography, that is, using a class on a parent element to identify when we want to apply typographic styles that don't take effect otherwise.
  • Eventually we published the thing. I also chucked it on GitHub if you wanna snag the files from there for any reason.

Annnnnd that's all I can remember. YEAH. That's a lot of stuff. I probably should have trimmed it down a bit and focused more on the content (both on the fake site and of the workshop itself). But hey it was my first ever and i had absolutely no idea what I was doing (sorry about that).

Favicons Next To External Links

I've had this JSFiddle (broken, see this Pen for fixed version) from CSS Wizardry open for like 2 weeks in my browser. I kept thinking about it, because before that I got an email from someone asking about essentially the same thing and it stuck in my head. They were wanting to insert a favicon next to links and use only CSS to do it. Unfortunately I haven't found a way to do exactly that, but using some jQuery we can do it pretty easily.

The "I Wish" CSS Only Technique

What would be nice is if you had simple semantic HTML like this:

<a href="">GitHub</a>

And then you could access everything you needed to insert a background image of the favicon using a service like getFavicon.

/* Fair warning, this doesn't work */

a[href^="http"]:before {
  content: url( + attr(href));

Maybe the syntax wouldn't be exactly like that, but something like it. The point is, you can't mix up the url() syntax into parts like that in CSS.

Google's Favicon Service

Google has it's own favicon service you can use. For example:

Update: thats broken now. You can use Grabicon instead now though.
Update: Grabicon requires a referrer apparently now which makes it fail in a variety of circumstances. Heidi Pungartnik pointed out Google's service still exists, it's just moved URL's slightly. Example:

See the Pen Favicons Next To External Links by Chris Coyier (@chriscoyier) on CodePen.


The trick is you need just the hostname and TLD and nothing else. I searched around and found a simple regex for getting that from any URL. We'll need that because links aren't always (or even usually) the root of sites.

function getDomain(url) {
  return url.match(/:\/\/(.[^/]+)/)[1];

Using these things, and jQuery, we'll find all links and apply the favicon as a background image. The external link checking is pretty rudimentary, but there are more robust methods here if need be.

$("a[href^='http']").each(function() {
    background: "url(" + getDomain(this.href) + ") left center no-repeat",
    "padding-left": "20px"

Then @travis reminded me that you can just use this.hostname instead of the fancy regex. So:

/* Nothing else needed */
$("a[href^='http']").each(function() {
    background: "url(" + this.hostname + ") left center no-repeat",
    "padding-left": "20px"

I'm not sure what the browser support is for hostname, whether it's just as good as href or less so, not sure.

getFavicon Method

Update: This service appears to be gone. Just leaving up for posterity.

@seanodotcom showed me another similar service galled getFavicon.

It's hosted by Google AppEngine, but it's not Google's own service. I did find it a bit slower. But the advantage being that you don't need to deal with host names at all, you just give them the full URL.

So then it becomes:

$("a[href^='http']").each(function() {
        background: "url(" + this.href + ") left center no-repeat",
        "padding-left": "20px"

View Demo


As I'm sure you know, the number of HTTP requests a page makes is a huge deal in performance. Each little image in these techniques are one page request each.

@yuritkanchenko pointed out to me a cool favicon service that can automatically sprite the favicons for you so you can keep it to one request.

For instance:

I'm afraid I didn't go the extra mile here and write the JavaScript needed to find all links, concatenate the domains, make the request, and then apply the images as a sprite, but I'm sure you could whip that up pretty quick if you really needed it.

WordPress Meet Responsive Design

Ian Stewart, Sara Cannon and I are featured in this lovely little (free) book on Responsive Web Design and WordPress. It's a part of the new Code Poet, a new thingy by Automattic full of high quality resources on WordPress development.

The real conflict behind <picture> and @srcset

Jason Grigsby explains it. Essentially: Browsers use a "pre-parser" to find resources in a document it will later need. This plays a huge role in making them fast. It can't wait around for layout information, which is exactly what responsive images need to make a smart call.

Sass vs. LESS

"Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing.

Really short answer: Sass

Slightly longer answer: Sass is better on a whole bunch of different fronts, but if you are already happy in LESS, that's cool, at least you are doing yourself a favor by preprocessing.

Much longer answer: Read on.


Which responsive images solution should you use?

There are a bunch of techniques going around for dealing with responsive images lately. That is, solutions to help us serve the right image for the occasion (e.g. size of screen and bandwidth available). They all do things a bit differently. To keep track, Christopher Schmitt and I have created this spreadsheet of techniques.

The spreadsheet has the data, but let's digest it through thinking about it through the lens of practical questions.