Demystifying CSS At-Rules

CSS at-rules (or @rules) are so-named because they utilize an @ character. They aren’t used as often as other CSS elements, and for a long time I didn’t really understand them. If you’ve ever been confused about CSS at-rules, here’s a quick guide:


This is used to specify the character set encoding of your stylesheet (external). It’s found at the top of the stylesheet, and usually looks something like this:

@charset “iso-8859-1”;


This is used to import a stylesheet, in the form of:

@import url(newstylesheet.css);

@import is usually used to hide certain styles from older browsers, which don’t recognize it. So it’s used in conjunction with the link tag.


This will apply its contents only to a specific type of media. Some options are:

  • all – every media
  • aural – speech synthesizers
  • braille – braille
  • handheld – for handheld devices
  • print – for printers
  • screen – for computer screens

For example, I could specify that for printers, all text must be bold and in a serif font. I would do this:

@media print { body {font-family:serif; font-weight:bold;} }


This one, you know already. It’s a method of specifying and embedding fonts of your choice in your website design, and I’ve previously posted tips on using it, as well as links to awesome @font-face kits you can use.



Favorite Five: Twitter Services

Addicted to Twitter yet? The truth is that I didn’t think I would ever become a “Twitterholic”, but that was back when I thought it was just a glorified “status updater”, before Twitter allowed me to do everything from donating to Haiti to finding new web design clients.

That’s right, I’ve gotten hired for projects via Twitter. This means that Twitter has actually made me money. Hey, they don’t call it a “bluebird of happiness” for nothing!

Today, I want to show you five things you can do with Twitter that you might not be aware of. Twitter itself is a very simple service, but one of the reasons it’s become so popular is that there are so many things you can DO with it.

Write longer tweets with BiggerTwitter

Does the 140-character limit frustrate you? I know I have a tendency to chatter away a little too much, but 140 characters never seem to be enough for me. Luckily, there’s the BiggerTwitter service, which lets you post longer messages and simply linking them to your tweet.

Know when you’re mentioned in a tweet with TweetBeep

If you regularly Google your own name, you’ll love this service, which alerts you whenever you’re mentioned on Twitter. It works with shortened URLs like tinyurl and bit.ly as well.

Schedule tweets with Social Oomph

Pre-writing tweets might seem to defeat the purpose, but if you manage several Twitter accounts or use it primarily for business and promotions, a service like Social Oomph is great. There’s a professional version, but the free version is pretty powerful on its own, allowing you to schedule tweets and do other things like tracking specific keywords, save and reuse drafts… even do reciprocal unfollows (unfollowing those who unfollow you).

Learn more about your followers with ChirpStats

Formerly known as TwitterLess, a service that alerted you whenever people unfollowed you, ChirpStats is a lot more positive, which I like. It still tracks your “unfollows”, but its new analytics service gives you a picture of your current followers as well.

Access your Google Calendar with TwitterCal

I’ve admitted my dependence on Google’s services before, which is why I absolutely adore TwitterCal. It works exactly like it’s supposed to: simply follow @gcal, submit your Google Calendar details, and add events to your Calendar with a direct message, like so:

d gcal dinner with geraldine on thursday, 1st of april at 7pm

Bonus: the Nudge command

NUDGE is a command that sends a reminder to one of your friends to update their Twitter. When my friends and I were new to Twitter, we used this quite a lot- we hadn’t gotten into the habit of updating our statuses, and with many of us in various places around the world, we loved knowing what the others were up to at any given time. Simply send “NUDGE username”.

Do you use third-party Twitter services?


Design Focus

Friday Focus 03/26/10: Full Bloom

Let’s celebrate the new season with stunning designs that display the best nature has to offer. Happy Friday Focus!

Designs of the Week

ktgardens.cz - příběh vaší zahrady

Wonderful design. The hover effects are brilliant. I also like how the layout is open and flowing. Both the photographs and the inner page designs are full of personality.


The integration of nature here is simple and limited but the effect is still eye-catching.

Solace Beeswax Candles

I can’t stop looking at this site. The art is topnotch. It’s warm and relaxing but still a strong color palette; I want to put it on my desktop or hang it on my wall. The animated candles are a nice, subtle touch.

Visualwild.com :: Portfolio for James Ricks

Despite its darkness, the has the same effect on me as the previous one—the design has a great scene that puts you in a certain mood. The typography and other graphic details are also excellent. Tiny gripe: the contact icons and CSS awards could have been blended in better.


Despite some cliche elements (the man with outstretched arms and the glowing tree), there are some great graphic details on this site. My favorite would have to be the borders turned twisting ribbons turned hills, with leaf-like patterns—how do you even describe this? The brown, orange, gold, and green colors blending into one another is just great.

Social Media Weekly

User ExperienceFive User Experience Trends I’ll be Watching in 2010
“Today I’m sharing five trends I’ll be watching over the coming year (and beyond) along with some thoughts about how they might change our industry. And even if I’m wrong about some of these, I’ll be interested to see where they go.”

CSS11 CSS3 Code Generators to make CSS3 development a breeze
“CSS3 is awesome, but the new syntax is sometimes hard to get your head around. Thankfully though, a few kind souls have created some very useful tools to generate the code for you.”

CSSA Killer Collection of Global CSS Reset Styles
“I have used each of these resets on various occasions with great success, and have even managed to scrape together a customized hybrid that cannibalizes key aspects of various others. For each reset, I provide as much information as possible concerning the source of the reset, key effects, and other essential information.”

jQueryjQuery Presentation Plugin: Say NO to Keynote!
“I wrote this small jQuery plugin that gives you an interface in a browser to give a presentation. If you are getting antsy, take a look at a demo or download it from github.”

Design7 Steps To A More Effective And Productive Web-Design Process
“The tips and tricks below are my personal experience. It has worked for me and I’ve learned many of them from working with other designers, too. They’re little insights into my own design process. I hope you find it useful.”



Favorite Five: @font-face Choices for Numerals

I use @font-face (and have blogged about it a few times here), and am always on the lookout for good @font-face kits to enhance a website’s design. Recently, while working on a project that was particularly text and number-heavy, I became a little obsessed with finding fonts with great looking numerals to use with @font-face. Here are my favorites:


This is the one I eventually chose for my project, mostly because it looks so clean and elegant, with classically formed numerals and easy to read letters. Comes in “Bronze” and small-caps versions as well. Download Imperator @font-face kit »

Goudy Bookletter 1911

Sometimes I have to be told to “step away from the Goudy”, because Goudy- that classic font that’s been around since 1916– is hands-down one of my favorite serif fonts. Trust me when I say it looks great used in @font-face, as long as your font sizes aren’t too small. Beautiful numerals that are stylish yet clear. Download Goudy Bookletter 1911 @font-face kit »


This one is listed in the “1950’s” category, and it does have a bit of a Mad-Men feel to it. Its numerals that are similar in style to Goudy Bookletter’s, but I like using KelmscottRoman because its letters are a little more stylized, and good for headlines and banner text. Download KelmscottRoman @font-face kit »

Chanticleer Roman

A good, solid choice, ChanticleerRoman is a little bit old-fashioned, but renders beautifully as an @font-face font. This one also looks particularly good at larger sizes. Download Chanticleer Roman @font-face kit »


You’ll notice that most of my choices here are serif fonts- that’s because I think their numerals are always more interesting than sans-serifs. But Qlassik, a sans-serif that’s a little bit rounded, displays its letters and numbers almost gracefully. A beautiful choice for both vintage and modern designs. Download Qlassik @font-face kit »



Getting Started Designing Tumblr Themes

I was recently asked to convert one of my existing original WordPress themes to a Tumblr theme. As far as I know, there is no quick and easy way to do this- and comparing the WordPress template tags and the Tumblr theme code convinced me of one thing: I was going to have to rebuild the theme from scratch.

At first, the task seemed daunting. Tumblr’s variables- from “block”s to “PortraitURL”s- were completely alien to me. Then I thought back to when I first looked at WordPress code, how confused I was at the time, and how comfortable I am with it today.

And just like that- no more fear! Tumblr’s code was just something I’d just have to learn.

Here are some steps to get started designing your own Tumblr themes:

Start at the Tumblr how-to page.

Read and bookmark this page; it’ll become your best friend throughout this process. At the same time, make sure you…

Spend some time at the Tumblr Theme Garden.

It’s important to know exactly what you can do with a Tumblr theme, and one of the best ways to do this is to look through their official theme repository. Each theme listed here has a Preview button, so you can get a feel of how it works at a generic level.

Start your own Tumblr blog.

If you don’t have a Tumblr blog already, I strongly suggest signing up for one (it’s free). You can use this for testing, and who knows- you might just like it enough to use it “for real”.

Download existing Tumblr themes to take apart.

It’s how most of us got started coding in the first place: take something existing, take it apart, and study how it works. It isn’t possible to download themes at the Theme Garden, but there are some generous souls out there who have made their custom themes available for download. Check out DigitalThom, Franklin Street, or Munich.

Make your Tumblr theme customizable.

Everybody wants options, and it’s actually quite simple to enable customization in a Tumblr theme. For example, adding the {CustomCSS} variable will allow users of your theme to do some visual tweaking without having to touch your markup. For more ways to add customization options, see the guide on Tumblr.

Do you design Tumblr themes?



5 CSS Shadow Tips

When used properly, shadows can make a good design look great. The key, of course, is the phrase “when used properly”. If you haven’t experimented with CSS shadows, here are some quick ways:

Shadow to Text using text-shadow

h3 {text-shadow: 0.1em 0.1em #999}

In this example, we are defining a grey (#999) shadow, positioned slightly to the right (.1em) and slightly below (.1em) the h3 text. The definitions are:

  1. The color of the shadow.
  2. The x-coordinate of the shadow.
  3. The y-coordinate of the shadow.
  4. The blur radius of the shadow. (not used in this example)

*Note that the coordinates are relative to the position of the text. Also, you can define the color either before or after the coordinates. Learn more about the text-shadow property at the W3C.

Drop Shadows

You can use a PNG for your shadow, as illustrated here (less code), or use pure CSS (more code), as described here. Finally, WordPress users will want to take a look at the WordPress Shadows Plugin.

Moving along: because we love tips around here, here are five tips on ways to make them work well for you:

A little goes a long way.

You may be tempted to add shadows to everything. Don’t. By restraining yourself, and apply shadows only to a few key elements, you can make the latter really “pop”.

Add subtle shadows to text.

I did say restrain yourself, but at the same time, using subtle shadows on all your text can look great. For example, the letterpress effect looks beautiful and can enhance readability- which is always a good thing.

Go lighter.

Stay away from using black as your shadow- it looks unnatural, and can make your text more difficult to read. Commonly used colors are #666, #999, and #CCC.

Experiment with multiple shadows and other techniques.

As shown in the W3C examples, you don’t have to limit yourself to just one shadow per element. Another technique is to use shadows to create text outlines (good for white text on a light background). Play around a bit, but don’t overdo it.

Test, test, test.

Finally, remember that text-shadow is not fully supported on all browsers yet. Make sure your design still looks as good as possible with lots of testing on different browsers at different resolutions.

Do you use CSS shadows?


Design Focus

Friday Focus 03/19/10: Left-Aligned

Here’s an old-school pattern that hasn’t gone the way of the dodo: left-aligned designs. Symmetry is great, but asymmetry? Even better. Welcome to this week’s Friday Focus!

Designs of the Week

Blue Sky Resumes

Going left-aligned isn’t just about “being different”, sometimes the design really calls for it, like this one does. It also has a fixed area—those two seem to go hand in hand for a lot of sites, don’t they?

Valchan Petrov

Utterly simple formula (photographic background + minimal graphics) but it works!

points n' pixels

This one’s the polar opposite of the previous design: a calmer look, Flash for the photographic background transitions, and custom fonts.

Dustin Walker

Do your users hate long-scrolling pages? Make people love ’em—this site makes it easy with the up/down arrows. I also like that the heading backgrounds match the portfolio color schemes.

Karo Mumkin

Not shown, but I like the treatment of the posts in the lower half. Another example of matching by color (and by icons), and also breaking the boxiness away.


I love elegant, subtle designs. Interesting portfolio technique: display nothing but a full-size screenshot of your work for each client page. That way people experience the designs as close to the real thing as possible. Lightboxes and other solutions usually resize down.

Social Media Weekly

DesignFree Icon Search Engine – FindIcons.com

CSSCSS Font Shorthand Property Cheat Sheet
“I’ve prepared a printable cheat sheet that you can download and hang next to your computer, which will come in handy in case you decide to use this property yourself, or are forced use it in a stylesheet from an inherited project.”

CSSThe Right Frame of Mind: Applying the Lessons of CSS Frameworks
“The purpose of this article isn’t to debate whether or not you should use a framework, but to examine why the need for such solutions exists. We’ll take the processes used (and lessons learned) in their creation, and try to show how they can be applied to your own style sheets.”

HTMLHTML5 structure—div, section & article
“These elements are replacements for the common ad-hoc semantics we applied before HTML5 with @class and @id, for example <div class="sidebar"> or <div class="nav">.”



5 Hot Color Combos for the Web

I almost titled this post “5 Hot Color Trends for the Web”, but the truth is that I’ve never really considered myself “trendy”- and I’m not sure if trends are something we designers should give much importance to. With design- especially web design- we want to innovate, whether it’s a new spin on a vintage look or a modern design sitting on the cutting-est of edges.

If, like me, you spend an inordinately large amount of time over at COLOURlovers, you’ve probably seen some of these color palettes, which I’ve chosen as my current favorites, color combos that give me inspiration. Let’s hope they do the same for you:

Golden Yellow Sunset

I love finding inspiration in objects handmade from natural materials. This color combination is based on a necklace at Etsy made of Amber and Citrine chips and freshwater pearls. A lovely, light and summery color palette.

Dive Into Color

Everyone likes to talk about “embracing color” in design- but the truth is, putting a variety of colors together without coming up with something garish or circusy can be difficult. This combo, inspired by a room on HGTV is colorful in a comfortable way.

Kimberley and Luke

My husband and I designed (and printed!) our own wedding invitations ten years ago, and it’s always great to see other designer couples get creative. This color combination from Kimberley and Luke’s wedding invitation was obviously well thought-out, where “JCrew meets Pomegranate meets Tiffany’s”. Gorgeous.


If you haven’t discovered the Wear Palettes website yet, go. It’s one of my favorite bookmarks, offering up inspiration in way of street fashion, celebrity style, and plants. This one, based on the ultra-simple “jeans, jacket, scarf, gloves”, is a lovely neutral color combination.


Anyone who knows my work knows I have a penchant for muted, monochromatic color combos. I’m not proud of this, and am always struggling to incorporate brighter hues into my designs. Superawesome’s use of bright colors is simple yet genius- it doesn’t blind you, but it does make you feel good. And isn’t that what color is all about?

Where do you find color inspiration?


Design Focus

Friday Focus 03/12/10: Grit & Grime

Going dirty has never looked this good! It’s grungy websites this week on Friday Focus.

Designs of the Week


It’s interesting how despite the chaotic background you can still make out the boxiness. A nice contrast.

Inferno Band from Cyprus

I like how the site is designed as this screaming poster for the band. The content for each page is minimal and concentrated in the middle. The style is a bit of old school webdesign with the custom scrollbars and whatnot, but impact looks like the top priority here.

Nicola Gatti

Again, this looks chaotic but at first but you’ll find the screen divided into three: the navigation area, the content area, and the slideshow area. Simple.

Matt Salik

I just love how well-integrated the navigation is into the design, which happens to be a bit cheery and not just the usual angsty grunge. Another thing I like: the custom background for the lightbox overlay—a lot of people don’t bother changing that, and here it matches the design.


Truth is, only the background is the grungy part. The foreground is a very interesting folded paper texture, which even influences how the logo looks. Also interesting is the treatment of the portfolio items.

Social Media Weekly

CSSProgressive enhancement: pure CSS speech bubbles
“Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.”

Usability5 Can’t-Miss Usability Tips for Mobile Website Designs
“Because of the instability in a lot of the mobile web design information that is being distributed on the web, a lot of websites have very poor mobile interface designs. Below, we’re going to cover a few simple, yet prominent steps to designing a much more effective interface and increasing the quality of a mobile websites usability.”

JavaScriptThe Total Newbie’s Guide to jQuery: Select Elements and Manipulate CSS with jQuery (Part 2)
“If you’ve been wanting to learn the basics of jQuery and start adding some dynamic interactions to your website, this is the place to start. If you’d like to follow along with the code in this article, download the sample, which includes all of the code examples from the book.”



Web Management from your Desktop

Browsers and the web do go hand in hand, but there are several applications available these days that enable you to manage your web tasks straight from your desktop. Here are a few things you can do with specific apps:

Moderate WordPress Comments

Moderator (Mac, Windows, Linux)

This Adobe AIR app lets you view and manage comments on your WordPress-powered blog. You can choose to accept or delete unmoderated comments, or mark them as spam. The app will also notify you (on your dock or system tray) of the number of pending comments you have. Comes with a WordPress plug-in.

wp-comments-notifier (Windows)

This open-source app works much in the same way as Moderator, but it’s written in QT/C++ and allows you to reply to and edit your WordPress comments as well as manage them.

Write & Manage Blog Posts

Blogo (Mac)

I only blog using my browser (but that’s because I’m a bit of a control freak)- but I used Blogo’s 21-day trial and really, really liked it. Mostly because of its friendly user interface, and its Whiteroom-like “clean screen” for blogging without distractions.

Windows Live Writer (Windows)

For blogging when I’m on Windows, my app of choice is Writer from Windows Live. It supports WordPress, Blogger, LiveJournal and TypePad, works smoothly, and has a good Windows-y feel to it. The best thing about Live Writer, though, are its plug-ins, which allow you to do things like insert content from your existing Facebook or Flickr accounts.

Monitor Your Website(s)

Website Monitor (Google Gadget)

My favorite desktop web monitoring apps are Google Gadgets, and this is one of them. It’s basic, simple to use, and just works, monitoring the response time and content of your website, and automatically notifying you of any problems.

Do you manage your websites from other desktop apps?



5 Web Apps for Twitter Addicts

I have to admit, I didn’t embrace Twitter right away- it took me some time to really “get it”- to find a client I really liked (TweetDeck); to discover what type of people I wanted to follow; and finally, to realize that I didn’t have to tweet every minute about every mundane detail in my day to fully appreciate Twitter.

Now, of course, I can’t imagine going a day without checking Twitter. Web application developers know this, and as a result we have hundreds of Twitter-related apps available to us out there. Here are my favorite five:


One of the reasons Twitter can be such a time-sucker is because you usually have to weed through hundreds of Tweets, finding those you’re interested in at any one time yourself. Tweetwally is a nifty little service that makes it easy to track specific tweets based on hashtags, usernames or keywords. That may not sound like much, but Tweetwally has some great search operators, for example:

traffic ? will find tweets containing “traffic” and asking a question.
“happy hour” near:”san francisco” will find tweets containing the exact phrase “happy hour” and sent near “san francisco”.

The Twitter Tim.es

If, like me, you’re a frustrated publisher, you’ll love what The Twitter Tim.es does: it generates a “real-time personalized newspaper” from your tweets. For example, see Tim O’Reilly’s Twitter Tim.es Newspaper.


In the same vein, TweetNotebook publishes your tweets in a whole new way- but takes it a step further, generating a real paper notebook that features one of your tweets on each of its pages. Simply submit your Twitter username, select a cover design, and it’s ready to go (cost is 12 euros). I adore this.


Like to rate stuff? How about your friends’ tweets? Tweeterate lets you rate other people’s tweets as “useful, funny or lousy”- then see a list of your most “annoying” friends based on your ratings, and then choose to hide them if you like. It’s a bit of silliness, really, but I have to admit I clicked through to some of the top-rated tweeters listed here and found a few of them useful.

Tweets of Fury

This one’s even more pointless (it is, after all, brought to you by Pointless Corp.), but can be fun and is certainly one of the more creative Twitter-related apps I’ve seen. You can challenge your friends to a battle, submit “scandalous information about each other”, then play rock, paper, scissors (yay!), and- if you lose the latter- deal with having the scandalous info about you publicly posted on Twitter.

What Twitter web apps do you use?


Design Focus

Friday Focus 03/05/10: Narrow

Just because monitors have gotten bigger doesn’t mean we should jump into wide layouts all the time. See how these designs make use of narrower widths effectively.

Designs of the Week


Even several years ago this could be one of the narrowest sites out there, and it stands out because of that. Yet the content isn’t sacrificed.

't Creahuys

Needs a bit more refined type, but the overall look is quite pleasant.

Lise Marie og Tobias

This one, on the other hand, mixes a lot of different typefaces and shades of yellow to brown. It may be a bit glaring to some but the detalis are lovely.

Marvin Y. Thomas

This business card-type site looks almost underdesigned but still looks crisp and clean. Again, it’s all in the custom type.


A narrow layout lets striking photo backgrounds define the look of the site. I like that the menu on the left shows the subpages for each link, not just the top-level navigation: instant sitemap.

A Casa do Canto

Same photo background treatment, except it doesn’t change per page.

Tenth Time

Great graphic details everywhere, and a very restrained use of color.

Web Designer Notes

Narrow designs seem to have minimalist tendencies too. This one hides away the clutter with a sliding box for the navigation.

Thomas Maier

A narrow layout can also influence you to do a one-column, one-page site that makes reading and browsing more convenient.

Social Media Weekly

Design4 Pixels or Less
“Having too much choice is one of the main obstacles for 21st century designers. With virtually unlimited tools and possibilities at our fingertips in the digital age, our creativity can become clouded very easily. Being inundated with thousands of photoshop brushes or fonts can push the very concept of a design from the forefront of your mind.”

TypographyThe Future Of CSS Typography
“In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text.”

CSS!important is Actually Useful (in Print Style Sheets)
“So what you need is a way of specifying print styles that can override the inline styles. There’s only one way to do that: !important.”

CSSFlexible Color Schemes in Layouts with RGBa
“This will be an experiment in transparency. CSS has come a long way over the years, and one of the biggest advancements is the integrated use of transparency.”