Burst Title Read on! →

Jan 19 2012
25

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. Which I failed to do. There was these neat title screens that I thought would be fun to recreate with CSS. …

YouTube Popup Buttons Read on! →

Jan 14 2012
34

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 pops up, eager to be clicked. …

(Better) Tabs with Round Out Borders Read on! →

Jan 10 2012
90

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.

On to more articles! →

Latest Snippets

Latest Screencast

#107: LiveReload, a Menu Bar App for Preprocessors and Speedy Development

LiveReload is a Mac-only menu bar app that is quite helpful for web developers. Just tell it to watch a specific folder, and when a file is saved, the browser will automatically refresh showing the change. So no need to switch applications and manually refresh, which is awkward and prone to breaking concentration.

Even better, LiveReload can trigger all the preprocessing to happen first. So if you like to work in SASS, Compass, LESS, Jade, CoffeeScript, Eco, HAML, Slim, or Stylus (or would like to try out working with these languages) LiveReload makes it easy. Essentially, just start making files with the appropriate file extention and LiveReload will compile them down to their native language every time the file is saved.